微信小程序学习总结
3.1 渲染层和逻辑层
小程序的运行环境分成渲染层和逻辑层,WXML 模板和 WXSS 样式工作在渲染层,JS 脚本工作在逻辑层。
3.1.1 渲染“Hello World”页面
WXML模板使用 view 标签,其子节点用 { { }} 的语法绑定一个 msg 的变量:
<view>{
{
msg }}</view>
在 JS 脚本使用 this.setData 方法把 msg 字段设置成 “Hello World” :
Page({
onLoad: function () {
this.setData({
msg: 'Hello World' })
}
})
- 渲染层和数据相关。
- 逻辑层负责产生、处理数据。
- 逻辑层通过 Page 实例的 setData 方法传递数据到渲染层。
3.1.2 通信模型
小程序的渲染层和逻辑层分别由2个线程管理。一个小程序存在多个界面,所以渲染层存在多个WebView线程,这两个线程的通信会经由微信客户端(下文中也会采用Native来代指微信客户端)做中转,逻辑层发送网络请求也经由Native转发。
3.1.3 数据驱动
可以让状态和视图绑定在一起(状态变更时,视图也能自动变更),则可以省去手动修改视图的工作
3.1.4 双线程下的界面渲染
小程序的逻辑层和渲染层是分开的两个线程。在渲染层,宿主环境会把WXML转化成对应的JS对象,在逻辑层发生数据变更的时候,我们需要通过宿主环境提供的setData方法把数据从逻辑层传递到渲染层,再经过对比前后差异,把差异应用在原来的Dom树上,渲染出正确的UI界面
3.2 程序与页面
从逻辑组成来说,一个小程序是由多个“页面”组成的“程序”
3.2.1 程序
“小程序”指的是产品层面的程序,而“程序”指的是代码层面的程序实例,为了避免误解,下文采用App来代替代码层面的“程序”概念。
1.程序构造器App()
宿主环境提供了 App() 构造器用来注册一个程序App,需要留意的是App() 构造器必须写在项目根目录的app.js里,App实例是单例对象,在其他JS脚本中可以使用宿主环境提供的 getApp() 来获取程序实例。
getApp() 获取App实例
// other.js
var appInstance = getApp()
App构造器:
App({
onLaunch: function(options) {
},
onShow: function(options) {
},
onHide: function() {
},
onError: function(msg) {
},
globalData: 'I am global data'
})
App构造器接受一个Object参数,参数说明见下表,其中onLaunch / onShow / onHide 三个回调是App实例的生命周期函数.
参数属性 | 类型 | 描述 |
---|---|---|
onLaunch | Function | 当小程序初始化完成时,会触发 onLaunch(全局只触发一次) |
onShow | Function | 当小程序启动,或从后台进入前台显示,会触发 onShow |
onHide | Function | 当小程序从前台进入后台,会触发 onHide |
onError | Function | 当小程序发生脚本错误,或者 API 调用失败时,会触发 onError 并带上错误信息 |
其他字段 | 任意 | 可以添加任意的函数或数据到 Object 参数中,在App实例回调用 this 可以访问 |
2. 程序的生命周期和打开场景
初次进入小程序时,微信客户端初始化宿主环境,同时从网络下载或者从本地缓存中拿到小程序的代码包,将其注入到宿主环境;初始化后,微信客户端给App实例派发onLaunch事件,App构造器参数定义的onLaunch方法被调用。
进入小程序后,点击右上角的关闭,或者按Home键离开小程序,此时小程序并没有被销毁,称这种情况为“小程序进入后台状态”,App构造器参数定义的onHide方法会被调用。
当再次回到微信或者再次打开小程序时,微信客户端会把“后台”的小程序唤醒,称这种情况为“小程序进入前台状态”,App构造器参数定义的onShow方法会被调用。
App的生命周期是由微信客户端根据用户操作主动触发的
onLaunch和onShow带参数
App({
onLaunch: function(options) {
console.log(options) },
onShow: function(options) {
console.log(options) }
})
具体参数类型及其描述见文档
3. 小程序全局数据
小程序的JS脚本是运行在JsCore的线程里,小程序的每个页面各自有一个WebView线程进行渲染,所以小程序切换页面时,小程序逻辑层的JS脚本运行上下文依旧在同一个JsCore线程中。
不同页面直接可以通过App实例下的属性来共享数据。App构造器可以传递其他参数作为全局属性以达到全局共享数据的目的。
小程序全局共享数据:
// app.js
App({
globalData: 'I am global data' // 全局共享数据