weex开发实践

##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、最终页面呈现.