微信小程序生命周期和頁面的生命周期詳細介紹
微信小程序 生命周期和頁面的生命周期詳解：
創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供莘縣網(wǎng)站建設(shè)、莘縣做網(wǎng)站、莘縣網(wǎng)站設(shè)計、莘縣網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、莘縣企業(yè)網(wǎng)站模板建站服務(wù)，十多年莘縣做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。
1.小程序的生命周期——App.js
App() 必須在 app.js 中注冊，且不能注冊多個。所以App（）方法在一個小程序中有且僅有一個。
App() 函數(shù)用來注冊一個小程序。接受一個 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'
});最外層的整個{ }就是一個object 參數(shù)。
通過表格的形式看App()中的object參數(shù)說明：
| 屬性 | 類型 | 描述 | 觸發(fā)時機 |
|---|---|---|---|
| onLaunch | Function | 生命周期函數(shù)–監(jiān)聽小程序初始化 | 當小程序初始化完成時，會觸發(fā) onLaunch（全局只觸發(fā)一次）。 |
| onShow | Function | 生命周期函數(shù)–監(jiān)聽小程序顯示 | 當小程序啟動，或從后臺進入前臺顯示，會觸發(fā) onShow |
| onHide | Function | 生命周期函數(shù)–監(jiān)聽小程序隱藏 | 當小程序從前臺進入后臺，會觸發(fā) onHide |
| onError | Function | 錯誤監(jiān)聽函數(shù) | 當小程序發(fā)生腳本錯誤，或者 api 調(diào)用失敗時，會觸發(fā) onError 并帶上錯誤信息 |
| 其他 | Any | 開發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到 Object 參數(shù)中，用 this 可以訪問，上面的getPics就是函數(shù)， globalName是數(shù)據(jù)，這里面的函數(shù)和數(shù)據(jù)都是全局的。調(diào)用方式：在Pager中通過getApp()方法得到App對象并獲得全局的數(shù)據(jù)和調(diào)用全局的函數(shù) |
將原有的app.js中替換為上面的代碼，首次打開小程序，可以在Log信息中看到以下Log信息,會看到onShow（）方法會執(zhí)行兩次
- App onLaunch
- App onShow()
- App onShow()
前臺、后臺定義： 當用戶點擊左上角關(guān)閉，或者按了設(shè)備 Home 鍵離開微信，小程序并沒有直接銷毀，而是進入了后臺；當再次進入微信或再次打開小程序，又會從后臺進入前臺。
只有當小程序進入后臺一定時間，或者系統(tǒng)資源占用過高，才會被真正的銷毀。
注意：
1.不要在定義于 App() 內(nèi)的函數(shù)中調(diào)用 getApp() ，使用 this 就可以拿到 app 實例。
2.不要在 onLaunch 的時候調(diào)用 getCurrentPage()，此時 page 還沒有生成。
3.通過 getApp() 獲取實例之后，不要私自調(diào)用生命周期函數(shù)。
2.頁面的生命周期
Page() 函數(shù)用來注冊一個頁面。接受一個 object 參數(shù)，其指定頁面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。
生命周期函數(shù)
onLoad: 頁面加載 一個頁面只會調(diào)用一次。 接收頁面參數(shù) 可以獲取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。 onShow: 頁面顯示 每次打開頁面都會調(diào)用一次。 onReady: 頁面初次渲染完成 一個頁面只會調(diào)用一次，代表頁面已經(jīng)準備妥當，可以和視圖層進行交互。 onHide: 頁面隱藏 當navigateTo或底部tab切換時調(diào)用。 onUnload: 頁面卸載 當redirectTo或navigateBack的時候調(diào)用。
其中APP的生命周期和頁面的生命周期是相互交叉的：舉例：
我們有頁面Test和Test1，我們在test.js,test1.js和App.js的生命周期方法中都打印log，代碼如下：
test1.js
Page({
data:{
names:"tangdekun test1"
},
onLoad:function(options){
// 生命周期函數(shù)--監(jiān)聽頁面加載
console.log("test1 onLoad");
},
onReady:function(){
// 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
console.log("test1 onReady");
},
onShow:function(){
// 生命周期函數(shù)--監(jiān)聽頁面顯示
console.log("test1 onShow");
},
onHide:function(){
// 生命周期函數(shù)--監(jiān)聽頁面隱藏
console.log("test1 onHide");
},
onUnload:function(){
// 生命周期函數(shù)--監(jiān)聽頁面卸載
console.log("test1 onUnload");
},
onPullDownRefresh: function() {
// 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
console.log("test1 onPullDownRefresh");
},
onReachBottom: function() {
// 頁面上拉觸底事件的處理函數(shù)
console.log("test1 onReachBottom");
}
})test.js
Page({
data:{
name:"test"
},
onLoad:function(options){
// 生命周期函數(shù)--監(jiān)聽頁面加載
console.log("test onLoad");
},
onReady:function(){
// 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
console.log("test onReady");
},
onShow:function(){
// 生命周期函數(shù)--監(jiān)聽頁面顯示
console.log("test onShow");
},
onHide:function(){
// 生命周期函數(shù)--監(jiān)聽頁面隱藏
console.log("test onHide");
},
onUnload:function(){
// 生命周期函數(shù)--監(jiān)聽頁面卸載
console.log("test onUnload");
},
onPullDownRefresh: function() {
// 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
console.log("test onPullDownRefresh");
},
onReachBottom: function() {
// 頁面上拉觸底事件的處理函數(shù)
console.log("test onReachBottom");
},
onShareAppMessage: function() {
// 用戶點擊右上角分享
return {
title: '分享頁面', // 分享標題
desc: '這是一個分享的測試', // 分享描述
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頁面設(shè)置為首頁【在app.json中設(shè)置】，程序會自動加載test頁面，調(diào)用test.js中的生命周期方法，打印Log信息如下： 
然后點擊菜單欄【作業(yè)中心】test1，會調(diào)用test 的onHide,test1的onLoad,onShow,onReady，打印Log信息如下： 
在點擊【朋友圈】test，會調(diào)用test1的onHide方法，test的onshow方法，而不會調(diào)用test的onLoad,onReady方法，log信息如下： 
通過實例我們一起理解一下官方的小程序頁面的生命周期： 
View thread是我們的wxml文件，AppServiceThread就是我們js文件中研究的頁面的生命周期。這里我們可以看到每個生命周期方法的調(diào)用順序以及和Wxml之間的信息交流。大家可以簡略的看一下就好。
因為頁面的生命周期和頁面的路由【即頁面之間的跳轉(zhuǎn)方式】有關(guān)，所以接下來我會向大家展示頁面跳轉(zhuǎn)的三種方式和各種跳轉(zhuǎn)方式之下的生命周期方法的調(diào)度。
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
文章標題：微信小程序生命周期和頁面的生命周期詳細介紹
轉(zhuǎn)載源于：http://www.chinadenli.net/article48/gpsoep.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、面包屑導(dǎo)航、企業(yè)網(wǎng)站制作、品牌網(wǎng)站建設(shè)、虛擬主機、品牌網(wǎng)站設(shè)計
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
- 淺談微信小程序 2022-08-27
- QQ 小程序和微信小程序比有什么不同 2021-02-14
- 如何利用微信小程序新功能 2022-06-13
- 微信小程序注冊流程有哪些 2016-01-06
- 微信小程序開發(fā)通常都可以做哪些事情 2020-12-08
- 微信小程序如何實現(xiàn)知識付費？ 2022-11-01
- 微信小程序憑什么這么火？ 2016-08-09
- 記住這幾點，搭建微信小程序商城更簡單 2022-05-07
- 微信小程序商城開發(fā)對于商家有什么意義？又該如何運營？ 2022-08-15
- 哪些因素影響微信小程序開發(fā)周期長短？ 2021-01-01
- 如何建立自己的微信小程序，做一個微信小程序大概多少錢？ 2022-12-11
- 微信小程序定制開發(fā)，選對平臺是關(guān)鍵 2022-07-20