uniapp通过onHide监听小程序页面隐藏,以及获取页面栈的方式,实现点击小程序右上角按钮退出,再次进入小程序时,直接进入首页

文章描述了一种方法来处理小程序从特定页面进入并隐藏返回键后,再次进入时直接返回首页的逻辑。这涉及到在页面加载时设置状态管理标记位,然后在App.vue的onHide生命周期中检查这个标记位以及当前页面栈,如果满足条件(即从链接进入),则切换到小程序首页。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

问题:当通过链接或者其他方式进入小程序指定页面时,一般我们会控制页面返回键隐藏,如下图:

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

但是这样会存在一个问题,当我们再次进入小程序时,会一直停在当前页面,除非将小程序删除,再次搜索进入,才能进入小程序首页


需求

当从链接进入小程序指定页面时,从指定页面的右上角按钮返回,再次进入小程序,直接进入小程序首页
实现方法:
1、在指定页面通过链接进入小程序的,往状态管理存个标记位
在这里插入图片描述

		onLoad(option) {
			// 如果从链接进入,给状态管理存标记位'1', 从小程序直接进入的存标记位‘0’
			if (option && option.data) {
				this.$store.commit('SET_JUMPCHANNEL', '1');
				option = JSON.parse(option.data);
				// 隐藏小程序左上角返回键
				uni.hideHomeButton({
						success: function() {}
					});
			} else{
				this.$store.commit('SET_JUMPCHANNEL', '0');
				this.topCallBackIsShow = true;
			}
		},

2、使用onHide()小程序切后台行为
注意:
1、如果onHide()在某个页面中使用,会同时监听页面隐藏(小程序跳转下一页会触发onHide()生命周期)和小程序切后台2种行为
2、如果onHide()在App.vue中使用,只会监听小程序切后台行为

在这里插入图片描述

所以,在uniapp中,onHide()生命周期一定要写在App.vue中

在这里插入图片描述

实现方法:

1、在App.vue中,添加onHide()生命周期
2、取在页面中存储的链接方式跳转小程序的标记位
3、获取页面栈,让指定页面切后台后,再次进入时,直接进入首页
代码如下:

onHide() {
	// 取状态管理标记位
	let jumpChannel = this.$store.getters.jumpChannel;
	// 获取页面栈
	let pages = getCurrentPages();
	// 获取页面栈总页数
	let pagesCount = pages.length;
	// 判断当前页面栈的最后一页,也就是当前页的路由
	if (pages[pagesCount-1].route == 'proofDeposit/index/index') { //存款证明从链接进入返回时,再次进入home页
		// 判断标记位,是否是通过链接方式进入的
		if(jumpChannel == '1'){
			// 跳转小程序首页
			uni.switchTab({
				url: '/pages/home/home'
			});
		}
	} else if(pages[pagesCount-1].route == 'loanCalculator/index/index'){ //贷款计算机从链接进入返回时,再次进入home页
		if(jumpChannel == '1'){
			uni.switchTab({
				url: '/pages/home/home'
			});
		}
	} else if(pages[pagesCount-1].route == 'subPages/applyAccount/applyAccount'){ //综合开户从链接进入返回时,再次进入home页
		if(jumpChannel == '1'){
			uni.switchTab({
				url: '/pages/home/home'
			});
		}
	} 
},		

通过右上角返回键,在指定情况下的指定页面退出小程序后,再次从小程序收藏夹进入小程序,直接进入小程序首页

跳转成功

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

smileAgain-lg

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值