weex初体验

一、什么是 weex

Weex 是阿里巴巴开源的一套构建高性能、可扩展的原生应用跨平台开发方案。首先总结一下 weex 的特点：

页面的开发目前支持Rax和Vue

Weex 也不是只支持 Vue 和 Rax，你也可以把自己喜欢的前端框架集成到 Weex 中，有一个文档扩展前端框架描述了如何实现，但是这个过程仍然非常复杂和棘手，你需要了解关于 js-native 之间通信和原生渲染引擎的许多底层细节。
一次编写，三端（Android、iOS、前端）运行

前提是都集成了 weex sdk，另外视觉表现做不到完全一样，有的会有一些差异，需要做一下适配。所以写 weex 页面的时候，如果支持三端，便需要在三端都进行自测。

UI 的绘制通过 native 的组件，JavaScript 逻辑在 JS 引擎里运行，两者通过 JavaScriptCore 通信

weex 里使用组件都需要在 native 端注册，这样 weex 里才可以使用，运行的时候通过注册时记录的 map 进行查找。weex sdk 内置注册了一些基础的组件，包括 list、text、input 等。WXJSCoreBridge 封装了 JavaScriptCore 实现 native 和 js 之间的通信。
支持 Native 扩展

可以将 native 的 UI 组件封装成 component，将 native 的逻辑代码封装成 module。从而在 weex 里可以进行使用。这里的 natiev UI 组件包括 modal、webview、image 等，这里的 native 逻辑代码包括 storage、network 等。
每个 weex 页面会被打包成一个 js 文件，weex sdk 将 js 文件渲染成一个 view

weex 的打包通过 webpack，将每个页面打包成独立的一个 js 文件，weex sdk 会将 js 进行解析，将 UI 部分绘制成一个 view, 再绑定 view 的事件与 js 代码绑定。

二、为什么要使用weex进行无线开发

效率问题

1）开发的人力成本

如果不算 web 端，一个页面本来需要 Android 和 iOS 2 个人开发；使用 weex 后只需要 1 个开发页面。

2）开发的编译速度

随着项目渐渐变得庞大，Android 项目一次编译需要 2-3 分钟，机器不好的还需要 10 分钟，iOS 可能会快一点，也需要 1-2 分钟。使用 weex 后，界面修改，只需要十几秒。

3）测试效率

提测之后，发现 bug，修复完成，测试总需要重新下载一个包进行安装；使用 weex 后，跟原生无关的 bug，只要测试重启 App 就可以进行验证。
动态化

weex 页面最后打包完是一个 js 文件，只要能做到动态下发 JavaScript，那便可以实现动态化，可以热修复，甚至可以热部署，完全替换或者新增页面。
成熟度

在 2016 年阿里双十一中，Weex 在阿里双十一会场中的覆盖率接近 99%，页面数量接近 2000，覆盖了包括主会场、分会场、分分会场、人群会场在内几乎所有的阿里双十一会场业务。阿里双十一主会场秒开率97%，全部会场页面达到 93%。 2016 年 12 月 15 日，阿里巴巴宣布将移动开源项目 Weex 捐赠给 Apache 基金会开始孵化。
2017 年，weex 在阿里业务里增长如下图，来自 WeexConf 2018。

avatar

三、Weex的工作原理

483534391-5722ddf9bbf7d_articlex.jpg

打包

熟悉 React Native 的人都知道， React Native 的发布实际上就是发布一个 JSBundle，Weex 也是这样，但不同的是，Weex 将工程进行分包，发布多个 JSBundle。因为 Weex 是单页独立开发的，每个页面都将通过 Weex 打包器将 vue/we 页面打包成一个单独的 JSBundle，这样的好处在于减少单个 bundle 包的大小，使其变的足够小巧轻量，提高增量更新的效率。

# 仅打包
$ npm run build
 打包+构建
$ weex build ios
# 打包+构建+安装执行
$ weex run ios

