一共分為四個(gè)部分
- 應(yīng)用生命周期
- 頁(yè)面生命周期
- 組件生命周期
- 應(yīng)用頁(yè)面組件執(zhí)行順序
應(yīng)用生命周期(App(Object object))
- onLaunch: 初始化小程序時(shí)觸發(fā)瘾敢，全局只觸發(fā)一次匕累。
- onShow: 小程序初始化完成或用戶(hù)從后臺(tái)切換到前臺(tái)顯示時(shí)觸發(fā)
- onHide: 用戶(hù)從前臺(tái)切換到后臺(tái)隱藏時(shí)觸發(fā)沃于。
- onError: 小程序發(fā)生腳本錯(cuò)誤，或者 api 調(diào)用失敗時(shí)笤喳，會(huì)觸發(fā) onError 并帶上錯(cuò)誤信息。
初始化小程序：首次打開(kāi)小程序敬扛。
后臺(tái)： 點(diǎn)擊左上角關(guān)閉粥诫，或者按了設(shè)備 Home 鍵離開(kāi)微信，并沒(méi)有直接銷(xiāo)毀蔑水，而是進(jìn)入后臺(tái)悄泥。
前臺(tái)：再次進(jìn)入微信或再次打開(kāi)小程序，相當(dāng)于從后臺(tái)進(jìn)入前臺(tái)肤粱。
App({
onLaunch (options) {
// Do something initial when launch.
},
onShow (options) {
// Do something when show.
},
onHide () {
// Do something when hide.
},
onError (msg) {
console.log(msg)
},
globalData: 'I am global data'
})
頁(yè)面生命周期(Page(Object object))
- onLoad：首次進(jìn)入當(dāng)前頁(yè)面時(shí)觸發(fā)弹囚，可以在 onLoad 的參數(shù)中獲取打開(kāi)當(dāng)前頁(yè)面路徑中的參數(shù)，一個(gè)頁(yè)面只調(diào)用一次领曼。
- onShow：頁(yè)面顯示加載完成后鸥鹉，后臺(tái)切到前臺(tái)或重新進(jìn)入頁(yè)面時(shí)觸發(fā)。
- onReady：頁(yè)面首次渲染完成時(shí)觸發(fā)庶骄，代表頁(yè)面已經(jīng)準(zhǔn)備妥當(dāng)毁渗，可以和視圖層進(jìn)行交互，一個(gè)頁(yè)面只調(diào)用一次单刁。
- onHide：從前臺(tái)切到后臺(tái)或進(jìn)入其他頁(yè)面觸發(fā)灸异。
- onUnload：頁(yè)面卸載時(shí)觸發(fā)。
頁(yè)面加載順序：加載順序是先加載onLoad，再是onShow肺樟，最后onReady檐春。
頁(yè)面卸載：頁(yè)面是堆棧的方式引入，當(dāng)前頁(yè)面返回上一級(jí)頁(yè)面的時(shí)候么伯，當(dāng)前頁(yè)面卸載疟暖。適用于返回彈窗
點(diǎn)擊查看官方文檔參考
//index.js
Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// Do some initialize when page load.
},
onShow: function() {
// Do something when page show.
},
onReady: function() {
// Do something when page ready.
},
onHide: function() {
// Do something when page hide.
},
onUnload: function() {
// Do something when page close.
}
})
組件生命周期(Component(Object object))
自小程序基礎(chǔ)庫(kù)版本 2.2.3 起，組件的的生命周期也可以在 lifetimes 字段內(nèi)進(jìn)行聲明（這是推薦的方式田柔，其優(yōu)先級(jí)最高）
- created：在組件實(shí)例剛剛被創(chuàng)建時(shí)執(zhí)行俐巴。
- attached：在組件實(shí)例進(jìn)入頁(yè)面節(jié)點(diǎn)樹(shù)時(shí)執(zhí)行。
- ready：在組件在視圖層布局完成后執(zhí)行硬爆。
- moved：在組件實(shí)例被移動(dòng)到節(jié)點(diǎn)樹(shù)另一個(gè)位置時(shí)執(zhí)行欣舵。
- detached：在組件實(shí)例被從頁(yè)面節(jié)點(diǎn)樹(shù)移除時(shí)執(zhí)行。
- error：每當(dāng)組件方法拋出錯(cuò)誤時(shí)執(zhí)行缀磕，待一個(gè)參數(shù)返回報(bào)錯(cuò)問(wèn)題
組件創(chuàng)建時(shí)間：看總結(jié)小程序生命周期整體執(zhí)行順序
組件進(jìn)入頁(yè)面節(jié)點(diǎn)執(zhí)行時(shí)間：看總結(jié)小程序生命周期整體執(zhí)行順序
組件在視圖層布局完成順序：看總結(jié)小程序生命周期整體執(zhí)行順序
Component({
lifetimes: {
attached: function() {
// 在組件實(shí)例進(jìn)入頁(yè)面節(jié)點(diǎn)樹(shù)時(shí)執(zhí)行
},
detached: function() {
// 在組件實(shí)例被從頁(yè)面節(jié)點(diǎn)樹(shù)移除時(shí)執(zhí)行
},
},
// 以下是舊式的定義方式邻遏，可以保持對(duì) <2.2.3 版本基礎(chǔ)庫(kù)的兼容
attached: function() {
// 在組件實(shí)例進(jìn)入頁(yè)面節(jié)點(diǎn)樹(shù)時(shí)執(zhí)行
},
detached: function() {
// 在組件實(shí)例被從頁(yè)面節(jié)點(diǎn)樹(shù)移除時(shí)執(zhí)行
},
// ...
})
組件所在頁(yè)面的生命周期
- show：組件所在的頁(yè)面被展示時(shí)執(zhí)行。
- hide：組件所在的頁(yè)面被隱藏時(shí)執(zhí)行虐骑。
- resize：組件所在的頁(yè)面尺寸變化時(shí)執(zhí)行准验，返回一個(gè)參數(shù)。
Component({
pageLifetimes: {
show: function() {
// 頁(yè)面被展示
},
hide: function() {
// 頁(yè)面被隱藏
},
resize: function(size) {
// 頁(yè)面尺寸變化
}
}
})
應(yīng)用頁(yè)面組件執(zhí)行順序
如果一個(gè)小程序首頁(yè)中廷没，同時(shí)有一個(gè)組件糊饱，可以猜測(cè)下他們的相應(yīng)生命周期的執(zhí)行順序〉呃瑁可以看下附件另锋，理解下當(dāng)你打開(kāi)一個(gè)小程序，你設(shè)定在各個(gè)生命周期的事件是什么時(shí)候運(yùn)行的狭归，方便解決BUG夭坪。
涉及執(zhí)行順序的小程序生命周期：
以下例子中
App：
- onLaunch
- onShow
- onHide
- onLoad
- onShow
- onReady
- onHide
- onUnload
- created
- attached
- ready
- moved
- detached
加載順序可以看官方的生命周期
- 首先執(zhí)行
App.onLaunch>App.onShow - 其次執(zhí)行
Component.created>Component.attached - 再執(zhí)行
Page.onLoad>Page.onShow - 最后 執(zhí)行
Component.ready>Page.onReady
詳細(xì)過(guò)程參考文檔：你不知道的小程序系列之生命周期執(zhí)行順序
附件：
小程序啟動(dòng)流程
生命周期
執(zhí)行順序
