小程序中生命周期分为3类：
- 应⽤的生命周期
- 页面的生命周期
- 组件的生命周期
一、生命周期
1. 应⽤的生命周期
App({
onLaunch: function(options) {
// 小程序初始化完成时触发，全局只触发一次。
},
onShow: function(options) {
// 小程序启动，或从后台进入前台显示时触发。
},
onHide: function() {
// 小程序从前台进入后台时触发。
},
onError: function(msg) {
// 小程序发生脚本错误或 API 调用报错时触发。
},
onPageNotFound: function(options) {
// 小程序要打开的页面不存在时触发。
},
onUnhandledRejection: function(options) {
// 小程序有未处理的 Promise 拒绝时触发。
},
onThemeChange: function(options) {
// 系统切换主题时触发。
},
});
2. 页面的生命周期
生命周期参考图
Page({
onLoad: function(options) {
// 页面创建时执行
},
onShow: function(options) {
// 页面出现在前台时执行
},
onReady: function() {
// 页面首次渲染完毕时执行
},
onHide: function() {
// 页面从前台变为后台时执行
},
onUnload: function() {
// 页面销毁时执行
}
});
3. 组件的生命周期
- 组件实例刚刚被创建好时，
created生命周期被触发。此时，组件数据this.data就是在Component构造器中定义的数据data。 此时还不能调用setData。 通常情况下，这个生命周期只应该用于给组件this添加一些自定义属性字段。 - 在组件完全初始化完毕、进入页面节点树后，
attached生命周期被触发。此时，this.data已被初始化为组件的当前值。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。 - 在组件离开页面节点树后，
detached生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则detached会被触发。
- 生命周期方法可以直接定义在 Component 构造器的第一级参数中。 组件的的生命周期也可以在
lifetimes字段内进行声明（这是推荐的方式，其优先级最高）
Component({
// 组件自身的生命周期
lifetimes: {
created: function() {
// 在组件实例刚刚被创建时执行
},
attached: function() {
// 在组件实例进入页面节点树时执行
},
ready: function() {
// 在组件在视图层布局完成后执行
},
moved: function() {
// 在组件实例被移动到节点树另一个位置时执行
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
},
error: function(Object Error) {
// 每当组件方法抛出错误时执行
}
},
// 组件所在页面的生命周期
pageLifetimes: {
show: function() {
// 页面被展示
},
hide: function() {
// 页面被隐藏
},
resize: function(size) {
// 页面尺寸变化
}
}
});
二、执行过程
1. 应⽤的⽣命周期执行过程：
- ⽤户⾸次打开⼩程序，触发 onLaunch（全局只触发⼀次）
- ⼩程序初始化完成后，触发onShow⽅法，监听⼩程序显示
- ⼩程序从前台进⼊后台，触发 onHide⽅法
- ⼩程序从后台进⼊前台显示，触发 onShow⽅法
- ⼩程序后台运⾏⼀定时间，或系统资源占⽤过⾼，会被销毁
2. ⻚⾯⽣命周期的执行过程：
- ⼩程序注册完成后，加载⻚⾯，触发onLoad⽅法
- ⻚⾯载⼊后触发onShow⽅法，显示⻚⾯
- ⾸次显示⻚⾯，会触发onReady⽅法，渲染⻚⾯元素和样式，⼀个⻚⾯只会调⽤⼀次
- 当⼩程序后台运⾏或跳转到其他⻚⾯时，触发onHide⽅法
- 当⼩程序有后台进⼊到前台运⾏或重新进⼊⻚⾯时，触发onShow⽅法
- 当使⽤重定向⽅法 wx.redirectTo() 或关闭当前⻚返回上⼀⻚wx.navigateBack()，触发onUnload
3. 执行顺序
- 打开小程序：(App)onLaunch --> (App)onShow --> (Pages)onLoad --> (Pages)onShow --> (pages)onRead
- 进入下一个页面：(currPage)onHide --> (NextPage)onLoad --> (NextPage)onShow --> (NextPage)onReady
- 返回上一个页面：(currPage)onUnload --> (prePage)onShow
- 离开小程序：(App&Page)onHide
- 再次进入：小程序未销毁 --> (App)onShow(执行上面的顺序），小程序被销毁，（App)onLaunch重新开始执行.
网友评论