在微信小程式中有關頁面生命週期詳細解讀（詳細教學）

這篇文章主要為大家詳細介紹了微信小程式頁面生命週期的相關資料，具有一定的參考價值，有興趣的小夥伴們可以參考一下

微信小程式頁面生命週期介紹，具體如下

頁面生命週期函數

onLoad—-監聽頁面載入
onReady—-監聽頁面初次渲染完成
onShow—-監聽頁面顯示
onHide—-監聽頁面隱藏
onUnload—-監聽頁面卸載

Page({

 /**
  * 页面的初始数据
  */
 data: {
  banner_url:data.bannerList(),
  open:false
 },

 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
  console.log("==onLoad==");
 },

 /**
  * 生命周期函数--监听页面初次渲染完成
  */
 onReady: function () {
  console.log("==onReady==");
 },

 /**
  * 生命周期函数--监听页面显示
  */
 onShow: function () {
  console.log("==onShow==");
 },

 /**
  * 生命周期函数--监听页面隐藏
  */
 onHide: function () {
  console.log("==onHide==");
 },

 /**
  * 生命周期函数--监听页面卸载
  */
 onUnload: function () {
  console.log("==onUnload==");
 }
})

進入首頁觸發的函數

 

#進入與離開blog頁面的觸發函數

 

總結：

1. 在離開首頁進入詳情頁面的時候採用的是onHide函數—-只是將頁面隱藏，當我們回到首頁的時候直接用onShow顯示就好;
2. 在離開詳情頁面的時候採用的是onUnload函數—-此處是將頁面卸載，所以下次進入詳情頁面的時候，我們需要將頁面再次（載入—-顯示—-渲染）
3. 以上情況是在不設定open-type的情況，如果open-type=”redirect”，那麼在離開首頁的時候就會觸發onUnload，從而不能再返回首頁。

詳情參考:微信小程式組件的navigator

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

詳細解答JS操作剪貼簿

在 Angular中 使用Lodash方法具體該怎麼做？

vue-router專案實戰（詳細教學）

#

以上是在微信小程式中有關頁面生命週期詳細解讀（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！