Weex 前端框架介绍

最新推荐文章于 2024-08-12 00:44:54 发布

mengzuixilou

最新推荐文章于 2024-08-12 00:44:54 发布

阅读量5k

点赞数

分类专栏： weex 文章标签：前端框架 Weex

本文链接：https://blog.csdn.net/mengzuixilou/article/details/52688963

版权

weex 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前言：

一个月前曾经就开撸Weex，也没写博客，中间因为某些事情耽搁了。直到前几天重新拾起来，居然有一种不认识的感觉。故而，录下此篇。

什么是Weex

阿里天施曾经这样说过，从技术的发展趋势来看，前端技术扩展到Native端这个领域很大。 React Native和Weex，都是想把这个领域按照自身的理解做的更好。

我们从中可以知道Weex是前端技术扩展到Native端的一个方案，当然还有另外一个很著名的方案就是Facebook的React Native。关于ReactNative，大家可以看一下我的这篇文章[Android React Native植入原生应用小记]

(http://blog.csdn.net/mengzuixilou/article/details/50997825)。

Weex的理念是write once run anywhere 也就是三端体验一致，让大家专注于业务，写一份代码 iOS、Android、 H5都能够适用。当然也有为企业节省开发成本的考虑。所以Weex技术方案的关键在于要拥有一个强大的解析渲染引擎。
weex&ReactNative对比这篇文章很好的为我们解释了Weex所采用的技术架构方案：JS引擎用V8，JS开发框架基于vue.js。由上文，我们也可以看出Weex的学习成本要低一些，当然实践中也是如此。

Weex的架构分析

Weex架构图
Weex是跨平台，可扩展的动态化技术. 你能通过在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工作。

JS Framework

JS Framework在初始化阶段被原生JavaScript引擎运行. 它提供被每个JS Bundle调用的 define() 和 bootstrap() 函数. 一旦JS Bundle从服务器下载后，这些函数就会执行. define() 函数以注册模块;bootstrap()会编译主要的模块为虚拟DOM，并发送渲染指令给Native .

JS 和 Native 的沟通主要通过两个关键方法进行:

callNative 是一个由native代码实现的函数, 它被JS代码调用并向native发送指令,例如 rendering, networking, authorizing和其他客户端侧的 toast 等API.
callJS 是一个由JS实现的函数, 它用于Native向JS发送指令. 目前这些指令由用户交互和Native的回调函数组成.

Native 渲染引擎

Native 渲染引擎提供客户端组件和模块.

Component(组件) 在屏幕内可见，有特定行为. 能被配置不同的属性和样式,能响应用户交互. 常见的组件有:

, , .

Module(模块) 是一组能被JS Framework调用的API. 其中的一些能以异步的方式调用JS Framework, 例如: 发送HTTP请求.

在Weex实例运行期间,Native渲染引擎将接收各种各样不同模块的API调用。这些调用创建或更新组件外观，运行如toast的Native API.当用户交互或模块回调时，callJS()会由JS Framework调用. 这样的循环往复将从Weex实例初始化到销毁一直持续. 如下面的架构图所示, HTML5渲染引擎提供和Native渲染引擎几乎一致的功能。

渲染流程

render flow
渲染流程

1、虚拟DOM.
2、构造树结构. 分析虚拟DOM JSON数据以构造渲染树(RT).
3、添加样式. 为渲染树的各个节点添加样式.
4、创建视图. 为渲染树各个节点创建Native视图.
5、绑定事件. 为Native视图绑定事件.
6、CSS布局. 使用 css-layout 来计算各个视图的布局.
7、更新视窗(Frame). 采用上一步的计算结果来更新视窗中各个视图的最终布局位置.
8、最终页面呈现.

学习Weex的几个网站：

https://github.com/alibaba/weex/tree/master/examples

http://alibaba.github.io/weex/doc/tutorial.html

http://weex.help/

https://github.com/alibaba/weex/tree/master/examples