微信小程序的生命週期大概分爲三步
1.全局生命週期
2.頁面生命週期
3.組件生命週期
一. 生命週期 App（全局）
項目根目錄app.js文件
App({
onLaunch (options) {
console.log('小程序初始化')
// 在項目打開時可以寫一些業務邏輯
},
onShow(options) {
console.log('監聽小程序啓動或切前臺')
},
onHide() {
console.log('監聽小程序切後臺')
},
onError(msg) {
console.log('錯誤監聽函數')
},
onPageNotFound(res) {
console.log('小程序要打開的頁面不存在時觸發');
wx.redirectTo({ // 重定向 比如頁面錯誤 我跳轉到別的頁面
url: 'pages/...'
}) // 如果是 tabbar 頁面，就使用 wx.switchTab
}
})
2. 頁面生命週期
pages目錄下的xxx.js
Page({
/**
* 頁面的初始數據
*/
data: {
},
/*頁面生命週期*/
onLoad: function (options) {
console.log("初始化階段");
},
onReady: function () {
console.log('監聽頁面初次渲染完成')
},
onShow: function () {
console.log('監聽頁面顯示')
},
onHide: function () {
console.log('監聽頁面隱藏')
},
onUnload: function () {
console.log('監聽頁面卸載')
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
})
3. 組件生命週期
// pages/components/xxx.js
Component({
/**
* 組件的屬性列表
*/
properties: {
},
/**
* 組件的初始數據
*/
data: {
},
/**
* 組件的方法列表
*/
methods: {
},
/*組件生命週期*/
lifetimes: {
created() {
console.log("在組件實例剛剛被創建時執行")
},
attached() {
console.log("在組件實例進入頁面節點樹時執行")
},
ready() {
console.log("在組件在視圖層佈局完成後執行")
},
moved() {
console.log("在組件實例被移動到節點樹另一個位置時執行")
},
detached() {
console.log("在組件實例被從頁面節點樹移除時執行")
},
error() {
console.log("每當組件方法拋出錯誤時執行")
},
/*組件所在頁面的生命週期 */
pageLifetimes: {
show: function () {
// 頁面被展示
console.log("頁面被展示")
},
hide: function () {
// 頁面被隱藏
console.log("頁面被隱藏")
},
resize: function (size) {
// 頁面尺寸變化
console.log("頁面尺寸變化")
}
}
}
})
聲明週期不管是在vue、react 小程序中都是至深莫測的 我們可以根據需求在不同的生命週期中去處理一些業務邏輯~