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