Weex

基本概念

Weex

• 阿里巴巴公司与2016年6月开源的一种用于构建移动跨平台的UI框架
• 基于JS开发框架
• 基于Vue.js

Vue: 一种渐进式 JavaScript框架

React Native

• Facebook在2015年3月在F8开发者大会上开源的跨平台UI框架
• 基于JS开发框架
• 基于React.js

React: 用于构建用户界面的 JavaScript 库

Weex和React Native的异同

Vue和React的比较

相同点:

• CSS属性通用
• 都使用JS开发
• 都可以直接在Chrome中调试JS代码
• 需要Node.js基础环境

不同点:

Weex基于Vue.js ， 以下是HelloWorld代码示例

React Native基于React.js，以下是HelloWorld代码示例

import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
class HelloWorldApp extends Component {
  render() {
    return (
      Hello world!
    );
  }
}
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

Weex的基本安装

参考资料

环境搭建：

1. 安装Node.js， 命令行输入

brew install node

2. 安装weex-toolkit， 命令行输入

npm install -g weex-toolkit

3. 检查weex是否安装成功，命令行输入

weex -v

4. weex-toolkit也支持直接升级子依赖，命令

weex update weex-devtool@latest

@后标注版本号，latest表示最新的

初始化 Weex 项目：

weex create awesome-project

执行完命令后，在 awesome-project目录中就创建了一个 Weex 和 Vue 的模版项目

源码结构：

package.json：配置开发使用的node_modules依赖，及其它一些设置
start文件：启动程序文件，里面包换编译和启动脚本
examples：示例Demo
android/ios/html： 各平台代码
build：打包各平台的脚本，配置在package.json中。

开发：

cd 进入项目所在路径

1. 先通过 npm install 安装项目依赖
2. npm run dev 实现项目编译
3. npm run serve开启轻量服务器
4. 打开浏览器，进入 http://localhost:8080/index.html 即可看到 weex h5 页面
5. 初始化时已经创建好了基本的示例，可以在 src/index.vue 中查看。

整体架构

Weex 表面上是一个客户端技术，但实际上它串联起了从本地开发、云端部署到分发的整个链路。
开发者首先可在本地像编写 web 页面一样编写一个 app 的界面，然后通过命令行工具将之编译成一段 JavaScript 代码，生成一个 Weex 的 JS bundle；
在移动应用客户端里，Weex SDK 会准备好一个 JavaScript 执行环境，并且在用户打开一个 Weex 页面时在这个执行环境中执行相应的 JS bundle，并将执行过程中产生的各种命令发送到 native 端进行界面渲染、数据存储、网络通信、调用设备功能及用户交互响应等功能；
同时，如果用户希望使用浏览器访问这个界面，那么他可以在浏览器里打开一个相同的 web 页面，这个页面和移动应用使用相同的页面源代码，但被编译成适合Web展示的JS Bundle，通过浏览器里的 JavaScript 引擎及 Weex SDK 运行起来的。

[图片上传失败...(image-9b3303-1533698804331)]

运行时性能

React 和 Vue 都是非常快的，所以速度并不是在它们之中做选择的决定性因素。

优化

在 React 应用中，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件子树。

在 Vue 应用中，组件的依赖是在渲染过程中自动追踪的，所以系统能精确知晓哪个组件确实需要被重渲染。你可以理解为每一个组件都已经自动获得了 shouldComponentUpdate，并且没有上述的子树问题限制。

HTML & CSS

在 React 中，一切都是 JavaScript。不仅仅是 HTML 可以用 JSX 来表达，现在的潮流也越来越多地将 CSS 也纳入到 JavaScript 中来处理。这类方案有其优点，但也存在一些不是每个开发者都能接受的取舍。

Vue 的整体思想是拥抱经典的 Web 技术，并在其上进行扩展。

跨平台

ReactNative支持Android，iOS两个平台，需要自己扩展去支持web

Weex可以支持Android，iOS，web三个平台

打包

ReactNative官方只能将ReactNative基础js库和业务js一起打成一个js bundle，没有提供分包的功能，需要制作分包打包工具

Weex默认打的js bundle只包含业务js代码，体积小很多，基础js库包含在Weex sdk中

生命周期

• 生命周期函数依次为 init 、created 、mounted ，它们和 data 、methods 等属性是平级的；
• init 内一般用于初始化一些内部变量，绑定一些自定义事件，这时还没有数据绑定，没有创建vdom，所以不能通过this获取到data和methods，也不能获取vdom的节点
• created 完成了数据绑定 ，但还未开始编译模板，可以通过this获取data和methods，但不能获取vdom的节点
• mounted 完成了数据绑定和页面布局，可以获取vdom的节点
• data 中应该放数据源，对于复杂的数据对象，建议用 取值 -> 修改 -> 赋值的方式更新数据，否则可能会导致页面不停刷新；
• methods 中可以放需要自定义实现的函数，不需要将生命周期函数放在 methods 中实现；

样式设置

写法一：直接给组件style属性赋值

写法二：利用class关键字

• template 只支持一个根节点，多个根节点将无法被
  Weex 正常的识别和处理
• 为了简化页面设计和实现，屏幕的宽度统一为 750 像素，不同设备屏幕都会按照比例转化为这一尺寸进行长度计算
• Weex 目前只支持像素，并且 px 单位可以忽略不写，直接使用对应的数值
• 子元素的样式不会继承自父元素，比如 color 和 font-size 等样式作用在 上层的
  上是无效的
• Weex 只支持了其中的一部分，比如盒模型、flexbox、position 等布局属性，以及 font-size、color 等其它样式
• 通过 style 、 template 、 script 将样式、视图和数据逻辑进行了分离，前端开发经过这么多年的发展，html、css和js的分开编写应当是顺理成章的

事件绑定

使用 @click 关键字声明方法，并在 methods 中实现相应的方法

• {{name}}是Vue.js的数据绑定语法，只要对 name 的值进行了变更，则会立即生效。
• data中定义数据，类似于成员变量，methods定义方法，可以把module.exports看做一个类。