前言

在微信小程序開發(fā)中，關(guān)于微信小程序API的使用是必備技能，但是關(guān)于微信小程序的生命周期也是首先要了解和掌握的知識(shí)點(diǎn)。尤其是現(xiàn)在的前端開發(fā)領(lǐng)域，關(guān)于前端的各種框架和技術(shù)都要會(huì)，而且微信小程序的語法就是JS的翻版，掌握它不在話下。那么本篇博文特意來分享一下關(guān)于微信小程序的生命周期，因?yàn)殡m然大家平時(shí)開發(fā)都會(huì)涉及到微信小程序的使用，除了常用的幾個(gè)鉤子函數(shù)之外，其他的沒用過的就不去了解，這是不對(duì)的，為了方便后期查閱使用，總結(jié)記錄一下。

生命周期的概念

在講微信小程序生命周期之前，首先來看一下生命周期的概念。生命周期其實(shí)就是指一個(gè)對(duì)象的從產(chǎn)生到銷毀的過程，也就是生命周期是指程序從創(chuàng)建、開始、暫停、喚起、停止、銷毀、卸載的過程。

微信小程序生命周期

從嚴(yán)格意義上講，微信小程序的生命周期分為三個(gè)部分：應(yīng)用級(jí)生命周期、頁面級(jí)生命周期、組件的生命周期。

一、應(yīng)用級(jí)生命周期

微信小程序應(yīng)用級(jí)生命周期，其實(shí)就是整個(gè)微信小程序應(yīng)用(App)的生命周期。App() 函數(shù)是用來注冊(cè)一個(gè)小程序的，接收一個(gè)object參數(shù)，必須在app.js中調(diào)用，App() 必須調(diào)用且只能調(diào)用一次，app.js中定義了幾個(gè)應(yīng)用級(jí)的生命周期函數(shù)，具體如下所示：

• onLaunch: 初始化小程序完成時(shí)觸發(fā)，且全局只觸發(fā)一次；
• onShow: 小程序初始化完成（啟動(dòng)）或從后臺(tái)切換到前臺(tái)顯示時(shí)觸發(fā)；
• onHide: 小程序從前臺(tái)切換到后臺(tái)隱藏時(shí)觸發(fā)（如切換到其他app中）；
• onError: 小程序發(fā)生腳本錯(cuò)誤或者api調(diào)用失敗的時(shí)候，會(huì)觸發(fā) onError 并帶上錯(cuò)誤信息；
• onPageNotFound：小程序要打開的頁面不存在的時(shí)候觸發(fā)；
• onUnhandledRejection：小程序有未處理的 Promise 拒絕的時(shí)候觸發(fā)；
• onThemeChange：系統(tǒng)切換主題的時(shí)候觸發(fā)。

下面來看一下具體的幾個(gè)常用的應(yīng)用級(jí)生命周期函數(shù)的示例：

//app.js 文件
App({
onLaunch:function(){ // 監(jiān)聽小程序的初始化
console.log("onLaunch");
}，
onShow:function(){ // 監(jiān)聽小程序的顯示
console.log("onShow");
}，
onHide:function(){ // 監(jiān)聽小程序的隱藏
console.log("onHide");
}，
onError:function(message){ // 錯(cuò)誤監(jiān)聽的函數(shù)
console.log("onError"+ message);
}，
globalData: {
userInfo:null
}
})

注意：當(dāng)用戶點(diǎn)擊微信小程序左上角關(guān)閉，或按了手機(jī)home鍵離開微信，微信小程序并沒直接銷毀；當(dāng)用戶再次打開小程序或者再次進(jìn)入微信，那么小程序會(huì)從后臺(tái)進(jìn)入前臺(tái)而被喚醒。

二、頁面級(jí)生命周期

微信小程序頁面級(jí)生命周期，其實(shí)就是基于微信小程序頁面(page)的生命周期。在每一個(gè)頁面注冊(cè)函數(shù)Page()的參數(shù)里面，定義的幾個(gè)關(guān)于頁面生命周期函數(shù)，具體如下所示：

• onLoad：進(jìn)入頁面加載時(shí)觸發(fā)，且只執(zhí)行一次；
• onShow：頁面展示時(shí)候，也就是加載完成后、后臺(tái)切到前臺(tái)或重新進(jìn)入頁面時(shí)觸發(fā)，可以執(zhí)行多次；
• onReady：頁面首次渲染完成的時(shí)候觸發(fā)，且只執(zhí)行一次；
• onHide：頁面從前臺(tái)切到后臺(tái)或進(jìn)入其他頁面觸發(fā)；
• onUnload：頁面卸載時(shí)觸發(fā)；

