WeChat applet solves the problem that the jump page cannot exceed 10 layers

If you use the wx.navigateTo or navigator tag to jump to the WeChat applet page, you can only jump up to 10 times
(more than 10 times, no matter how you click), this is not conducive to the user experience. Then let's solve this problem (whispering Bibi).

You can use the following two methods to solve it:

method one

Use the wx.redirectTo method instead of the wx.navigateTo method to jump to the page. The wx.redirectTo
method can close the current page and jump to a page in the application, so it can avoid the problem of too deep page hierarchy. But note that,Using the wx.redirectTo method will cause the user to be unable to return to the previous page through the back button in the upper left corner

Method Two:

Use the wx.switchTab method to jump to the bottom Tab page. The bottom tab page is not included in the page hierarchy, so the problem of too deep page hierarchy can be avoided. However, it should be noted that the number of tab pages at the bottom is limited, and it is generally used to display common functions or main content, and is not suitable for displaying secondary content or auxiliary functions.

Let’s first look at the 5 routing methods of the Mini Program.

Portal
insert image description here

Ideas: (the first method is used here)

Use getCurrentPages() to get the page stack (that is, the page array using navigateTo), and then judge whether the current jump path is in the page stack. If so, use wx.navigateBack to back up, and the back delta is the length of the page stack- The subscript -1 of the repeated address in the page stack; if no repeated address is found in the page stack, you can use wx.navigateTo to jump directly after judging whether the page stack exceeds 10. wx.redirectTo jump.

link(){
    
    
	let url=***;//需要跳转的地址
	let pages=getCurrentPages();//页面栈
	let is_link=1;//判断getCurrentPages是否有重复的地址
    let iindex='';//获取重复地址的下标
    for(let i=0;i<pages.length;i++){
    
    
		let is_url="/"+pages[i].route // 拼接“/”成为一个绝对路径
		if(url==is_url){
    
    
			is_link++;
			iindex=i;
		}
	}
	//判断 地址有重复的话 就使用后退 delta后退多级
	if(is_link==2){
    
    
		wx.navigateBack({
    
    
            delta:pages.length-iindex-1
        })
	}else{
    
    
		//getCurrentPages没到达10级就可以使用navigateTo跳转  
		if(pages.length!=10){
    
    
			wx.navigateTo({
    
    
              url: url
            })		
		}else{
    
    
			//有超过的话 使用redirectTo 关闭当前页进行跳转
            wx.redirectTo({
    
    
              url: url
            })	
		}
	}
}

Of course, you can also directly replace the jump method without encapsulating the function.

// 原来的代码
wx.navigateTo({
    
    
  url: '/pages/pageA/pageA'
})

// 十层以上的页面使用 wx.redirectTo 方法的代码
wx.redirectTo({
    
    
  url: '/pages/pageA/pageA'
})

If anyone has a better way of thinking, please share with each other! Many thanks!

Guess you like

Origin blog.csdn.net/qq_47272950/article/details/130868288