1、应用生命周期
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/1a89961bfc484b9da8426999395cfe10.png#pic_center)
生命周期 | 说明 |
---|
onLaunch | 监听小程序初始化,全局只会执行 1 次 |
onShow | 监听小程序启动或切前台 |
onHide | 监听小程序切后台 |
🔗应用生命周期官方文档
App({
onLaunch: function () {
console.log('onLaunch: 当小程序初始化完成时,会触发 onLaunch')
},
onShow: function (options) {
console.log('onShow: 当小程序启动,或从后台进入前台显示')
},
onHide: function () {
console.log('onHide: 小程序从前台进入后台')
}
})
2、页面生命周期
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/271df45d2ffd4e4a8b909fab8ce4d4e1.png#pic_center)
生命周期 | 说明 |
---|
onLoad | 页面加载时触发。一个页面只会调用一次,可以在 onLoad 的参数中获取打开当前页面路径中的参数 |
onShow | 页面显示时触发,页面显示/切入前台时触发 |
onReady | 页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互 |
onHide | 页面隐藏/切入后台时触发 |
onUnload | 页面卸载时触发 |
🔗页面生命周期官方文档
Page({
onLoad: function (options) {
console.log('页面加载完毕')
},
onShow: function () {
console.log('监听页面显示,此时页面处于显示状态')
},
onReady: function () {
console.log('页面初次渲染已经完成')
},
onHide: function () {
console.log('当前页面处于隐藏状态')
},
onUnload: function () {
console.log('页面卸载时触发')
}
})
3、组件生命周期
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/6c8aa429a3984a4498f895fb1e77ff29.png#pic_center)
生命周期 | 说明 |
---|
created | 在组件实例刚刚被创建时执行 |
attached | 在组件实例进入页面节点树时执行 |
ready | 在组件在视图层布局完成后执行 |
moved | 在组件实例被移动到节点树另一个位置时执行 |
detached | 在组件实例被从页面节点树移除时执行 |
error | 每当组件方法抛出错误时执行,接收一个参数Object Error |
🔗组件生命周期官方文档
定义生命周期方法
- 生命周期方法可以直接定义在
Component
构造器的第一级参数中。 - 自小程序基础库版本 2.2.3 起,组件的的生命周期也可以在
lifetimes
字段内进行声明(这是推荐
的方式,其优先级最高)。
Component({
lifetimes: {
created: function () {
},
attached: function() {
},
detached: function() {
}
}
})
4、组件所在页面的生命周期
还有一些特殊的生命周期,它们并非与组件有很强的关联,但有时组件需要获知,以便组件内部处理。这样的生命周期称为“组件所在页面的生命周期”,在 pageLifetimes
定义段中定义。其中可用的生命周期包括:
生命周期 | 说明 |
---|
show | 组件所在的页面被展示时执行 |
hide | 组件所在的页面被隐藏时执行 |
resize | 组件所在的页面尺寸变化时执行,接收一个参数Object Size |
routeDone | 组件所在页面路由动画完成时执行 |
Component({
pageLifetimes: {
show () {
console.log('组件所在的页面被展示')
},
hide () {
console.log('组件所在的页面被隐藏')
}
}
})
5、小程序生命周期总结
小程序冷启动
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/a61b689897ed4d39928e5db8ac7eb80f.png#pic_center)
保留当前页面(navigate) 以及 关闭当前页面(redirect)
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/0b19bd31c5eb402383b6766bc5451ec6.png#pic_center)
切后台 以及 切前台(热启动)
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/595e61e0a6ef417ab29213bf5a7276cb.png#pic_center)