weex

我们主要的技术栈是围绕着Vue建立的，自己做了统一的脚手架，已经适配了后台系统、微信公众号、小程序、自助机等多端的项目，就差APP的解决方案了，如果能用Vue的基础去接入，就完善了整个前端技术链，配合脚手架和Vue的语法基础项目间的切换成本就会很低，开发效率会很高。

基于Vue的技术栈，让我们写业务的同学能很快适应，拆分组件，widget插件化，mixins这些相关的使用都能直接用上，剩下需要学习的就是Weex的Component和Module的使用及css的支持性，我们脚手架接入之后也直接支持sass/less/styule，整个过程让新同学上手，半天的时候见能搭建出一个完整的demo页面，上手开发很快。总体来说，成本对于我们来说是一个大的优势

性能监控和容灾处理

Weex自己本身就做了很多性能监控，只需要对性能数据接入我们的监控系统，就能展示出对应的性能数据，目前从监控效果上来看确实实现了Weex对性能的承诺。

容灾处理用于处理jsBundle访问失败的情况，Weex自己具备容灾处理的方案，需要开发者自己做改造进行降级处理，展示页⾯面时，客户端会加载对应如果客户端加载js bundle失败可以启用webView访问，展示HTML端，但是体验会非常不好，我们采用内置包 + 热更新的机制，保证我们不会出现包解析失败或者访问不到的问题，如果发布的包有问题，可以紧急再发布，用户立马会接收到更新，并且根据配置告知用户是否立马更新，想要做的更好，可以保存一个稳定版本的包在用户手机中，遇到解析错误崩溃的问题，立即启用稳定版本的内置包，但是这样会导致包比较大，如果需要稳定的容灾处理可以考虑这样去实现。

在完成了方案调研和简单的demo测试，我们就开始落地，围绕的Weex也做了非常多的周边环境的建设，比如现有脚手架的改造以支持Weex的开发、热更新机制如何构建、客户端底层需要哪些支持、如何做扩展能与源码进行解耦等等。

还是说回正题，接下来介绍一下Weex整体的架构。

Weex 整体架构

从上面这个图可以看出Weex整体的运行原理，这里对流程做一个大概的介绍，后面每一步都会有详细的介绍。

Weex提供不同的framework解析，可以用.we和.vue文件写业务，然后通过webpack进行打包编译生成js bundle，编译过程中主要是用了weex相关的loader，Eros 对打包好的js bundle生成了zip包，还会生成差分包的逻辑。不管生成的是什么文件，最后都是将js bundle部署到服务器或者CDN节点上。

客户端启动时发现引入了Weex sdk，首先会初始化环境及一些监控，接着会运行本地的main.js即js framework，js framework会初始化一些环境，当js framework和客户端都准备好之后，就开始等待客户端什么时候展示页面。

当需要展示页面时，客户端会初始化Weex实例，就是WXSDKInstance，Weex实例会加载对应的js bundle文件，将整个js bundle文件当成一个字符串传给js framework，还会传递一些环境参数。js framework开始在JavaScript Core中执行js bundle，将js bundle执行翻译成virtual DOM，准备好数据双绑，同时将vDOM进行深度遍历解析成vNode，对应成一个个的渲染指令通过js Core传递给客户端。

js framework调用Weex SDK初始化时准备好的callNative、addElement 等方法，将指令传递给 native，找到指令对应的Weex Component执行渲染绘制，每渲染一个组件展示一个，Weex性能瓶颈就是来自于逐个传递组件的过程，调用module要稍微复杂一些，后面会详解，事件绑定后面也会详解。至此一个页面就展示出来了。

Weex 首先将编写的 Weex 源码，通过 transformer 转换成 JS Bundle。然后将 JS Bundle 部署在服务器，当接收到终端（Android、Web 端、iOS 端）的 JS Bundle 请求时，将 JS Bundle 下发给终端。在终端中，由 Weex 的 JS Framework 接收和执行 JS Bundle 代码，并且执行数据绑定、模板编译等操作，然后输出 JSON 格式的 Virtual DOM，JS Framework 发送渲染指令给 Native ，提供 callNative 和 callJS 接口，方便 JS Framework 和 Native 的通信。

Weex SDK

上面我们分析了大概的Weex架构，也简单介绍了一下运行起来的流程，接下来我们基于 Eros 的源码来详细看一下每一步是如何进行的，Eros 是基于Weex的二次封装，客户端运行的第一个部分就是初始化Weex的sdk。

初始化Weex sdk主要完成下面四个事情：

• 关键节点记录监控信息
• 初始化 SDK 环境，加载并运行 js framework
• 注册 Components、Modules、Handlers
• 如果是在开发环境初始化模拟器尝试连接本地 server