以上三种均会触发 Weex 对工程进行打包。
在我们执行了以上打包命令后，所有的工程文件将被单独打成一个独立的 JSBundle，如下：

1494908-9e44c2ec85dfbf56.png

打包后的 JSBundle 有两种格式

# 由.vue文件打包出来的包格式（简写），使用 vue 2.0 语法编写
// { "framework": "Vue"} 
/******/ (function(modules) { 
       .......
/******/ })

# 由.we文件打包出来的包格式（简写），使用 weex 语法编写
// { "framework": "Weex" }
/******/ (function(modules) { 
        .......
/******/ })

不同的头部是要告诉使用什么语法解析此JSBundle。

至此，我们准备「热更新的包」就已经准备完毕了，接下就是发包执行了。

发包

打包后的 JSBundle 一般发布到发包服务器上，客户端从服务器更新包后即可在下次启动执行新的版本，而无需重新下载 app，因为运行依赖的 WeexSDK 已经存在于客户端了，除非新包依赖于新的 SDK，这也是热更新的基本原理。

【WeexSDK】包括

 >【JS Framework】JSBundle 的执行环境
 
 >【JS-Native Bridge】中间件或者叫通讯桥梁，也叫【Weex Runtime】
 
 >【Native Render Engine】解析 js 端发出的指令做原生控件布局渲染

执行

Weex 的 iOS 和 Android 客户端的【JSFramework】中都会运行一个 JavaScript 引擎，来执行 JS bundle，同时向各端的渲染层发送规范化的指令，调度客户端的渲染和其它各种能力。iOS 下选择了 JavaScriptCore 内核，而在 Android 下选择了 UC 提供的 v8 内核（RN两端都是JavaScriptCore 内核）。

JSBundle 被 push 到客户端后就会在 JSFramework 中执行，最终输出三端可读性的 VNode 节点，数据结构简化如下：

{
tag: 'div',
data: {
 staticStyle: { justifyContent: 'center' }
},
children: [{
 tag: 'text',
 data: {
   staticClass: 'txt'
 },
 context: {
   $options: {
     style: {
       freestyle: {
         textAlign: 'center',
         fontSize: 200
       }
     }
   }
 },
 children: [{
   tag: '',
   text: '文字'
 }]
}]
}

有了统一的 VNode 节点，各端即可根据自己的方法解析渲染原生UI了，之前的所有操作都是一致的，包括文件格式、打包编译过程、模板指令、组件的生命周期、数据绑定等。

然而由于目标执行环境不同（浏览器和 Weex 容器），在渲染真实原生 UI 的时候调用的接口也不同。

1494908-1a151022056cbade.png

此过程发生在【Weex SDK】的【Weex Runtime】中。

最后【Weex Runtime】发起渲染指令callNative({...})有RenderEngine完成渲染

总结一下

Weex 文件分包打包成单个 JSBundle 文件
发布到发包服务器上，通过热更新 push 到用户的客户端，交由【Weex SDK】执行解析
SDK 中的【JS Framework】执行 Bundle 脚本生成 Virtual DOM
Virtual DOM 经由各端执行环境【Weex Runtime】解析翻译成执行指令
【Native RenderEngine】接收到指令后执行渲染操作，作出渲染出完整的界面

四、基本开发

预备知识点

入门 Weex 前需要了解以下知识，这样能帮助你更快的掌握

Node：《Node.js 教程》

Vue：《Vue.js官方教程》

ES6：《ECMAScript 6 入门》

再者就是 ios 和 android 开发语法的入门和编辑器的使用

安装开发环境

1.安装Node

https://nodejs.org/en/download/

查看node版本

node -v

查看npm版本

npm -v

2.安装weex-toolkit

npm install weex-toolkit -g

查看weex版本

weex -v

3.创建项目

weex create （项目名称）

4.进入项目，安装依赖，预览

cd 项目路径
npm install
npm start

5.编译和运行

weex platform add ios
weex platform add android
weex run ios
weex run android
weex run web

6.调试

weex debug