1.生命周期
1.1 应用生命周期
onLaunch() 监听小程序初始化 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）onShow() 监听小程序显示 当小程序启动，或从后台进入前台显示，会触发 onShowonHide() 监听小程序隐藏 当小程序从前台进入后台，会触发 onHideonError() 错误监听函数 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上 错误信息1.2 页面生命周期
onLoad 页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中 的参数onShow() 页面显示/切入前台时触发onReady() 页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层 进行交互onHide() 页面隐藏/切入后台时触发。 如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等onUnload() 页面卸载时触发。如 redirectTo 或 navigateBack 到其他页面时1.3 组件生命周期
1.3.1 组件生命周期函数
created() 在组件实例刚刚被创建时执行
组件实例刚被创建好的时候，created 生命周期函数会被触发此时还不能调用 setData通常在这个生命周期函数中，只应该用于给组件的 this 添加一些自定义的属性字段
attached()在组件实例进入页面节点树时执行
在组件完全初始化完毕、进入页面节点树后， attached 生命周期函数会被触发此时， this.data 已被初始化完毕这个生命周期很有用，绝大多数初始化的工作可以在这个时机进行（例如发请求获取初始数据）
ready() 组件在视图层布局完成后执行
moved() 在组件实例被移动到节点树另一个位置时执行
detached() 在组件实例被从页面节点树移除时执行
在组件离开页面节点树后， detached 生命周期函数会被触发退出一个页面（页面卸载）时，会触发页面内每个自定义组件的 detached 生命周期函数此时适合做一些清理性质的工作
error() 每当组件方法抛出错误时执行
建议定义在lifetimes节点下
lifetimes: {attached: function() {// 在组件实例进入页面节点树时执行},detached: function() {// 在组件实例被从页面节点树移除时执行}}
1.3.2 组件所在页面生命周期
show() 组件所在的页面被展示时执行hide() 组件所在的页面被隐藏时执行resize() 组件所在的页面尺寸变化时执行定义在pageLifetimes节点下1.4 执行顺序
1.4.1 加载(以应用加载为例)
触发顺序
应用的生命周期：onLaunch应用的生命周期：onShow组件的生命周期：created组件的生命周期：attached页面的生命周期：onLoad组件所在页面生命周期(pageLifetimes)：show页面的生命周期：onShow组件的生命周期：ready页面的生命周期：onReady
注意点：
页面的 onReady 在 onShow后边执行组件和页面的生命周期是：组件先 created、attached，而后页面再 onLoad，随后组件所在页面生命周期 show，而后页面 onShow，然后组件 ready，页面 onReady
1.4.2 页面隐藏
触发顺序：
组件所在页面生命周期(pageLifetimes)：hide隐藏页面的生命周期：onHide跳转页面的生命周期：onLoad -> onShow -> onReady
注意点：
组件所在页面隐藏时，该组件并不会 detached，仅触发组件所在页面生命周期(pageLifetimes)的 hide
1.4.3 页面卸载
触发顺序
卸载页面的生命周期：onUnload组件的生命周期：detached加载页面的生命周期：onLoad -> onShow -> onReady
注意点：
页面先卸载，组件再 detached页面卸载的时候，并不会触发 onHide
1.5 示例代码
1.5.1 目录树
1.5.2 app.json
pages 节点替换成如下代码
"pages": ["pages/page1/page1","pages/page2/page2","pages/page3/page3"]
1.5.3 page1页面
wxml
<!--index.wxml--><view class="container" bindtap="clickPage"><view data-index="1" style="margin-top: 20rpx;">页面1 页面初始化</view><view data-index="2" style="margin-top: 20rpx;">页面2 验证页面1隐藏</view><view data-index="3" style="margin-top: 20rpx;">页面3 验证页面1销毁</view><view style="width: 300rpx; height: 300rpx; background-color: red; color: #fff;margin-top: 20rpx;">我是页面1</view><pageChild></pageChild></view>
js
Page({onLoad() {console.log('page1 -----> onLoad')},onShow() {console.log('page1 -----> onShow')},onReady() {console.log('page1 -----> onReady')},onHide() {console.log('page1 -----> onHide')},onUnload() {console.log('page1 -----> onUnload')},clickPage(e) {const {index} = e.target.dataset// index 为字符型if(index === '2') {wx.navigateTo({url: '/pages/page2/page2',})} else {wx.redirectTo({url: '/pages/page3/page3',})}} })
json
{"usingComponents": {"pageChild": "/components/pageChild/pageChild"}}
1.5.4 page2页面
wxml
<view class="container" bindtap="clickPage"><view style="width: 300rpx; height: 300rpx; background-color: red; color: #fff;margin-top: 20rpx;">我是页面2</view></view>
js
Page({data: {motto: 'Hello World'},onLoad() {console.log('page2 -----> onLoad')},onShow() {console.log('page2 -----> onShow')},onReady() {console.log('page2 -----> onReady')},onHide() {console.log('page2 -----> onHide')},onUnload() {console.log('page2 -----> onUnload')}})
page3页面同该页面一样，仅改变标识 2 替换为 3
1.5.5 pageChild组件
wxml
<view><view style="width: 300rpx; height: 300rpx; background-color: red; color: #fff;margin-top: 20rpx;">我是自定义组件</view></view>
js
Component({lifetimes: {created () {console.log('component -----> created')},attached () {console.log('component -----> attached')},ready () {console.log('component -----> ready')},moved () {console.log('component -----> attached')},detached () {console.log('component -----> detached')},error () {console.log('component -----> detached')}},pageLifetimes: {show () {console.log('component -----> pageLife -----> show')},hide () {console.log('component -----> pageLife -----> hide')},resize () {console.log('component -----> pageLife -----> resize')}}})
如果觉得《微信小程序生命周期 应用生命周期 页面生命周期 组件生命周期》对你有帮助，请点赞、收藏，并留下你的观点哦！
