小程序生命周期有哪些，小程序生命周期函数执行顺序

简单说说小程序的生命周期?

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

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

应用生命周期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的时候调用