微信小程序：生命周期

从三个方面来介绍小程序的生命周期

• 应用生命周期
• 页面生命周期
• 应用以及页面生命周期的触发顺序

1.应用生命周期

App() 必须在 app.js 中调用，必须调用且只能调用一次，app.js中定义了一些应用的生命周期函数

1. onLaunch: 初始化小程序时触发，全局只触发一次
2. onShow: 小程序初始化完成或用户从后台切换到前台显示时触发
3. onHide: 用户从前台切换到后台隐藏时触发
4. onError: 小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息

后台： 点击左上角关闭，或者按了设备 Home 键离开微信，并没有直接销毁，而是进入后台
前台：再次进入微信或再次打开小程序，相当于从后台进入前台。

2.页面生命周期

1. onLoad：首次进入页面加载时触发，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
2. onShow：加载完成后、后台切到前台或重新进入页面时触发
3. onReady：页面首次渲染完成时触发
4. onHide：从前台切到后台或进入其他页面触发
5. onUnload：页面卸载时触发

 

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // Do some initialize when page load.
  },
  onShow: function() {
    // Do something when page show.
  },
  onReady: function() {
    // Do something when page ready.
  },
  onHide: function() {
    // Do something when page hide.
  },
  onUnload: function() {
    // Do something when page close.
  },
  onPullDownRefresh: function() {
    // Do something when pull down.
  },
  onReachBottom: function() {
    // Do something when page reach bottom.
  },
  onShareAppMessage: function () {
    // return custom share data when user share.
  },
  onPageScroll: function() {
    // Do something when page scroll
  },
  onResize: function() {
    // Do something when page resize
  },
  onTabItemTap(item) {
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  customData: {
    hi: 'MINA'
  }
})

 

3.应用与页面生命周期触发顺序

1. 首次进入小程序会先触发应用生命周期中onLaunch方法和onShow方法，其次触发页面生命周期中onLoad、onShow和onReady方法。
2. 前台切换到后台时，先触发页面生命周期中onHide方法，再触发应用生命周期的onHide方法。
3. 后台切换到前台时，先触发应用生命周期中onShow方法，再触发页面生命周期的onShow方法