微信小程序 生命周期和頁(yè)面的生命周期詳細(xì)介紹
微信小程序 生命周期和頁(yè)面的生命周期詳解：
1.小程序的生命周期——App.js
App() 必須在 app.js 中注冊(cè)，且不能注冊(cè)多個(gè)。所以App（）方法在一個(gè)小程序中有且僅有一個(gè)。
App() 函數(shù)用來(lái)注冊(cè)一個(gè)小程序。接受一個(gè) object 參數(shù)，其指定小程序的生命周期函數(shù)等。先上代碼：
App({
onLaunch: function () {
console.log('App onLaunch');
},
onShow:function (){
console.log('App onShow');
},
onHide:function(){
console.log('App onHide');
},
onError:function(){
console.log('App onError');
},
getPics: function() {
return this.globalData.picList;
},
globalData:{
picList: [] // 圖片列表
},
globalName: 'tangdekun'
});
最外層的整個(gè){ }就是一個(gè)object 參數(shù)。
通過(guò)表格的形式看App()中的object參數(shù)說(shuō)明：
| 屬性 | 類型 | 描述 | 觸發(fā)時(shí)機(jī) |
|---|---|---|---|
| onLaunch | Function | 生命周期函數(shù)–監(jiān)聽(tīng)小程序初始化 | 當(dāng)小程序初始化完成時(shí)，會(huì)觸發(fā) onLaunch（全局只觸發(fā)一次）。 |
| onShow | Function | 生命周期函數(shù)–監(jiān)聽(tīng)小程序顯示 | 當(dāng)小程序啟動(dòng)，或從后臺(tái)進(jìn)入前臺(tái)顯示，會(huì)觸發(fā) onShow |
| onHide | Function | 生命周期函數(shù)–監(jiān)聽(tīng)小程序隱藏 | 當(dāng)小程序從前臺(tái)進(jìn)入后臺(tái)，會(huì)觸發(fā) onHide |
| onError | Function | 錯(cuò)誤監(jiān)聽(tīng)函數(shù) | 當(dāng)小程序發(fā)生腳本錯(cuò)誤，或者 api 調(diào)用失敗時(shí)，會(huì)觸發(fā) onError 并帶上錯(cuò)誤信息 |
| 其他 | Any | 開(kāi)發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到 Object 參數(shù)中，用 this 可以訪問(wèn)，上面的getPics就是函數(shù)， globalName是數(shù)據(jù)，這里面的函數(shù)和數(shù)據(jù)都是全局的。調(diào)用方式：在Pager中通過(guò)getApp()方法得到App對(duì)象并獲得全局的數(shù)據(jù)和調(diào)用全局的函數(shù) |
將原有的app.js中替換為上面的代碼，首次打開(kāi)小程序，可以在Log信息中看到以下Log信息,會(huì)看到onShow（）方法會(huì)執(zhí)行兩次
- App onLaunch
- App onShow()
- App onShow()
前臺(tái)、后臺(tái)定義： 當(dāng)用戶點(diǎn)擊左上角關(guān)閉，或者按了設(shè)備 Home 鍵離開(kāi)微信，小程序并沒(méi)有直接銷毀，而是進(jìn)入了后臺(tái)；當(dāng)再次進(jìn)入微信或再次打開(kāi)小程序，又會(huì)從后臺(tái)進(jìn)入前臺(tái)。
只有當(dāng)小程序進(jìn)入后臺(tái)一定時(shí)間，或者系統(tǒng)資源占用過(guò)高，才會(huì)被真正的銷毀。
注意：
1.不要在定義于 App() 內(nèi)的函數(shù)中調(diào)用 getApp() ，使用 this 就可以拿到 app 實(shí)例。
2.不要在 onLaunch 的時(shí)候調(diào)用 getCurrentPage()，此時(shí) page 還沒(méi)有生成。
3.通過(guò) getApp() 獲取實(shí)例之后，不要私自調(diào)用生命周期函數(shù)。
2.頁(yè)面的生命周期
Page() 函數(shù)用來(lái)注冊(cè)一個(gè)頁(yè)面。接受一個(gè) object 參數(shù)，其指定頁(yè)面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。
生命周期函數(shù)
onLoad: 頁(yè)面加載 一個(gè)頁(yè)面只會(huì)調(diào)用一次。 接收頁(yè)面參數(shù) 可以獲取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。 onShow: 頁(yè)面顯示 每次打開(kāi)頁(yè)面都會(huì)調(diào)用一次。 onReady: 頁(yè)面初次渲染完成 一個(gè)頁(yè)面只會(huì)調(diào)用一次，代表頁(yè)面已經(jīng)準(zhǔn)備妥當(dāng)，可以和視圖層進(jìn)行交互。 onHide: 頁(yè)面隱藏 當(dāng)navigateTo或底部tab切換時(shí)調(diào)用。 onUnload: 頁(yè)面卸載 當(dāng)redirectTo或navigateBack的時(shí)候調(diào)用。
其中APP的生命周期和頁(yè)面的生命周期是相互交叉的：舉例：
我們有頁(yè)面Test和Test1，我們?cè)趖est.js,test1.js和App.js的生命周期方法中都打印log，代碼如下：
test1.js
Page({
data:{
names:"tangdekun test1"
},
onLoad:function(options){
// 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
console.log("test1 onLoad");
},
onReady:function(){
// 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
console.log("test1 onReady");
},
onShow:function(){
// 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
console.log("test1 onShow");
},
onHide:function(){
// 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
console.log("test1 onHide");
},
onUnload:function(){
// 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
console.log("test1 onUnload");
},
onPullDownRefresh: function() {
// 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶下拉動(dòng)作
console.log("test1 onPullDownRefresh");
},
onReachBottom: function() {
// 頁(yè)面上拉觸底事件的處理函數(shù)
console.log("test1 onReachBottom");
}
})
test.js
Page({
data:{
name:"test"
},
onLoad:function(options){
// 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
console.log("test onLoad");
},
onReady:function(){
// 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
console.log("test onReady");
},
onShow:function(){
// 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
console.log("test onShow");
},
onHide:function(){
// 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
console.log("test onHide");
},
onUnload:function(){
// 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
console.log("test onUnload");
},
onPullDownRefresh: function() {
// 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶下拉動(dòng)作
console.log("test onPullDownRefresh");
},
onReachBottom: function() {
// 頁(yè)面上拉觸底事件的處理函數(shù)
console.log("test onReachBottom");
},
onShareAppMessage: function() {
// 用戶點(diǎn)擊右上角分享
return {
title: '分享頁(yè)面', // 分享標(biāo)題
desc: '這是一個(gè)分享的測(cè)試', // 分享描述
path: 'pages/waimai/waimai' // 分享路徑
}
},
navigateToPageB: function() {
wx.navigateTo({
url: '../../pages/pageB/pageB?id=3',
success: function(res){
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
},
redirectToPageA : function(){
wx.redirectTo({
url: '../../pages/pageA/pageA?id=4',
success: function(res){
// success
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
},
switchTabToTest1:function(){
wx.switchTab({
url: '../../pages/test1/test1',
success: function(res){
// success
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
}
})
app.js
//app.js
App({
onLaunch: function () {
console.log('App onLaunch');
},
onShow:function (){
console.log('App onShow1'+this.globalName);
},
onHide:function(){
console.log('App onHide');
},
onError:function(){
console.log('App onError');
},
getPics: function() {
return this.globalData.picList;
},
globalData:{
picList: [] // 圖片列表
},
globalName: 'tangdekun'
});
我們將test頁(yè)面設(shè)置為首頁(yè)【在app.json中設(shè)置】，程序會(huì)自動(dòng)加載test頁(yè)面，調(diào)用test.js中的生命周期方法，打印Log信息如下：
然后點(diǎn)擊菜單欄【作業(yè)中心】test1，會(huì)調(diào)用test 的onHide,test1的onLoad,onShow,onReady，打印Log信息如下：
在點(diǎn)擊【朋友圈】test，會(huì)調(diào)用test1的onHide方法，test的onshow方法，而不會(huì)調(diào)用test的onLoad,onReady方法，log信息如下：
通過(guò)實(shí)例我們一起理解一下官方的小程序頁(yè)面的生命周期：
View thread是我們的wxml文件，AppServiceThread就是我們js文件中研究的頁(yè)面的生命周期。這里我們可以看到每個(gè)生命周期方法的調(diào)用順序以及和Wxml之間的信息交流。大家可以簡(jiǎn)略的看一下就好。
因?yàn)轫?yè)面的生命周期和頁(yè)面的路由【即頁(yè)面之間的跳轉(zhuǎn)方式】有關(guān)，所以接下來(lái)我會(huì)向大家展示頁(yè)面跳轉(zhuǎn)的三種方式和各種跳轉(zhuǎn)方式之下的生命周期方法的調(diào)度。
感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
相關(guān)文章
這篇文章主要為大家介紹了閉包結(jié)合遞歸等于柯里化的原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
深入內(nèi)存原理談JS中變量存儲(chǔ)在堆中還是棧中
JavaScript中基本類型存儲(chǔ)在堆中還是棧中，百度一下有很多不同的答案，本篇文章就來(lái)給大家為此做個(gè)詳細(xì)的介紹,需要的朋友可以參考一下2021-09-09
這篇文章主要介紹了微信小程序 安全包括（框架、功能模塊、賬戶使用）詳解的相關(guān)資料,需要的朋友可以參考下2017-01-01
讓chatGPT教你如何使用taro創(chuàng)建mbox
這篇文章主要為大家介紹了讓chatGPT教你如何使用taro創(chuàng)建mbox實(shí)現(xiàn)實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要為大家介紹了二維碼條形碼生成的JavaScript腳本庫(kù)實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
lodash里to系列之將數(shù)據(jù)轉(zhuǎn)換成數(shù)字類型實(shí)現(xiàn)示例
這篇文章主要為大家介紹了lodash里to系列之將數(shù)據(jù)轉(zhuǎn)換成數(shù)字類型實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
JS數(shù)據(jù)分析數(shù)據(jù)去重及參數(shù)序列化示例
這篇文章主要為大家介紹了JS數(shù)據(jù)分析數(shù)據(jù)去重及參數(shù)序列化示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
深入講解JavaScript之繼承的多種方式和優(yōu)缺點(diǎn)
本文講主要解JavaScript各種繼承方式和優(yōu)缺點(diǎn)，文章將六種繼承方式說(shuō)明，分別有原型鏈繼承、借用構(gòu)造函數(shù)(經(jīng)典繼承)、組合繼承、原型式繼承、寄生式繼承、 寄生組合式繼承，這六種方式,需要的朋友可以參考一下2021-10-10
這篇文章主要為大家介紹了前端框架arco?table源碼遇到的問(wèn)題解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
js面向?qū)ο缶幊蘋(píng)OP及函數(shù)式編程FP區(qū)別
這篇文章主要為大家介紹了js面向?qū)ο缶幊蘋(píng)OP及函數(shù)式編程FP的區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07