合规国际互联网加速 OSASE为企业客户提供高速稳定SD-WAN国际加速解决方案。 广告
[TOC] ## 2.1 渲染层和逻辑层 小程序的运行环境分成`渲染层`和`逻辑层`, 小程序的渲染层和逻辑层分离是经过很多考虑得出来的模型。 WXML 模板和 WXSS 样式工作在渲染层,JS 脚本工作在逻辑层。 代码清单3-1 渲染“Hello World”WXML代码 ~~~HTML <view>{{ msg }}</view> ~~~ 在 JS 脚本使用 this.setData 方法把 msg 字段设置成 “Hello World” ,如代码清单3-2所示。 代码清单3-2 渲染“Hello World”JS脚本 ~~~JavaScript Page({ onLoad: function () { this.setData({ msg: 'Hello World' }) } }) ~~~ 从这个例子我们可以看到3个点: 1. `渲染层`(WXML、WXSS文件)和数据相关。即:怎样表现数据(`Show Data`)。 2. `逻辑层`(js文件)负责产生、处理数据。即:什么样的数据(`What Data`)。 3. `逻辑层`(js文件)通过 Page 实例的 setData 方法传递数据到渲染层。即:怎么传递数据(`Send Data`)。 ### 2.1.1 逻辑层--App Service 小程序开发框架的逻辑层由 JavaScript 编写。 逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。 在 JavaScript 的基础上,我们做了一些修改,以方便地开发小程序。 * 增加 `App` 和 `Page` 方法,进行程序和页面的注册。 * 增加 `getApp` 和 `getCurrentPages` 方法,分别用来获取 App 实例和当前页面栈。 * 提供丰富的 API,如微信用户数据,扫一扫,支付等微信特有能力。 * 每个页面有独立的作用域,并提供模块化能力。 * 由于框架并非运行在浏览器中,所以 JavaScript 在 web 中一些能力都无法使用,如 `document`,`window` 等。 * 开发者写的所有代码最终将会打包成一份 JavaScript,并在小程序启动的时候运行,直到小程序销毁。类似 `ServiceWorker`,所以逻辑层也称之为 `App Service`。 ### 2.1.2 渲染层/视图层--View 视图层 View 框架的视图层由 WXML 与 WXSS 编写,由组件来进行展示。将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。 WXML(WeiXin Markup language) 用于描述页面的结构。 WXS(WeiXin Script) 是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。 WXSS(WeiXin Style Sheet) 用于描述页面的样式。 组件(Component)是视图的基本组成单元。 #### 2.1.2.1 WXML WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。 WXML 具有的能力: 1. **数据绑定** 2. **列表渲染** 3. **条件渲染** 4. **模板** 5. **事件** 6. **引用** #### 2.1.2.2 WXS WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。 WXS可进行: 1. **页面渲染** 2. **数据处理** #### 2.1.2.3 WXSS WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。 WXSS 用来决定 WXML 的组件应该怎么显示。 为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。 #### 2.1.2.4 组件 框架为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。 ### 2.1.3 通信模型 小程序的渲染层和逻辑层分别由2个线程管理: - 渲染层的界面使用了`WebView` 进行渲染; - 逻辑层采用`JsCore`线程运行JS脚本。 一个小程序存在多个界面,所以渲染层存在多个WebView线程,这两个线程的通信会经由微信客户端(下文中也会采用`Native`来代指微信客户端)做中转,逻辑层发送网络请求也经由Native转发,小程序的通信模型如图3-1所示。 :-: ![渲染层和逻辑层通信模型](https://box.kancloud.cn/f00168d7cf256cd70176df67fcb67802_754x557.png) :-: 图3-1 渲染层和逻辑层通信模型 ### 2.1.4 数据驱动 在开发UI界面过程中,通常界面视图和变量状态是相关联的,可以通过`数据驱动`这种机制将状态和视图绑定在一起(状态变更时,视图也能自动变更),那我们就可以省去大量手动修改视图的工作。 小程序的WXML结构实际上等价于一棵Dom树,同时通过一个JS对象也可以来表达Dom树的结构,如图3-2所示。 :-: ![WXML结构和JS对象均可以表示一棵Dom树](https://box.kancloud.cn/47efe6ea91cdde04130707ba2f3ab6f9_821x532.png) :-: 图3-2 WXML结构和JS对象均可以表示一棵Dom树 WXML可以先转成JS对象,然后再渲染出真正的Dom树,回到前述的“Hello World”例子,我们可以看到转换的过程如图3-3所示。 :-: ![WXML结构转JS对象,再转Dom树](https://box.kancloud.cn/9fda5885d8c6a4a4d7e0c734543d756e_803x246.png) :-: 图3-3 WXML结构转JS对象,再转Dom树 通过setData把msg数据从“Hello World”变成“Goodbye”,产生的JS对象对应的节点就会发生变化,此时可以对比前后两个JS对象得到变化的部分,然后把这个差异应用到原来的Dom树上,从而达到更新UI的目的,这就是`数据驱动`的原理,如图3-4所示。 :-: ![状态更新的时候,通过对比前后JS对象变化,进而改变视图层的Dom树](https://box.kancloud.cn/6ca32a858f56d2737a40e3fbbd70c676_498x523.png) :-: 图3-4 状态更新的时候,通过对比前后JS对象变化,进而改变视图层的Dom树 >[info] HY:小程序数据驱动要点 > 1. JS对象 > 2. DOM树 > 3. JS对象发生变化就会引起DOM树的变化 ### 2.1.5 双线程下的界面渲染 小程序的逻辑层和渲染层是分开的两个线程。 在渲染层,宿主环境会把WXML转化成对应的JS对象,在逻辑层发生数据变更的时候,我们需要通过宿主环境提供的`setData`方法把数据从逻辑层传递到渲染层,再经过对比前后差异,把差异应用在原来的Dom树上,渲染出正确的UI界面,如图3-5所示。 :-: ![逻辑层传递数据到渲染层](https://box.kancloud.cn/7ea00593aa14eb90bf8fa0e1be05da34_751x524.png) :-: 图3-5 逻辑层传递数据到渲染层