下面來看一下具體的幾個(gè)常用的頁面級(jí)生命周期函數(shù)的示例：

//監(jiān)聽頁面加載
onLoad:function (){
console.log('onLoad")
}，
//監(jiān)聽頁面初次渲染完成
onReady:function() {
console.log('onReady')
}，
//監(jiān)聽頁面顯示
onShow:function () {
console.log('onShow')
}，
//監(jiān)聽頁面隱藏
onHide: function () {
console.log('onHide')
},
//監(jiān)聽頁面卸載
onUnload:function () {
console.log('onUnload')
}，

注意：當(dāng)切換頁面需要多次渲染數(shù)據(jù)改變狀態(tài)的時(shí)候，可以在onShow中使用；當(dāng)只需初始化一次的時(shí)候，可在onLoad或者onReady中使用；當(dāng)需要清除定時(shí)器時(shí)，可在onUnload中使用。

頁面生命周期執(zhí)行的順序是：onLoad --> onShow --> onReady --> onHide。

三、組件的生命周期

微信小程序組件的生命周期，其實(shí)就是基于微信小程序封裝的組件(component)的生命周期。在使用組件封裝的時(shí)候，定義的幾個(gè)關(guān)于組件生命周期函數(shù)，具體如下所示：

• created：組件實(shí)例剛剛被創(chuàng)建好的時(shí)候觸發(fā)；
• attached：當(dāng)組件完全初始化完畢、進(jìn)入頁面節(jié)點(diǎn)樹之后被觸發(fā)；
• ready：當(dāng)組件在視圖層布局完成之后被觸發(fā)；
• moved：在組件實(shí)例被移動(dòng)到節(jié)點(diǎn)樹另一個(gè)位置的時(shí)候被觸發(fā)；
• detached：在組件離開頁面節(jié)點(diǎn)樹之后被觸發(fā)；
• error：每當(dāng)組件方法中拋出錯(cuò)誤的時(shí)候被觸發(fā)。

注意：生命周期的方法可以直接定義在 Component 構(gòu)造器的第一級(jí)參數(shù)中。

四、小結(jié)

通過上文關(guān)于微信小程序生命周期的介紹，可以匯總以下幾個(gè)流程，結(jié)合程序運(yùn)行的生命周期先后執(zhí)行次序來總結(jié)，具體如下所示：

1、打開微信小程序的生命周期執(zhí)行次序

(App)onLaunch --> (App)onShow --> (Page)onLoad --> (Page)onShow --> (Page)onReady。

2、當(dāng)進(jìn)入下一個(gè)頁面的生命周期執(zhí)行次序

(當(dāng)前頁面)onHide --> (下一個(gè)頁面)onLoad --> (下一個(gè)頁面)onShow --> (下一個(gè)頁面)onReady。

3、當(dāng)返回上一個(gè)頁面的生命周期執(zhí)行次序

(當(dāng)前頁面)onUnload --> (上一個(gè)頁面)onShow。

4、當(dāng)離開小程序的生命周期執(zhí)行次序

(App)onHide。

5、當(dāng)再次進(jìn)入小程序的生命周期執(zhí)行次序

微信小程序未銷毀 --> (App)onShow --> (Page)onLoad --> (Page)onShow --> (Page)onReady；小程序被銷毀-->（App)onLaunch--> (App)onShow --> (Page)onLoad --> (Page)onShow --> (Page)onReady。

最后

通過本文關(guān)于前端開發(fā)中的微信小程序生命周期的詳細(xì)介紹，不管是在實(shí)際的前端開發(fā)工作中還是在前端求職面試中都是非常關(guān)鍵的知識(shí)點(diǎn)，所以作為前端開發(fā)者來說必須要掌握它相關(guān)的內(nèi)容，尤其是從事前端開發(fā)不久的開發(fā)者來說尤為重要，是一篇值得閱讀的文章，重要性就不在贅述。歡迎關(guān)注，一起交流，共同進(jìn)步。

到此這篇關(guān)于微信小程序開發(fā)中生命周期的詳細(xì)介紹的文章就介紹到這了,更多相關(guān)小程序生命周期內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論