面試官：說說微信小程序的生命周期函數有哪些？
本文轉載自微信公眾號「JS每日一題」，作者灰灰 。轉載本文請聯系JS每日一題公眾號。
一、是什么
跟vue、react框架一樣，微信小程序框架也存在生命周期，實質也是一堆會在特定時期執行的函數
小程序中，生命周期主要分成了三部分：
- 應用的生命周期
- 頁面的生命周期
- 組件的生命周期
應用的生命周期
小程序的生命周期函數是在app.js里面調用的，通過App(Object)函數用來注冊一個小程序，指定其小程序的生命周期回調
頁面的生命周期
頁面生命周期函數就是當你每進入/切換到一個新的頁面的時候，就會調用的生命周期函數，同樣通過App(Object)函數用來注冊一個頁面
組件的生命周期
組件的生命周期，指的是組件自身的一些函數，這些函數在特殊的時間點或遇到一些特殊的框架事件時被自動觸發，通過Component(Object)進行注冊組件
二、有哪些
應用的生命周期
| 生命周期 | 說明 |
|---|---|
| onLaunch | 小程序初始化完成時觸發，全局只觸發一次 |
| onShow | 小程序啟動，或從后臺進入前臺顯示時觸發 |
| onHide | 小程序從前臺進入后臺時觸發 |
| onError | 小程序發生腳本錯誤或 API 調用報錯時觸發 |
| onPageNotFound | 小程序要打開的頁面不存在時觸發 |
| onUnhandledRejection() | 小程序有未處理的 Promise 拒絕時觸發 |
| onThemeChange | 系統切換主題時觸發 |
頁面的生命周期
| 生命周期 | 說明 | 作用 |
|---|---|---|
| onLoad | 生命周期回調—監聽頁面加載 | 發送請求獲取數據 |
| onShow | 生命周期回調—監聽頁面顯示 | 請求數據 |
| onReady | 生命周期回調—監聽頁面初次渲染完成 | 獲取頁面元素（少用） |
| onHide | 生命周期回調—監聽頁面隱藏 | 終止任務，如定時器或者播放音樂 |
| onUnload | 生命周期回調—監聽頁面卸載 | 終止任務 |
組件的生命周期
| 生命周期 | 說明 |
|---|---|
| created | 生命周期回調—監聽頁面加載 |
| attached | 生命周期回調—監聽頁面顯示 |
| ready | 生命周期回調—監聽頁面初次渲染完成 |
| moved | 生命周期回調—監聽頁面隱藏 |
| detached | 生命周期回調—監聽頁面卸載 |
| error | 每當組件方法拋出錯誤時執行 |
注意的是：
- 組件實例剛剛被創建好時， created 生命周期被觸發，此時，組件數據 this.data 就是在 Component 構造器中定義的數據 data ， 此時不能調用 setData
- 在組件完全初始化完畢、進入頁面節點樹后， attached 生命周期被觸發。此時， this.data 已被初始化為組件的當前值。這個生命周期很有用，絕大多數初始化工作可以在這個時機進行
- 在組件離開頁面節點樹后， detached 生命周期被觸發。退出一個頁面時，如果組件還在頁面節點樹中，則 detached 會被觸發
還有一些特殊的生命周期，它們并非與組件有很強的關聯，但有時組件需要獲知，以便組件內部處理，這樣的生命周期稱為“組件所在頁面的生命周期”，在 pageLifetimes 定義段中定義，如下：
| 生命周期 | 說明 |
|---|---|
| show | 組件所在的頁面被展示時執行 |
| hide | 組件所在的頁面被隱藏時執行 |
代碼如下：
- Component({
- pageLifetimes: {
- show: function() {
- // 頁面被展示
- },
- hide: function() {
- // 頁面被隱藏
- },
- }
- })
三、執行過程
應?的?命周期執行過程：
- ?戶?次打開?程序，觸發 onLaunch(全局只觸發?次)
- ?程序初始化完成后，觸發onShow?法，監聽?程序顯示
- ?程序從前臺進?后臺，觸發 onHide?法
- ?程序從后臺進?前臺顯示，觸發 onShow?法
- ?程序后臺運??定時間，或系統資源占?過?，會被銷毀
???命周期的執行過程：
- ?程序注冊完成后，加載??，觸發onLoad?法
- ??載?后觸發onShow?法，顯示??
- ?次顯示??，會觸發onReady?法，渲染??元素和樣式，?個??只會調??次
- 當?程序后臺運?或跳轉到其他??時，觸發onHide?法
- 當?程序有后臺進?到前臺運?或重新進???時，觸發onShow?法
- 當使?重定向?法 wx.redirectTo() 或關閉當前?返回上??wx.navigateBack()，觸發onUnload
當存在也應用生命周期和頁面周期的時候，相關的執行順序如下：
- 打開小程序：(App)onLaunch --> (App)onShow --> (Pages)onLoad --> (Pages)onShow --> (pages)onRead
- 進入下一個頁面：(Pages)onHide --> (Next)onLoad --> (Next)onShow --> (Next)onReady
- 返回上一個頁面：(curr)onUnload --> (pre)onShow
- 離開小程序：(App)onHide
- 再次進入：小程序未銷毀 --> (App)onShow(執行上面的順序)，小程序被銷毀，(App)onLaunch重新開始執行.
參考文獻
https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html#onLaunch-Object-object
https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onLoad-Object-query
https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html#onLaunch-Object-object
