微信小程序的宿主环境（二）

微信小程序的宿主环境

小程序的运行环境分成渲染层和逻辑层，WXML和WXSS工作在渲染层，JS脚本工作在逻辑层。
渲染层和数据相关；逻辑层负责产生，处理数据；逻辑层通过Page实例的setData方法传递到渲染层。
小程序的渲染层和逻辑层分别由两个线程管理：渲染层的界面使用了WebView进行渲染；逻辑层采用JsCore线程运行JS脚本。
在渲染层，宿主环境会把WXML转化成对应的JS对象，在逻辑层发生数据变更的时候，需要通过宿主环境提供的setData方法把数据从逻辑层传递到渲染层，，在经过对比前后差异，把差异应用到原来的DOM树上，渲染出正确的UI界面。

小程序的声明周期

APP构造器的参数

###页面构造器Page()
宿主环境提供了Page（）构造器来注册一个小程序页面，Page（）在页面脚本page.js中调用；
onLoad/onRead/onShow/onHide/onUnload5个回调是Page实例的声明周期函数；

小程序把页面的打开路径定义成页面URL。其组成格式和网页的URL类似，在页面路径后使用英文 ？ 分隔path和query。query的多个参数部分使用&符号隔开。
当时开发中我们不用把data的所有数据都设置一遍，我们只需要把改动后的变值重新设置一遍。
需要保持一个原则可以投稿小程序的渲染性能：每次设置需要改变的最小单位数据；

需要注意一下几点：

小程序宿主环境限制了这个页面栈的最大层级为10层 ，也就是当页面栈到达10层之后就没有办法再推入新的页面了。

• 1.直接修改Page实例的this.data而不调用this.setData是无法改变页面的状态的，还会造成数据不一致。
• 2.由于setData是需要两个线程的一些通信消耗，为了提高性能，每次设置的数据不应超过1024KB；
• 3.不要把data中任意一项的value设为undefined，否则可能会引起一些不可预料的bug。

页面跳转和路由

• 1.wx.navigateTo({ url: ‘pageD’ }) 可以往当前页面栈多推入一个 pageD，此时页面栈变成 [ pageA, pageB, pageC, pageD ]。
• 2.wx.navigateBack() 可以退出当前页面栈的最顶上页面，此时页面栈变成 [ pageA, pageB, pageC ]。
• 3.wx.redirectTo({ url: ‘pageE’ }) 是替换当前页变成pageE，此时页面栈变成 [ pageA, pageB, pageE ]，当页面栈到达10层没法再新增的时候，往往就是使用redirectTo这个API进行页面跳转。
• 4.wx.navigateTo和wx.redirectTo只能打开非TabBar页面，wx.switchTab只能打开Tabbar页面；
• 5.wx. reLaunch({ url: ‘pageH’ }) 重启小程序，打开重启之前最上层的页面;
  

Tab切换对应的生命周期(以 A、B 页面为 Tabbar 页面，C 是从 A 页面打开的页面，D 页面是从 C 页面打开的页面为例)