頁面刷新——微信小程序生命周期探索

在做項目時，需要對頁面進行刷新操作，由於官方文檔生命周期圖有點難懂，於是對微信小程序生命周期進行了探索，個人理解，不保證正確性：

分為三個部分：

1. 應用的生命周期。
2. 頁面的生命周期。
3. 應用的生命周期對頁面生命周期的影響。

1.應用的生命周期

即整個小程序的生命周期

 

 前台、后台定義： 當用戶點擊左上角關閉，或者按了設備 Home 鍵離開微信，小程序並沒有直接銷毀，而是進入了后台；當再次進入微信或再次打開小程序，又會從后台進入前台。

 

為方便理解我做了如下嘗試：

在app.js中寫下如下代碼：

打開一個頁面，顯示如圖：，

切后台：隱藏，

 

再回前台又如之前執行onLaunch和onShow；

 

因為小程序未出錯，則沒有執行onError；

 

2.頁面生命周期：

 

• 小程序注冊完成后，加載頁面，觸發 onLoad 方法。
• 頁面載入后觸發 onShow 方法，顯示頁面。
• 首次顯示頁面，會觸發 onReady 方法，渲染頁面元素和樣式，一個頁面只會調用一次。
• 當小程序后台運行或跳轉到其他頁面時，觸發 onHide 方法。
• 當小程序有后台進入到前台運行或重新進入頁面時，觸發 onShow 方法。
• 當使用重定向方法 wx.redirectTo(OBJECT) 或關閉當前頁返回上一頁 wx.navigateBack()，觸發 onUnload。

實驗代碼如圖：

 

 

進入一個頁面后：，

前端切后台或者其他頁面，顯示，

從后台切前台進入頁面：，

用wx.redirectTo進入一個頁面：

下面事件處理函數真機測試：

 

3.應用生命周期影響頁面生命周期

 看圖說話：

 

先加載小程序應用，再進行頁面相關操作，頁面隱藏后再執行應用隱藏。

 

有了以上實驗后，考慮：

onLoad 頁面加載的時候觸發，只觸發一次；從其他頁面回來時不會觸發。

onShow 頁面進來，只要返回該頁面就會加載；從二級頁面回來時會觸發的。

onReady只在初次加載頁面時觸發。

綜上，決定把要刷新的東西放在onShow進行，只要頁面重進就有刷新。

 

參考鏈接：https://www.jianshu.com/p/ee7c11d691c1