##1.1对比
#####跨平台特性
- Weex: write once, run anywhere ( 一次开发，随处运行)
- Cordova: write once, run anywhere ( 一次开发，随处运行)
- React-Native: Learn once, write anywhere ( 一次学习，随处开发)
#####性能
- Weex:较好
- Cordova:较弱
- React-Native:高
#####难度
- Weex:容易
- Cordova:容易
- React-Native:高
#####核心理念
- Weex:Vue
- Cordova:Cordova-plugin
- React-Native:React
#####功能支持
- Weex:Android，iOS，Web
- Cordova: 基本功能完全具备，对于底层，如摄像头之类的，需要插件。
- React-Native: Android，iOS
#####开发成本
- Weex/Cordova: 完全基于 html，css，js 。写一次代码，两个平台都适用。
- React-Native: 具有相同语法体系，但需要根据不同平台编写不同代码。
#####运行速度
- Cordova: 相对较慢
- Weex/React-Native: 跟 Native 基本相当
1. React Native更适合开发完整的App，因为它的性能较好，第三方插件丰富，社群活跃并且维护较好，文档完整等。
2. Weex更适合开发单页面集成。
3. Weex胜在容易上手，基于Vue的设计模式，也让前端能更无缝的实现一些高性能的App业务。
4. Weex兼容Android、IOS、Web三端，在单页面的实现上，它有着React Native无法比较的先天优势。
5. Weex的社群，个人觉得还是弱，资料不足，文档简单，第三方支持太弱。和React Native一样支持带原生功能的插件开发，但是，支持太少了，这也提高了后期的开发门槛。
##Weex原理
Weex的理念是write once run anywhere 也就是三端体验一致，让大家专注于业务需求。
由上文，我们也可以看出Weex的学习成本要低一些，使用同一套代码来构建 Android、iOS 和 Web 应用。具体来讲，在集成了 WeexSDK 之后，你可以使用 JavaScript 和现代流行的前端框架来开发移动应用
#####Weex架构
#####工作流
Weex we 文件 ————–前端(we源码)
↓ (转换) ——————前端(构建过程)
JS Bundle —————–前端(JS Bundle代码)
↓ (部署) ——————服务器
在服务器上的JS bundle —-服务器
↓ (编译) —————— 客户端(JS引擎)
虚拟 DOM 树 ————— 客户端(Weex JS Framework)
↓ (渲染) —————— 客户端(渲染引擎)
Native视图 ————— 客户端(渲染引擎)
Transformer（转换器): 一个Node JS工具， 转换Weex源码为JS Bundle 。
Weex JS Framework(JS框架): 运行于客户端的的JS框架，管理着Weex实例的运行。Weex实例由JS Bundle创建并构建起虚拟DOM树。另外，它发送/接受 Native 渲染层产生的系统调用，从而间接的响应用户交互。
Native引擎: 在不同的端上，有着不同的实现: [iOS]/[Android]/[HTML5]。 他们有着共同的组件设计, 模块API 和渲染效果.。所以他们能配合同样的 JS Framework 和 JS Bundle工作。
#####渲染流程
1、虚拟DOM.
2、构造树结构. 分析虚拟DOM JSON数据以构造渲染树(RT).
3、添加样式. 为渲染树的各个节点添加样式.
4、创建视图. 为渲染树各个节点创建Native视图.
5、绑定事件. 为Native视图绑定事件.
6、CSS布局. 使用 css-layout 来计算各个视图的布局.
7、更新视窗(Frame). 采用上一步的计算结果来更新视窗中各个视图的最终布局位置.
8、最终页面呈现.
网友评论