微信小程序学习笔记

从点开到显示的过程

点开微信小程序的一瞬间，微信客户端做了些什么

1. 点开微信小程序；
2. 初始化宿主环境，加载小程序代码包，如果本地有缓存就用缓存，如果没有缓存就执行网络下载；
3. 给APP实例派发onLaunch事件，App构造器参数所定义的onLaunch方法被调用
4. 进入微信小程序执行后续的页面逻辑

生命周期的触发条件

app的生命周期

App的生命周期是由用户操作主动触发的，开发者不能在代码里主动调用。只能使用回调函数做触发功能，回调函数必须定义在app.js的App()中。

示例代码

App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

主要的几个生命周期函数

onLaunch(Object object)

小程序初始化完成时触发，全局只触发一次。参数也可以使用 wx.getLaunchOptionsSync 获取。

onShow(Object object)

小程序启动，或从后台进入前台显示时触发。也可以使用 wx.onAppShow 绑定监听。

onHide()

小程序从前台进入后台时触发。也可以使用 wx.onAppHide 绑定监听。

onError(String error)

小程序发生脚本错误或 API 调用报错时触发。也可以使用 wx.onError 绑定监听。

App的两种状态

• 后台状态：用户点击小程序右上角关闭按钮，或手机的home 键时，会离开小程序，但小程序并不会被销毁，而是进入后台状态。此时，APP构造器参数里的onHide 方法会被调用。
• 前台状态：用户再次小程序时，微信用户端会唤醒后台状态的微信小程序，微信小程序就进入了前台状态，onShow 方法会被调用。

页面的生命周期

页面的生命周期首先要考虑三个事件：

1. 页面初次加载时：onLoad，在页面没被销毁之前只会触发1次。
2. 页面显示时：onShow ，从别的页面返回到当前页面时，都会被调用。
3. 页面初次渲染完成时：onReady，在页面没被销毁前只会触发1次，在逻辑层可以和视图层进行交互。

页面显示后，随着用户的操作，还会触发其它的事件：

• 页面不可见时：onHide，wx.navigateTo切换到其他页面、底部tab切换时触发。
• 返回到其它页时：onUnload，wx.redirectTo或wx.navigateBack使当前页面会被微信客户端销毁回收时触发。

页面生命周期图

页面生命周期