微信小程序页面生命周期

• onLoad(Object query)

  页面加载时触发。一个页面只会调用一次，能够在 onLoad 的参数中获取打开当前页面路径中的参数。
  能够获取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。

  //url wxml页面
  <button bindtap='clickme'>点击跳转到生命周期页</button>
  
  //url页面点击按钮跳转(js）
  clickme:function(){
      wx.navigateTo({
        url:'../lifeperiod/lifeperiod?id=10086'
      })
    }
  
  //lifeperiod页面获取当前页面参数(js）
  onLoad: function (option) {
      console.log(option.id)
    },

• onShow

  页面显示/切入前台时触发。

//wxml
<text>{{showme}}</text>
//js
onReady: function () {
    console.log("onReady-test")
    this.setData({
      showme: "loveweiwei"
    })
},
onShow: function () {
    console.log("onShow-test");
    this.setData({
      showme: "loveme"
    })
}

猜猜显示loveme仍是loveweiwei?

onShow监听页面显示比onReady函数监听页面初次渲染完成先调用

• onReady

  页面初次渲染完成时触发。一个页面只会调用一次，表明页面已经准备稳当，能够和视图层进行交互。

• onHide

  页面隐藏/切入后台时触发。 如 navigateTo 或底部 tab 切换到其余页面，小程序切入后台等。
  从url页面跳转到lifeperiod页面，会触发url页面的onHide。

• onUnload

  页面卸载时触发。如redirectTo或navigateBack到其余页面时。
  从lifeperiod页面返回url页面，会触发lifeperiod页面的onUnload。

---

注意：返回url页面时显示loveme,是由于onReady为监听页面初次渲染完成触发

---

---

路由方式	触发时机	路由前页面	路由后页面
初始化	小程序打开的第一个页面		onLoad, onShow
打开新页面	调用 API wx.navigateTo 或使用组件 <navigator open-type="navigateTo"/>	onHide	onLoad, onShow
页面重定向	调用 API wx.redirectTo 或使用组件 <navigator open-type="redirectTo"/>	onUnload	onLoad, onShow
页面返回	调用 API wx.navigateBack 或使用组件<navigator open-type="navigateBack">或用户按左上角返回按钮	onUnload	onShow
重启动	调用 API wx.reLaunch 或使用组件 <navigator open-type="reLaunch"/>	onUnload	onLoad, onShow