前言

生命周期的概念

微信小程序生命周期

一、应用级生命周期

onLaunch: 初始化小程序完成时触发，且全局只触发一次； onShow: 小程序初始化完成（启动）或从后台切换到前台显示时触发； onHide: 小程序从前台切换到后台隐藏时触发（如切换到其他app中）； onError: 小程序发生脚本错误或者api调用失败的时候，会触发 onError 并带上错误信息； onPageNotFound：小程序要打开的页面不存在的时候触发； onUnhandledRejection：小程序有未处理的 Promise 拒绝的时候触发； onThemeChange：系统切换主题的时候触发。

下面来看一下具体的几个常用的应用级生命周期函数的示例：

//app.js 文件

App({

onLaunch:function(){ // 监听小程序的初始化

console.log("onLaunch");

}，

onShow:function(){ // 监听小程序的显示

console.log("onShow");

}，

onHide:function(){ // 监听小程序的隐藏

console.log("onHide");

}，

onError:function(message){ // 错误监听的函数

console.log("onError"+ message);

}，

globalData: {

userInfo:null

}

})

二、页面级生命周期

onLoad：进入页面加载时触发，且只执行一次； onShow：页面展示时候，也就是加载完成后、后台切到前台或重新进入页面时触发，可以执行多次； onReady：页面首次渲染完成的时候触发，且只执行一次； onHide：页面从前台切到后台或进入其他页面触发； onUnload：页面卸载时触发；

下面来看一下具体的几个常用的页面级生命周期函数的示例：

//监听页面加载

onLoad:function (){

console.log(onLoad")

}，

//监听页面初次渲染完成

onReady:function() {

console.log(onReady)

}，

//监听页面显示

onShow:function () {

console.log(onShow)

}，

//监听页面隐藏

onHide: function () {

console.log(onHide)

},

//监听页面卸载

onUnload:function () {

console.log(onUnload)

}，

注意：当切换页面需要多次渲染数据改变状态的时候，可以在onShow中使用；当只需初始化一次的时候，可在onLoad或者onReady中使用；当需要清除定时器时，可在onUnload中使用。

页面生命周期执行的顺序是：onLoad --> onShow --> onReady --> onHide。

三、组件的生命周期

created：组件实例刚刚被创建好的时候触发； attached：当组件完全初始化完毕、进入页面节点树之后被触发； ready：当组件在视图层布局完成之后被触发； moved：在组件实例被移动到节点树另一个位置的时候被触发； detached：在组件离开页面节点树之后被触发； error：每当组件方法中抛出错误的时候被触发。

注意：生命周期的方法可以直接定义在 Component 构造器的第一级参数中。

四、小结

(App)onLaunch --> (App)onShow --> (Page)onLoad --> (Page)onShow --> (Page)onReady。

2、当进入下一个页面的生命周期执行次序

(当前页面)onHide --> (下一个页面)onLoad --> (下一个页面)onShow --> (下一个页面)onReady。

3、当返回上一个页面的生命周期执行次序

(当前页面)onUnload --> (上一个页面)onShow。

4、当离开小程序的生命周期执行次序

(App)onHide。

5、当再次进入小程序的生命周期执行次序

最后