本文转载自微信公众号《JS每日一问》,作者慧慧。转载本文请联系JS每日一问公众号。1、与vue、react框架相同的是,微信小程序框架也是有生命周期的,本质上就是一堆功能小程序,在特定的周期内会被执行。生命周期主要分为三部分:应用生命周期页面生命循环组件的生命周期应用的生命周期app.js中调用了小程序的生命周期函数。App(Object)函数用于注册小程序,指定小程序的生命周期。回调页面的生命周期页面生命周期函数就是每次进入/切换新页面都会调用的生命周期函数。它还用于通过App(Object)函数注册页面组件的生命周期。组件的生命周期是指组件自身的一些功能,这些功能会在特定的时间点或者遇到一些特殊的框架事件时自动触发,组件注册时通过Component(Object)的onShow小程序触发启动,或者当小程序从后台进入前台显示时触发onHide。onError当小程序从前台进入后台时触发。onPageNotFound当小程序遇到脚本错误或API调用错误时触发。onUnhandledRejection()当小程序有未处理的Promise拒绝时触发onThemeChange当系统切换主题时触发lifecycle生命周期描述函数onLoad生命周期回调——监听页面加载,发送请求获取数据onShow生命周期回调——监听页面显示请求数据onReady生命周期回调——监听页面初始渲染完成获取页面元素(少用)onHide生命周期回调——监听页面隐藏终止任务,如定时器或播放音乐onUnload生命周期回调—监控页面卸载终止任务组件生命周期生命周期描述创建生命周期回调—监控页面加载附加生命周期回调—监控页面显示就绪生命周期回调—监控页面初始渲染completedmoved生命周期回调——监控页面hiddendetached生命周期回调——监控页面unloaderror每当组件方法抛出错误时执行注意:当组件实例刚创建时,会触发创建的生命周期。这时,组件数据this。数据在组件中t是构造函数中定义的数据。此时无法调用setData。组件完全初始化并进入页面节点树后,触发附加生命周期。此时this.data已经初始化为组件当前值。这个生命周期非常有用,大部分的初始化工作都可以在这个时候完成。组件离开页面节点树后,触发detach生命周期。退出页面时,如果组件还在页面节点树中,就会触发detached,还有一些特殊的生命周期,与组件没有强关联,但有时需要通知组件,让组件可以内部对其进行处理,这样的生命周期称为“组件所在页面的生命周期”,定义在pageLifetimes定义部分,如下:isdisplayedhide组件所在页面隐藏时执行代码:Component({pageLifetimes:{show:function(){//页面显示},hide:function(){//页面隐藏},}})3.执行过程应该根据执行过程的生命周期:账户应该开一次?程序,触发onLaunch(全局只触发一次)程序初始化完成后,触发onShow方法,监听程序显示,程序从前台进入后台,触发onHide方法,程序从后台进入前台显示,并触发onShow?方法程序在后台运行一段时间,或者系统资源占用过多,就会被破坏。生命周期的执行过程:程序注册完成后,加载程序,触发onLoad。该方法在程序加载后触发。onShow方法,显示设备。一旦设备显示出来,就会触发onReady方法来渲染选中的元素和样式。该方法只会在当前程序在后台运行或跳转到其他方法时被调用一次。,当程序从后台进入前台或重新进入程序时触发onHide方法,当使用重定向方法wx.redirectTo()时触发onShow方法或关闭当前程序返回上一个程序wx.navigateBack(),触发onUnload当还有应用生命周期和页面周期时,相关执行顺序如下:打开小程序:(App)onLaunch-->(App)onShow-->(Pages)onLoad-->(pages)onShow-->(pages)onRead转到下一个页面:(Pages)onHide-->(Next)onLoad-->(Next)onShow-->(Next)onReady返回上一页:(curr)onUnload-->(pre)onShow离开小程序:(App)OnHide再次进入:小程序未被销毁-->(App)onShow(执行上述序列),小程序被销毁,(App)onLaunch重新开始执行。参考https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html#onLaunch-Object-objecthttps://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onLoad-Object-queryhttps://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html#onLaunch-Object-object
