Weex跨平台前端实现原理

以前用的多的技术定义webview,通过webview和native进行交互，实现跨平台。后续出现phonegap/cordova等。但其效果依旧有所欠缺。所以近期出现大量使用RN和Weex方案为了解决跨平台浏览器不流畅的问题。

像web实现，是基于浏览器进行渲染。流畅度不高。换个思路，把前端映射成native组件，就流畅多了。来看一下Weex如何实现。

                                                                      使用.we架构

                                                                               当前vue file架构

1、weex file，weex定义的一种文件格式.we,目前好像使用vue.js框架进行构建居多。通过.vue的形式构建基于 <template>, <style>, <script> 的web。Virtual-DOM 和预编译器的设计使得该框架可以脱离HTML\CSS解析，仅仅依赖JS

2、通过transformer工具将.vue内容转换成JS Bundle,并将其部署在Server上

3、以JS的方式下发JS Bundle

4、终端Weex的JS Framework 内部进行数据绑定和树形结构转换等相关指令通过JSCore输出JSON 格式的 Virtual DOM

5、JS-Native Bridge将需要Native支持渲染的指令分发到Native引擎，其提供了callJs和callNative的双向通信的方式进行数据处理

6、native实现渲染