uniapp生命周期

应用生命周期

uni-app支持如下应用生命周期函数

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

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

页面生命周期

uni-app支持如下页面生命周期函数

函数名	说明
onInit	监听页面初始化
onLoad	监听页面加载
onShow	监听页面显示
onReady	监听页面初次渲染完成
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新
onReachBottom	页面上拉触底事件的处理函数
onTabItemTap	点击 tab 时触发
onShareAppMessage	用户点击右上角分享
onPageScroll	监听页面滚动
onNavigationBarButtonTap	监听原生标题栏按钮点击事件
onBackPress	监听页面返回
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件
onShareTimeline	监听用户点击右上角转发到朋友圈
onAddToFavorites	监听用户点击右上角收藏

onInit使用注意

• 仅百度小程序基础库 3.260 以上支持 onInit 生命周期
• 其他版本或平台可以同时使用 onLoad 生命周期进行兼容，注意避免重复执行相同逻辑
• 不依赖页面传参的逻辑可以直接使用 created 生命周期替代

onReachBottom使用注意，可在pages.json里定义具体页面底部的触发距离onReachBottomDistance，比如设为50，那么滚动页面到距离底部50px时，就会触发onReachBottom事件。

如使用scroll-view导致页面没有滚动，则触底事件不会被触发。scroll-view滚动到底部的事件请参考scroll-view的文档

onPageScroll（监听滚动、滚动监听、滚动事件）参数说明：

属性	类型	说明
scrollTop	Number	页面在垂直方向已滚动的距离（单位px）

• onPageScroll里不要写交互复杂的js，比如频繁修改页面。因为这个生命周期是在渲染层触发的，在非h5端，js是在逻辑层执行的，两层之间通信是有损耗的。如果在滚动过程中，频发触发两层之间的数据交换，可能会造成卡顿。

onPageScroll : function(e) { //nvue暂不支持滚动监听，可用bindingx代替
	console.log("滚动距离为：" + e.scrollTop);
},

onTabItemTap返回的json对象说明：

属性	类型	说明
index	String	被点击tabItem的序号，从0开始
pagePath	String	被点击tabItem的页面路径
text	String	被点击tabItem的按钮文字

• onTabItemTap常用于点击当前tabitem，滚动或刷新当前页面。如果是点击不同的tabitem，一定会触发页面切换。
• 如果想在App端实现点击某个tabitem不跳转页面，不能使用onTabItemTap，可以使用plus.nativeObj放一个区块盖住原先的tabitem，并拦截点击事件。
• 支付宝小程序平台onTabItemTap表现为点击非当前tabitem后触发，因此不能用于实现点击返回顶部这种操作

onTabItemTap : function(e) {
  console.log(e);
  // e的返回格式为json对象： {"index":0,"text":"首页","pagePath":"pages/index/index"}
},

onNavigationBarButtonTap参数说明：

属性	类型	说明
index	Number	原生标题栏按钮数组的下标

onNavigationBarButtonTap : function (e) {
  console.log(e);
  // e的返回格式为json对象：{"text":"测试","index":0}
}

onBackPress回调参数对象说明：

属性	类型	说明
from	String	触发返回行为的来源：‘backbutton’——左上角导航栏按钮及安卓返回键；‘navigateBack’——uni.navigateBack() 方法。支付宝小程序端不支持返回此字段

export default {
  data() {
    return {};
  },
  onBackPress(options) {
    console.log('from:' + options.from)
  }
}

组件生命周期

uni-app组件支持的生命周期，与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期：

函数名	说明
beforeCreate	在实例初始化之前被调用
created	在实例创建完成后被立即调用
beforeMount	在挂载开始之前被调用
mounted	挂载到实例上去之后调用
beforeUpdate	数据更新时调用
updated	由于数据更改时调用
beforeDestroy	实例销毁之前调用
destroyed	实例销毁后调用