本帖最后由 项目部002 于 2021-10-28 16:31 编辑
9、 生命周期事件
什么是生命周期事件?
生命周期事件,指的是在特定的场合调用特定函数的事件。
APP全局生命周期事件:
函数名 |
说明 |
onLaunch |
当uni-app初始化完成时触发(全局只触发一次) |
onShow |
当uni-app启动,或从后台进入前台显示 |
onHide |
当uni-app从前台进入后台 |
onError |
当uni-app报错时触发 |
- 应用生命周期仅可在
App.vue 中监听,在其它页面监听无效。
- onlaunch里进行页面跳转,如遇白屏报错,请参考https://ask.dcloud.net.cn/article/35942
- onPageNotFound 页面实际上已经打开了(比如通过分享卡片、小程序码)且发现页面不存在,才会触发,api 跳转不存在的页面不会触发(如 uni.navigateTo)
页面生命周期事件:
针对单个页面的
函数名 |
说明 |
平台差异说明 |
最低版本 |
onLoad |
监听页面加载,其参数为上个页面传递的数据,参数类型为Object(用于页面传参),参考示例 |
|
|
onShow |
监听页面显示,页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面 |
|
|
onReady |
监听页面初次渲染。注意如果渲染速度快,会在页面进入动画完成前触发 |
|
|
onHide |
监听页面隐藏 |
|
|
onUnload |
监听页面卸载 |
|
|
onPullDownRefresh |
监听用户下拉动作,一般用于下拉刷新,参考示例 |
|
|
onReachBottom |
页面上拉触底事件的处理函数 |
|
|
onTabItemTap |
点击tab时触发,参数为Object,具体见下方注意事项 |
微信小程序、百度小程序、H5、App(自定义组件模式) |
|
onShareAppMessage |
用户点击右上角分享 |
微信小程序、百度小程序、字节跳动小程序、支付宝小程序 |
|
onPageScroll |
监听页面滚动,参数为Object |
|
|
onNavigationBarButtonTap |
监听原生标题栏按钮点击事件,参数为Object |
App、H5 |
|
onBackPress |
监听页面返回,返回event={from:backbutton、navigateBack},backbutton表示来源是左上角返回按钮或android返回键;navigateBack表示来源是uni.navigateBack;表示来源是uni.navigateBack;详细说明及使用:onBackPress详解 |
|
|
onNavigationBarSearchInputChanged |
监听原生标题栏搜索输入框输入内容变化事件 |
App、H5 |
1.6.0 |
onNavigationBarSearchInputConfirmed |
监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的”搜索“按钮时触发。 |
App、H5 |
1.6.0 |
onNavigationBarSearchInputClicked |
监听原生标题栏搜索输入框点击事件 |
App、H5 |
1.6.0 |
onShareTimeline |
监听用户点击右上角转发到朋友圈 |
微信小程序 |
2.8.1+ |
onAddToFavorites |
监听用户点击右上角收藏 |
微信小程序 |
|
组件生命周期事件:
函数名 |
说明 |
beforeCreate |
在实例初始化之后被调用 |
created |
在实例创建完成后被立即调用。 |
beforeMount |
在挂载开始之前被调用。 |
mounted |
挂载到实例上去之后调用。 |
beforeUpdate |
数据更新时调用,发生在虚拟 DOM 打补丁之前。 |
updated |
由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。 |
beforeDestroy |
实例销毁之前调用。在这一步,实例仍然完全可用。 |
destroyed |
Vue实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 |
本课参考资料:
https://uniapp.dcloud.io/vue-api?id=%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f
home.php?mod=space&uid=70631 课件下载、更多教程、遇到问题或者进行交流,请到: https://bbs.125.la/forum.php?mod=forumdisplay&fid=226 进行发帖交流
加QQ群:326576256
视频教程在线观看:https://www.eyuyan.tv/?mod=play&tvid=3232
从GIT关注:
https://gitee.com/JYtechnology/uniapp-learn
|