uniapp的生命周期【uniapp 专题 03】

“

作者：坚果

公众号："大前端之旅"

华为云享专家，InfoQ签约作者，阿里云专家博主，51CTO博客首席体验官，开源项目GVA成员之一，专注于大前端技术的分享，包括Flutter,小程序,安卓，VUE，JavaScript。

”

看过我的安卓，鸿蒙，小程序，或者Flutter的都知道，接下来我要说什么，如果不出意外的话，当然是生命周期了，关于生命周期不外语有两个，一个是应用的生命周期，一个是页面的生命周期。

1.应用生命周期

uni-app 支持 onLaunch、onShow、onHide 等应用生命周期函数，

函数名	说明
onLaunch	当uni-app 初始化完成时触发（全局只触发一次）
onShow	当 uni-app 启动，或从后台进入前台显示
onHide	当 uni-app 从前台进入后台
onError	当 uni-app 报错时触发
onUniNViewMessage	对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯
onUnhandledRejection	对未处理的 Promise 拒绝事件监听函数（2.8.1+）
onPageNotFound	页面不存在监听函数
onThemeChange	监听系统主题变化

注意

应用生命周期仅可在App.vue中监听，在其它页面监听无效。

• onlaunch里进行页面跳转，如遇白屏报错，

  此时需要延迟做跳转处理。

  由于性能优化，HBuilderX 1.9.8和HBuilderX1.9.4的执行时机有所不同。一些在HBuilderX 1.9.4下无需延时的代码，在升级到HBuilderX 1.9.8报错。先请延迟处理。

  在HBuilderX 1.9.9+版本，已在底层修复此问题，自动兼容冲突，无需开发者再写延时代码。所以在此之前看一下你的HBuilderX的版本还是很有必有的。

• onPageNotFound 页面实际上已经打开了（比如通过分享卡片、小程序码）且发现页面不存在，才会触发，api 跳转不存在的页面不会触发（如 uni.navigateTo）

HBuilderX版本查看，在编辑器的关于哪儿

image-20220126010518931

2.页面生命周期

uni-app 支持 onLoad、onShow、onReady 等生命周期函数

函数名	说明	平台差异说明	最低版本
onInit	监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad	百度小程序	3.1.0+
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化	App、微信小程序
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新，参考示例
onReachBottom	页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项
onTabItemTap	点击 tab 时触发，参数为Object，具体见下方注意事项	微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App