微信小程序中的渲染层和逻辑层是怎样运行的？

小程序的运行环境分成渲染层和逻辑层， WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。小程序的渲染层和逻辑层分离是经过很多考虑得出来的模型.我们会先介绍这个模型的基本工作方式。

---

1 渲染“Hello World”页面

我们看看小程序是如何把脚本里边的数据渲染在界面上的。
WXML模板使用 view 标签，其子节点用 { { }} 的语法绑定一个 msg 的变量，如代码清单3-1所示。
代码清单3-1 渲染“Hello World”WXML代码

<view>{
  { msg }}</view>

在 JS 脚本使用 this.setData 方法把 msg 字段设置成 “Hello World” ，如代码清单3-2所示。
代码清单3-2 渲染“Hello World”JS脚本

Page({
  onLoad: function () {
    this.setData({ msg: 'Hello World' })
  }
})

从这个例子我们可以看到3个点：

1. 渲染层和数据相关。
2. 逻辑层负责产生、处理数据。
3. 逻辑层通过 Page 实例的 setData 方法传递数据到渲染层。

关于第1点，涉及了“数据驱动”的概念，我们会在3节详细讨论，我们现在先看看第3点涉及的“通信模型”。

---

2 通信模型

小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。一个小