页面加载过程:加载="显示="加载完成="页面隐藏="页面卸载
触发页面生命周期:onLoad:监听页面加载=(onshow:监听页面显示=) onReady:监听页面首次渲染完成=) onHide:监听页面
uni-app支持的APP应用程序的生命周期
函数名称
说明
onLaunch
uni-app初始化完成时触发。 全局只触发一次
现场表演
当uni-app启动或从后台进入前台显示时
onHide
当uni-app从前台进入后台时
onError
uni-app报告错误时触发
onUniNViewMessage
可以监听从nvue页面发送的数据,并参考vue将其通信到vue
onUnhandledRejection
拒绝未处理的Promise的事件侦听函数(2.8.1) )。
onPageNotFound
页面上没有监听函数
onThemeChange
拦截系统主题的变化
注意:
应用生命周期仅可在App.vue中全局监听,其他页面上的拦截无效。
在onlaunch中进行页面跳转,白色画面发生错误时,请参照
uni-app支持的页面生命周期函数
函数名称
说明
平台差异说明
onLoad
监听以上一页传递的数据为参数的页面加载。 参数类型为Object (用于页面引用)。 请参考示例
现场表演
拦截页面显示。 每次页面显示在屏幕上时触发。 包括从下级页面返回以暴露当前页面
onReady
监听页面的首次渲染已完成。 请注意,如果渲染速度快,则会在页面进入动画之前触发
onHide
监听页面隐藏
未加载
接收页面卸载
不确定性
监听窗口
尺寸变化5+App、微信小程序
onPullDownRefresh
监听用户下拉动作,一般用于下拉刷新,参考示例
onReachBottom
页面上拉触底事件的处理函数
onTabItemTap
点击 tab 时触发,参数为Object
微信小程序、百度小程序、H5、5+App(自定义组件模式)
onShareAppMessage
用户点击右上角分享
微信小程序、百度小程序、头条小程序、支付宝小程序
onPageScroll
监听页面滚动,参数为Object
5+ App、H5
onNavigationBarButtonTap
监听原生标题栏按钮点击事件,参数为Object
onBackPress
监听页面返回,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack ;详细说明及使用:onBackPress 详解
5+ App、H5
onNavigationBarSearchInputChanged
监听原生标题栏搜索输入框输入内容变化事件
5+ App、H5
onNavigationBarSearchInputConfirmed
监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发。
5+ App、H5
onNavigationBarSearchInputClicked
监听原生标题栏搜索输入框点击事件
5+ App、H5
注意:
页面生命周期仅在page页面有效,而单独封装的组件中【页面周期无效】,但是Vue
的生命周期依然有效 【Vue的生命周期在任何地方都是有效的】
推荐使用uni-app里面的onReady 代替 vue 里面的 mounted
推荐使用uni-app里面的onLoad 代替 vue 里面的 created
uni-app组件生命周期函数
函数名
说明
平台差异说明
beforeCreate
在实例初始化之后被调用
created
在实例创建完成后被立即调用。
beforeMount
在挂载开始之前被调用。
mounted
挂载到实例上去之后调用。注意:此处并不能确定子组件被全部挂载,如果需要子组件完全挂载之后在执行操作可以使用。
beforeUpdate
数据更新时调用,发生在虚拟 DOM 打补丁之前
仅H5平台支持
updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
仅H5平台支持
beforeDestroy
实例销毁之前调用。在这一步,实例仍然完全可用
destroyed
Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
到此 uni-app 应用生命周期、页面生命周期、组件生命周期的区别介绍完成。