每日讯息!Weex原理及架构剖析

早期H5和Hybrid方案的本质是，利用客户端App的内置浏览器（也就是webview）功能，通过开发前端的H5页面满足跨平台需求。比如PhoneGap cordova ionic ……

该方案提升开发效率，同时也满足了跨端的需求。但有一个问题就是，前端H5的性能和客户端的性能相差甚远。Facebook 推出ReactNative

关于RN，安利下《ReactJS到React-Native，架构原理概述》

(资料图片仅供参考)

Weex与ReactNative 都是基于Yogo渲染骨架做的 跨端框架，一个基于React，一个基于Vue，个人偏好RN，但是Weex 貌似更香。

相对于ReactNative的“learn once write anywhere”，weex的: “write once run anywhere”，牛皮更宽广

关于Weex的使用，还是看官方文档好：https://weex.apache.org/zh/guide/introduction.html

Weex的源文件(最新的Weex版本支持的是Vue文件)，如果想用React， 也可以用Rax(兼容React接口), 甚至如果可能，可以支持更多的前端框架。因为根据Weex设计前端框架仅仅是语法层(或者叫DSL)， 它与原生渲染引擎是分离的。当然自己扩展支持另一套前端框架也比较麻烦，需要做不少工作。

Weex架构分析

js的执行环境

在初始化阶段, WEEX SDK 会准备好一个js的执行环境。因为我们是要在客户端跑js 代码的，所以需要一个js执行环境，这个执行环境类似于浏览器的v8 引擎， 在IOS 上，则是客户端自带的 js core。

这个js执行环境，可以看成是一个在客户端上的沙盒，或者是一个虚拟机。

为了提升性能，js 执行环境只用在初始化的时候初始化一次，之后每个页面都无须再初始化了。也就是说不管客户端打开多少个weex页面，多个页面的 JS 都是跑在同一个js执行环境中的。

weex-vue-famework 框架

weex-vue-framework 框架 是什么呢？

你可以把 weex-vue-framework 框架当成被改造的Vue.js。语法和内部机制都是一样的，只不过Vue.js最终创建的是 DOM 元素，而weex-vue-framework则是向原生端发送渲染指令，最终渲染生成的是原生组件。

同时，Weex为了提高Native的极致性能，做了很多优化的工作。前端优化性能时，会把业务代码和 vue.js 这类的依赖包分开打包，一个份是业务代码，一份是打包的框架依赖。

weex 把weex-vue-framework 这类框架依赖内置到了SDK中，客户端访问Weex页面时，只会网络请求JS Bundle。由于JSFramework在本地，所以就减少了JS Bundle的体积，每个JS Bundle都可以减少一部分体积，从而提升了性能。

WXBridge 通信

WXBridge 是 weex 实现的一种 js 和 客户端通信的机制。

js 执行环境和客户端是隔离的，为了和外界客户端的世界通信，需要有一个通信的桥梁。weex 实现了 WXBrigde, 主要通过 callJS 和 callNative 两个核心的方法，实现 js 代码和客户端代码双向通信。

在完成了上面的初始化之后，weex已经做好了准备，只等着下载 JS bundle 就可开始渲染页面了。

Weex工作原理分析

weex 能让一套代码能做成 native 级别的app，主要是做了三件事：

• 在本地用一个叫做 transformer 的工具把这套代码转成纯 JavaScript 代码

• 在客户端运行一个 JavaScript 引擎，随时接收 JavaScript 代码

• 在客户端设计一套 JS Bridge，让 native 代码可以和 JavaScript 引擎相互通信

Weex源码转换成JS Bundle

整体工作可以分为三个部分

1、转换