這篇文章主要講解了“微信小程序應用和頁面生命周期實例分析”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“微信小程序應用和頁面生命周期實例分析”吧！

什么是生命周期

生命周期(Life Cycle）是指一個對象從創建→>運行>銷毀的整個階段，強調的是一個時間段。如：

• 張三出生，表示這個人生命周期的開始

• 張三離世，表示這個人生命周期的結束

• 中間張三的一生，就是張三的生命周期

我們可以把每個小程序運行的過程，也概括為生命周期:

• 小程序的啟動，表示生命周期的開始

• 小程序的關閉，表示生命周期的結束

• 中間小程序運行的過程，就是小程序的生命周期

生命周期的分類

在小程序中，生命周期分為兩類，分別是:

• 應用生命周期

特指小程序從啟動->運行->銷毀的過程

• 頁面生命周期

特指小程序中，每個頁面的加載->渲染->銷毀的過程

其中，頁面的生命周期范圍較小，應用程序的生命周期范圍較大：

生命周期函數

生命周期函數:是由小程序框架提供的內置函數，會伴隨著生命周期，自動按次序執行。

生命周期函數的作用:允許程序員在特定的時間點，執行某些特定的操作。例如，頁面剛加載的時候，可以在onLoad生命周期函數中初始化頁面的數據。

注意:生命周期強調的是時間段，生命周期函數強調的是時間點。

小程序中的生命周期函數分為兩類，分別是:

應用的生命周期函數
特指小程序從啟動->運行-→>銷毀期間依次調用的那些函數頁面的生命周期函數
特指小程序中，每個頁面從加載->渲染-→>銷毀期間依次調用的那些函數 小程序的應用生命周期函數

小程序的應用生命周期函數需要在app.js 中進行聲明。如：

App({
/**
*當小程序初始化完成時，會觸發onLaunch（全局只觸發一次）
*/
onLaunch:function(){
console.log("小程序啟動！");
},
/**
*當小程序啟動，或從后臺進入前臺顯示，會觸發onShow
*/
onShow:function(options){
console.log('小程序正在前臺運行！');
},
/**
*當小程序從前臺進入后臺，會觸發onHide
*/
onHide:function(){
console.log("小程序進入后臺運行！");
},
/**
*當小程序發生腳本錯誤，或者api調用失敗時，會觸發onError并帶上錯誤信息
*/
onError:function(msg){

}
})

• 用戶首次打開小程序，觸發 onLaunch（全局只觸發一次）。

• 小程序初始化完成后，觸發onShow方法，監聽小程序顯示。

• 小程序從前臺進入后臺，觸發 onHide方法。

• 小程序從后臺進入前臺顯示，觸發 onShow方法。

• 小程序后臺運行一定時間，或系統資源占用過高，會被銷毀。

屬性	類型	描述	觸發時機
onLaunch	Function	監聽小程序初始化	當小程序初始化完成時，會觸發 onLaunch（全局只觸發一次）。
onShow	Function	監聽小程序顯示	當小程序啟動，或從后臺進入前臺顯示，會觸發 onShow
onHide	Function	監聽小程序隱藏	當小程序從前臺進入后臺，會觸發 onHide
onError	Function	錯誤監聽函數	當小程序發生腳本錯誤，或者 api 調用失敗時，會觸發 onError 并帶上錯誤信息
其他	Any		開發者可以添加任意的函數或數據到 Object 參數中，用 this 可以訪問，上面的getPics就是函數， globalName是數據，這里面的函數和數據都是全局的。調用方式：在Pager中通過getApp()方法得到App對象并獲得全局的數據和調用全局的函數

前臺、后臺定義： 當用戶點擊左上角關閉，或者按了設備 Home 鍵離開微信小程序并沒有直接銷毀，而是進入了后臺；當再次進入微信或再次打開小程序，又會從后臺進入前臺。

小程序的頁面生命周期函數

小程序的頁面生命周期函數需要在頁面.js 中進行聲明。如：

Page({
/**
*頁面的初始數據
*/
data:{
},

/**
*生命周期函數--監聽頁面加載
*/
onLoad(options){
console.log('本地生活頁面加載完畢');
},
/**
*生命周期函數--監聽頁面初次渲染完成
*/
onReady(){
console.log("初次渲染完畢！");
},
/**
*生命周期函數--監聽頁面顯示
*/
onShow(){
console.log("頁面顯示完成");
},
/**
*生命周期函數--監聽頁面隱藏
*/
onHide(){
console.log("頁面已被隱藏！");
},
/**
*生命周期函數--監聽頁面卸載
*/
onUnload(){
console.log("GG");
},

/**
*頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh(){
console.log('正在刷新！');
},

/**
*頁面上拉觸底事件的處理函數
*/
onReachBottom(){
console.log('正在加載更多！');
},

/**
*用戶點擊右上角分享
*/
onShareAppMessage(){
console.log('用戶正在分享！');
}
})

• 小程序注冊完成后，加載頁面，觸發onLoad方法。

• 頁面載入后觸發onShow方法，顯示頁面。

• 首次顯示頁面，會觸發onReady方法，渲染頁面元素和樣式，一個頁面只會調用一次。

• 當小程序后臺運行或跳轉到其他頁面時，觸發onHide方法。

• 當小程序有后臺進入到前臺運行或重新進入頁面時，觸發onShow方法。

• 當使用重定向方法wx.redirectTo(OBJECT)或關閉當前頁返回上一頁wx.navigateBack()，觸發onUnload。

函數	說明	作用
onLoad	生命周期回調—監聽頁面加載	發送請求獲取數據
onShow	生命周期回調—監聽頁面顯示	請求數據
onReady	生命周期回調—監聽頁面初次渲染完成	獲取頁面元素(少用)
onHide	生命周期回調—監聽頁面隱藏	終止任務，如定時器或者播放音樂
onUnload	生命周期回調—監聽頁面卸載	終止任務

• 小程序初始化完成后，頁面首次加載觸發onLoad，只會觸發一次。

• 當小程序進入到后臺，先執行頁面onHide方法再執行應用onHide方法。

• 當小程序從后臺進入到前臺，先執行應用onShow方法再執行頁面onShow方法。

實例演示：

監聽事件：

總結

以上是生活随笔為你收集整理的微信小程序应用和页面生命周期实例分析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。