微信小程序開發之(zhī)詳解生命周期方法
發表時(shí)間:2021-3-31
發布人(rén):融晨科技
浏覽次數:71
在(zài)小程序中 ,通過App()來(lái)注冊一個(gè)小程序 ,通過Page()來(lái)注冊一個(gè)頁面
先來(lái)看一張小程序項目結構
從上(shàng)圖可以(yǐ)看出(chū),根目錄下面有包含了(le/liǎo)app.js,app.wxss,app.json三個(gè)文件
這(zhè)是(shì)小程序的(de)全局文件,app.js是(shì)小程序邏輯 ,app.json是(shì)小程序公共設置,app.wxss是(shì)小程序公共樣式表
在(zài)app.js文件中 , 定義了(le/liǎo)一些生命周期方法 , onLaunch,onShow,onHide,onError,以(yǐ)及任意開發者添加的(de)函數或者數據(通過this可以(yǐ)訪問)
以(yǐ)下是(shì)各個(gè)生命周期方法作用和(hé / huò)描述
onLaunch 生命周期函數--監聽小程序初始化 當小程序初始化完成時(shí),會觸發 onLaunch(全局隻觸發一次)
onShow 生命周期函數--監聽小程序顯示 當小程序啓動,或從後台進入前台顯示,會觸發 onShow
onHide 生命周期函數--監聽小程序隐藏 當小程序從前台進入後台,會觸發 onHide
onError 錯誤監聽函數 當小程序發生腳本錯誤,或者 api 調用失敗時(shí),會觸發 onError 并帶上(shàng)錯誤信息
其他(tā) Any 開發者可以(yǐ)添加任意的(de)函數或數據到(dào) Object 參數中,用 this 可以(yǐ)訪問
我們在(zài)app.js文件中定義以(yǐ)下方法 ,并打印出(chū)來(lái)
App({
onLaunch: function (options) {
console.log("app.js ---onLaunch---" + JSON.stringify(options));
},
onShow:function(){
console.log("app.js ---onShow---");
},
onHide:function(){
console.log("app.js ---onHide---");
},
onError: function (msg){
console.log("app.js ---onError---" + msg);
},
globalData: {
userInfo: null
}
})
這(zhè)是(shì)我們打開一個(gè)小程序打印出(chū)來(lái)的(de)一些方法
可以(yǐ)看出(chū), 打開程序依次執行了(le/liǎo)app.js下面onLaunch和(hé / huò)onShow方法,以(yǐ)及page頁面中的(de)onLoad,onShow和(hé / huò)onReady方法
其中 , onLaunch, onShow 方法會返回一個(gè)參數對象, 裏面包含了(le/liǎo)三個(gè)參數 , path,query和(hé / huò)scene ,path是(shì)打開小程序的(de)路徑
query是(shì)打開小程序頁面url的(de)參數,scene是(shì)打開小程序的(de)場景值
更多場景值可以(yǐ)查看
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/scene.html
小程序切換到(dào)後台會執行以(yǐ)下2個(gè)方法
返回小程序前台
在(zài)page頁面中定義的(de)生命周期方法
onLoad 生命周期函數--監聽頁面加載
onReady 生命周期函數--監聽頁面初次渲染完成
onShow 生命周期函數--監聽頁面顯示
onHide 生命周期函數--監聽頁面隐藏
onUnload 生命周期函數--監聽頁面卸載
Page({
onLoad: function (options) {
console.log("page ---onLoad---");
},
onReady: function () {
console.log("page ---onReady---");
},
onShow: function () {
console.log("page ---onShow---");
},
onHide: function () {
console.log("page ---onHide---");
},
onUnload: function () {
console.log("page ---onUnload---");
}
})
其中,打開小程序後會依次執行onLoad,onReady和(hé / huò)onShow方法
前後台切換會分别執行onHide和(hé / huò)onShow方法,
當小程序頁面銷毀時(shí)會執行 onUnload方法
例如,我們在(zài)details.js中定義onUnload方法
onUnload: function () {
console.log("details.js --onUnload")
},
當我們從首頁打開一個(gè)新頁面details.wxml,然後再關閉着這(zhè)個(gè)頁面
從上(shàng)圖可以(yǐ)看到(dào)頁面執行了(le/liǎo)onUnload方法
另外, 小程序爲(wéi / wèi)我們提供了(le/liǎo)全局數據管理 ,在(zài)page頁面中通過getApp()方法獲取app.js實例
例如:
我們在(zài)app.js通過定義一個(gè)globalData數據對象
App({
globalData: {
userInfo: null
}
})
// other.js
var appInstance = getApp()
console.log(appInstance.globalData)
注意:
App() 必須在(zài) app.js 中注冊,且不(bù)能注冊多個(gè)。
不(bù)要(yào / yāo)在(zài)定義于(yú) App() 内的(de)函數中調用 getApp() ,使用 this 就(jiù)可以(yǐ)拿到(dào) app 實例。
不(bù)要(yào / yāo)在(zài) onLaunch 的(de)時(shí)候調用 getCurrentPages(),此時(shí) page 還沒有生成。
通過 getApp() 獲取實例之(zhī)後,不(bù)要(yào / yāo)私自調用生命周期函數。
參考文章
微信小程序開發詳解(七)---微信小程序APP生命周期