应用生命周期

onShow

当 uni-app 启动,或从后台进入前台显示

onLaunch

当uni-app 初始化完成时触发(全局只触发一次)

onHide

当 uni-app 从前台进入后台

onError

当 uni-app 报错时触发

onUniNViewMessage

对 nvue 页面发送的数据进行监听

onUnhandledRejection

对未处理的 Promise 拒绝事件监听函数(2.8.1+)

onPageNotFound

页面不存在监听函数

onThemeChange

监听系统主题变化

页面生命周期

onReady

监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发

onLoad

(监听页面加载)页面初始化执行一次

onShow

(监听页面显示)页面加载完成,可执行多次

onHide

(监听页面隐藏)页面隐藏(进入和后台),可执行多次

onUnload

监听页面卸载

onResize

监听窗口尺寸变化

onBackPress()

监听页面返回,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack ;详细说明及使用:onBackPress 详解(opens new window)。支付宝小程序只有真机能触发,只能监听非navigateBack引起的返回,不可阻止默认行为。
支持:app、H5、支付宝小程序

  1. onBackPress() {
  2. if(this.showMask) {
  3. this.showMask = false;
  4. return true; //返回true会阻止返回操作
  5. }
  6. },

onReachBottom

页面触底事件,可以用来实现上拉加载
页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据。具体见下方注意事项

onUnload

监听页面卸载

onPullDownRefresh

监听页面的下拉刷新。监听用户下拉动作,一般用于下拉刷新
下拉刷新后阻止下拉刷新样式继续显示

  1. // 停止下拉刷新
  2. uni.stopPullDownRefresh()

当页面中需要用到下拉刷新功能时,打开pages.json,在”globalStyle”里设置”enablePullDownRefresh”:true
image.png
此时所有页面都可以完成下拉刷新功能
如果想在单个页面中不执行刷新功能:在pages.json里单个页面上添加
image.png

onTabItemTap

点击 tabBar 时触发

onShareAppMessage

用户点击右上角分享
可以在转发时设置转发标题,路径和图片
image.png

  1. onShareAppMessage(e) {
  2. return {
  3. title: '视频名片',//转发标题
  4. path: `/pages/login/login?companyId=${getUserInfoByStorage().bindCompanyId}&employeeId=${getUserInfoByStorage().id}`
  5. }
  6. },

onPageScroll

监听页面滚动

onNavigationBarButtonTap

监听原生标题栏按钮点击事件

onNavigationBarSearchInputChanged

监听原生标题栏搜索输入框输入内容变化事件

onNavigationBarSearchInputConfirmed

监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发

onNavigationBarSearchInputClicked

监听原生标题栏搜索输入框点击事件

组件生命周期

beforeCreate

在实例初始化之后被调用

created

在实例创建完成后被立即调用

beforeMount

在挂载开始之前被调用
该钩子在服务器端渲染期间不被调用。
使用方法:在主页面中引入组件,在组件中写
image.png

mounted

挂载到实例上去之后调用(该钩子在服务器端渲染期间不被调用)

  1. 注意 mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,
  2. 可以在 mounted 内部使用vm.$nextTick
  1. mounted: function () {
  2. this.$nextTick(function () {
  3. // Code that will run only after the
  4. // entire view has been rendered
  5. })
  6. }

beforeUpdate

数据更新时调用,发生在虚拟 DOM 打补丁之前(该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务端进行)

updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子(该钩子在服务器端渲染期间不被调用)

beforeDestroy

实例销毁之前调用。在这一步,实例仍然完全可用(该钩子在服务器端渲染期间不被调用)

destroyed

Vue 实例销毁后调用(该钩子在服务器端渲染期间不被调用)