微信小程序頁面生命週期

• 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