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 实例销毁后调用

你可能感兴趣的:(uniapp,uni-app,前端,javascript)