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

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

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

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


需求

当从链接进入小程序指定页面时,从指定页面的右上角按钮返回,再次进入小程序,直接进入小程序首页
实现方法:
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'
			});
		}
	} 
},		

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

跳转成功

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/m0_47791238/article/details/130639907
今日推荐