微信小程序生命周期、页面生命周期、组件生命周期

2023-05-25,,

1. 生命周期 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/a.js
Page({ /**
* 页面的初始数据
*/
data: { },
/*页面生命周期*/
onReady: function () {
console.log('监听页面初次渲染完成') },
onShow: function () {
console.log('监听页面显示')
},
onHide: function () {
console.log('监听页面隐藏') },
onUnload: function () {
console.log('监听页面卸载')
}, /**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () { }, /**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () { }, /**
* 用户点击右上角分享
*/
onShareAppMessage: function () { }
})

3. 组件生命周期


// pages/myComponent.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("页面尺寸变化")
}
} } })

微信小程序生命周期、页面生命周期、组件生命周期的相关教程结束。

《微信小程序生命周期、页面生命周期、组件生命周期.doc》

下载本文的Word格式文档,以方便收藏与打印。