uniapp monitors the hiding of the applet page through onHide, and obtains the page stack, so that you can click the button in the upper right corner of the applet to exit, and when you enter the applet again, you will directly enter the home page

Question: When entering the specified page of the applet through a link or other means, generally we will control the page back button to hide, as shown in the figure below:

insert image description here
insert image description here

But there will be a problem in this way. When we enter the applet again, we will always stop at the current page. Unless we delete the applet and search again, we can enter the homepage of the applet.


need

When entering the specified page of the applet from the link, press the button on the upper right corner of the specified page to return, enter the applet again, and directly enter the homepage of the applet
Implementation method:
1. If you enter the applet through a link on the specified page, save a flag in the state management
insert image description here

		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. Use the onHide() applet to cut the background behavior
Note:
1. If onHide() is used in a certain page, it will monitor the page hiding at the same time (the onHide() life cycle will be triggered when the applet jumps to the next page) and the applet cuts to the background. 2. If onHide(
) Used in App.vue, it will only monitor the background behavior of the applet

insert image description here

Therefore, in uniapp, the onHide() life cycle must be written in App.vue

insert image description here

Implementation:

1. In App.vue, add onHide() life cycle
2. Take the link stored in the page to jump to the flag of the applet
3. Get the page stack, let the specified page switch to the background, and enter directly when entering again The home page
code is as follows:

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

After exiting the applet on the specified page in the specified situation through the back button in the upper right corner, enter the applet again from the favorites of the applet, and directly enter the homepage of the applet

Jump successfully

insert image description here

Guess you like

Origin blog.csdn.net/m0_47791238/article/details/130639907