收藏别人的收藏：简单说说小程序的生命周期

在小程序中生命周期分为三大类

• 应用生命周期
• 页面生命周期
• 组件生命周期

应用生命周期

onLaunch(){
      console.log('onLaunch监听小程序初始化');
}
onShow() {  
    console.log('onShow监听小程序显示');
}
onHide() {
      console.log('onLaunch监听小程序隐藏');
}

页面生命周期

onLoad(options) {   
    console.log('onLoad监听页面加载');
}
onReady() {    
    console.log('onReady监听页面初次渲染完成');
}
onShow() {    
    console.log('onShow监听页面显示');
}
onHide() {    
    console.log('onHide监听页面隐藏');
}
onUnload(){
    console.log('onUnload监听页面卸载');
}

组件生命周期

Component({
    lifetimes: {
        created() {
            console.log('组件实例刚刚被创建时执行');        
    },
        attached() {
            console.log('组件实例进入页面节点树时执行');        
    },
        ready() {
            console.log('组件在视图层布局完成后执行');
    },
        moved() {
            console.log('组件实例被移动到节点树另一个位置时执行');        
    },
        detached() {
            console.log('组件实例被从页面节点树移除时执行');        
    },
        error() {
            console.log('组件方法抛出错误时执行');        
    }    
  },
    
    // 组件的生命周期比较特殊，也可以在外层直接书写, 不推荐
    attached() {      
    // 在组件实例进入页面节点树时执行    
    },    
    ...
})

执行的顺序

直接贴一张官方图来理解吧图片

小知识点 onLoad: 页面加载。

• 一个页面只会调用一次。
• 参数可以获取wx.navigateTo和wx.redirectTo及中的 query。

onShow: 页面显示

• 每次打开页面都会调用一次。

onReady: 页面初次渲染完成

• 一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
• 对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。

onHide: 页面隐藏

• 当navigateTo或底部tab切换时调用。

onUnload: 页面卸载

• 当redirectTo或navigateBack的时候调用