微信小程序生命周期总结

微信小程序生命周期总结

微信小程序生命周期分类：

1. 应用生命周期
2. 页面生命周期
3. 组件生命周期

应用生命周期

小程序被使用和关闭就代表这个周期的开始与结束，它是入口文件（根目录下的app.js/app.vue/app.jsx）所使用的的

(1) onLaunch:初始化小程序时触发,全局只触发一次.(生命周期回调——监听小程序初始化。)
(2) onShow:小程序初始化完成或用户从后台切换到前台时触发(生命周期回调——监听小程序启动或切前台。)
(3) onHide：用户从前台切换到后台时触发(生命周期回调——监听小程序切后台)
(4) onError: 小程序发生脚本错误时,或者API调用失败时,会触发onError并带上错误的信息(错误监听函数)

(app.js/app.vue)
App({
    onLaunch: function() {//监听小程序初始化
		console.log('App Launch');
	},
	onShow: function() {//监听小程序显示
		console.log('App Show');
	},
	onHide: function() {//监听小程序隐藏
		console.log('App Hide');
	},
    onError: function(){//错误监听函数
        console.log('app onError' + msg)
    },
    globalData:{
        userInfo:null
    }
})

页面生命周期

从结构上看微信所有的页面都是存放在pages文件夹，页面代码中指定了初始数据，生命周期回调、事件处理函数等等

1. onLoad:首次进入页面加载时触发，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
2. onShow:加载完成后、后台切到前台或重新进入页面时触发
3. onReady:页面首次渲染完成时触发
4. onHide:从前台切到后台或进入其他页面触发
5. onUnload:页面卸载时触发
6. onPullDownRefresh:监听用户下拉动作(可以用来做下拉刷新功能)
7. onReachBottom:页面上拉触底事件的处理函数（用来做下拉加载更多功能）
8. onShareAppMessage:用户点击右上角转发
9. onPageScroll:页面滚动触发事件的处理函数
10. onResize:页面尺寸发生改变时触发。
11. onTabItemTap:当前是tab页时，点击tab时触发。
    

组件生命周期

组件支持的生命周期，与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期

1. beforeCreate:在实例初始化之后被调用详情
2. created:在实例创建完成后被立即调用详情
3. beforeMount: 在挂载开始之前被调用。详情
4. mounted:挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTick详情
5. beforeUpdate:数据更新时调用，发生在虚拟 DOM 打补丁之前详情
6. updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子详情
7. beforeDestroy:实例销毁之前调用。在这一步，实例仍然完全可用详情
8. destroyed: Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁详情

应用及页面生命周期的触发顺序

使用console.log验证它们的触发顺序

1. 首次进入小程序首先触发应用生命周期中onlaunch和onshow方法，其次触发页面生命周期中onLoad、onShow和onReady方法
   
2. 前台切换到后台时，先触发页面生命周期中onHide方法，再触发应用生命周期的onHide方法。
   
3. 后台切换到前台时，先触发应用生命周期中onShow方法，再触发页面生命周期的onShow方法。