前言

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

生命周期的概念

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

微信小程序生命周期

從嚴格意義上講，微信小程序的生命周期分為三個部分：應用級生命周期、頁面級生命周期、組件的生命周期。

一、應用級生命周期

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

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

下面來看一下具體的幾個常用的應用級生命周期函數的示例：

//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){ // 錯誤監(jiān)聽的函數
console.log("onError"+ message);
}，
globalData: {
userInfo:null
}
})

注意：當用戶點擊微信小程序左上角關閉，或按了手機home鍵離開微信，微信小程序并沒直接銷毀；當用戶再次打開小程序或者再次進入微信，那么小程序會從后臺進入前臺而被喚醒。

二、頁面級生命周期

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

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

下面來看一下具體的幾個常用的頁面級生命周期函數的示例：

//監(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')
}，

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

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

三、組件的生命周期

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

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

注意：生命周期的方法可以直接定義在 Component 構造器的第一級參數中。

四、小結

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

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

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

2、當進入下一個頁面的生命周期執(zhí)行次序

(當前頁面)onHide --> (下一個頁面)onLoad --> (下一個頁面)onShow --> (下一個頁面)onReady。

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

(當前頁面)onUnload --> (上一個頁面)onShow。

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

(App)onHide。

5、當再次進入小程序的生命周期執(zhí)行次序

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

最后

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

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

最新評論