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

这篇具有很好参考价值的文章主要介绍了uniapp通过onHide监听小程序页面隐藏，以及获取页面栈的方式，实现点击小程序右上角按钮退出，再次进入小程序时，直接进入首页。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

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

需求

当从链接进入小程序指定页面时，从指定页面的右上角按钮返回，再次进入小程序，直接进入小程序首页
实现方法：
1、在指定页面通过链接进入小程序的，往状态管理存个标记位
uniapp通过onHide监听小程序页面隐藏，以及获取页面栈的方式，实现点击小程序右上角按钮退出，再次进入小程序时，直接进入首页,小程序,uni-app,微信小程序

		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'
			});
		}
	} 
},