uniapp生命周期/路由跳转

本文详细介绍了uniapp的应用、页面和组件生命周期,包括onLaunch、onShow、onHide等关键事件,以及页面滚动、下拉刷新、分享等回调。同时,讲解了路由跳转的各种方式,如navigateTo、redirectTo、reLaunch等,帮助开发者理解uniapp的运行机制和页面导航。
摘要由CSDN通过智能技术生成

应用生命周期(仅可在App.vue中监听)

(1)onLaunch :当uni-app 初始化完成时触发(全局只触发一次)
App.vue里的onLaunch中option作用:获取用户进入小程序或退出小程序的场景值
在这里插入图片描述
在这里插入图片描述
(2)onShow :当 uni-app 启动,或从后台进入前台显示 //监听用户进入小程序
(3)onHide :当 uni-app 从前台进入后台 //监听用户离开小程序
(4)onError :当 uni-app 报错时触发
(5)onUniNViewMessage :对 nvue 页面发送的数据进行监听

页面生命周期(在页面中添加)

(1)onLoad (监听页面加载)
(2)onShow (监听页面显示)
(3)onReady (监听页面初次渲染完成)
(4)onHide (监听页面隐藏)

在这里插入图片描述
在这里插入图片描述
(5)onUnload :监听页面卸载
(6)onResize :监听窗口尺寸变化
(7)onPullDownRefresh :监听用户下拉动作,一般用于下拉刷新

在这里插入图片描述
在这里插入图片描述

当页面中需要用到下拉刷新功能时,打开pages.json,在"globalStyle"里设置"enablePullDownRefresh":true
在这里插入图片描述
此时所有页面都可以完成下拉刷新功能
如果想单个页面不能执行刷新功能:在pages.json里单个页面上添加
在这里插入图片描述
(8)onReachBottom :页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据
(9)onTabItemTap :点击 tabBar 时触发
(10)onShareAppMessage :用户点击右上角分享
可在转发时设置转发标题,路径和图片

在这里插入图片描述
在这里插入图片描述
ÿ

uniapp中,可以使用uni.addInterceptor方法来监听路由跳转。具体实现步骤如下: 1. 在App.vue文件的onLaunch方法中添加监听代码。可以参考引用\[1\]中的代码示例。在该方法中,使用uni.addInterceptor方法来拦截路由跳转方法,比如navigateTo、redirectTo、reLaunch、switchTab和navigateBack等。在success回调函数中,调用watchRouter方法来处理路由跳转事件。 2. 在watchRouter方法中,可以编写自己的逻辑来处理路由跳转事件。可以参考引用\[1\]和引用\[2\]中的代码示例。 需要注意的是,监听路由跳转变化的代码应该写在onLaunch方法中,以确保在uni-app初始化完成时触发。同时,也可以在onShow和onHide方法中监听用户进入和离开小程序的事件。具体可以参考引用\[3\]中的说明。 总结起来,要在uniapp中监听路由跳转,可以使用uni.addInterceptor方法,并在App.vue文件的onLaunch方法中添加相应的拦截器来实现。 #### 引用[.reference_title] - *1* [uniapp 监听路由跳转](https://blog.csdn.net/weixin_43743175/article/details/127313441)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [uniapp切换路由监听导航跳转(在监听网络状态时非常常用)](https://blog.csdn.net/weixin_53339757/article/details/128475865)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [uniapp-生命周期/路由跳转](https://blog.csdn.net/zxc472504515/article/details/125429863)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值