[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所示。 :-:  :-: 图3-1 渲染层和逻辑层通信模型 ### 2.1.4 数据驱动 在开发UI界面过程中，通常界面视图和变量状态是相关联的，可以通过`数据驱动`这种机制将状态和视图绑定在一起（状态变更时，视图也能自动变更），那我们就可以省去大量手动修改视图的工作。 小程序的WXML结构实际上等价于一棵Dom树，同时通过一个JS对象也可以来表达Dom树的结构，如图3-2所示。 :-:  :-: 图3-2 WXML结构和JS对象均可以表示一棵Dom树 WXML可以先转成JS对象，然后再渲染出真正的Dom树，回到前述的“Hello World”例子，我们可以看到转换的过程如图3-3所示。 :-:  :-: 图3-3 WXML结构转JS对象，再转Dom树 通过setData把msg数据从“Hello World”变成“Goodbye”，产生的JS对象对应的节点就会发生变化，此时可以对比前后两个JS对象得到变化的部分，然后把这个差异应用到原来的Dom树上，从而达到更新UI的目的，这就是`数据驱动`的原理，如图3-4所示。 :-:  :-: 图3-4 状态更新的时候，通过对比前后JS对象变化，进而改变视图层的Dom树 >[info] HY：小程序数据驱动要点 > 1. JS对象 > 2. DOM树 > 3. JS对象发生变化就会引起DOM树的变化 ### 2.1.5 双线程下的界面渲染 小程序的逻辑层和渲染层是分开的两个线程。 在渲染层，宿主环境会把WXML转化成对应的JS对象，在逻辑层发生数据变更的时候，我们需要通过宿主环境提供的`setData`方法把数据从逻辑层传递到渲染层，再经过对比前后差异，把差异应用在原来的Dom树上，渲染出正确的UI界面，如图3-5所示。 :-:  :-: 图3-5 逻辑层传递数据到渲染层