Weex是跨平台,可扩展的动态化技术. 你能通过在Weex源码中写<template>
, <style>
和 <script>
标签,然后把这些标签转换为JS Bundle用于部署, 在服务端以这些JS Bundle响应请求. 当客户端接收到JS Bundle时,它能用被客户端中的JS引擎用于管理Native渲染;API调用和用户交互.
Weex we 文件 --------------前端(we源码) ↓ (转换) ------------------前端(构建过程) JS Bundle -----------------前端(JS Bundle代码) ↓ (部署) ------------------服务器 在服务器上的JS bundle ----服务器 ↓ (编译) ------------------ 客户端(JS引擎) 虚拟 DOM 树 --------------- 客户端(Weex JS Framework) ↓ (渲染) ------------------ 客户端(渲染引擎) Native视图 --------------- 客户端(渲染引擎)
在上面的工作流中,我们提到:
转换器转换Weex源码为JS Bundle. 整体工作可以分为三个部分:
<template>
为类JSON的树状数据结构, 转换数据绑定为返回数据的函数原型.例如. For example: <foo a="{% raw %}{{x}}{% endraw %}" b="1" />
将转换为 {type: "foo", attr: {a: function () {return this.x}, b: 1}}
.<style>
为类JSON的树状数据结构. 例如: .classname {name: value;}
将转换为 {classname: {name: value}}
.<script>
中的内容结合. 上面的三个部分将结合成一个JavaScript AMD 模块.一个完整的例子:
<template> <foo a="{{x}}" b="1" class="bar"></foo> </template> <style> .bar {width: 200; height: 200} </style> <script> module.exports = { data: function () { return {x: 100} } } </script>
将转换为:
define('@weex-component/main', function () { module.exports = { data: function () { return {x: 100} } } module.template = { type: "foo", attr: { a: function () {return this.x}, b: 1, classname: ['bar'] } } module.style = { bar: {width: 200, height: 200} } }) bootstrap('@weex-component/main')
除此之外,转换器还会做一些额外的事情: 合并Bundle ,添加引导函数,配置外部数据等等,更详细的,请参阅Synatax章节.
当前大部分Weex工具最终输出的JS Bundle格式都经过了Webpack的二次处理,所以你实际使用工具输出的JS Bundle会和上面的有所区别.
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 渲染引擎提供客户端组件和模块.
Component(组件) 在屏幕内可见,有特定行为. 能被配置不同的属性和样式,能响应用户交互. 常见的组件有: <div>
, <text>
, <image>
.
Module(模块) 是一组能被JS Framework调用的API. 其中的一些能以异步的方式调用JS Framework, 例如: 发送HTTP请求.
在Weex实例运行期间,Native渲染引擎将接收各种各样不同模块的API调用。这些调用创建或更新组件外观,运行如toast
的Native API.当用户交互或模块回调时,callJS()
会由JS Framework调用. 这样的循环往复将从Weex实例初始化到销毁一直持续. 如下面的架构图所示, HTML5渲染引擎提供和Native渲染引擎几乎一致的功能。
Weex架构图
[JS Framework] ↓ callNative 模块 APIs 渲染 -> 模块显示 其他功能 [Native 渲染引擎]
[Native 渲染引擎] 模块 APIs 回调 用户交互 ↓ callJS [JS Framework]
Weex 渲染流程
在Weex HTML5环境下 CSS 布局
and 更新视窗
由浏览器引擎(例如webkit)实现.