【小程序系列】navigateTo跳转超过10次点击失效

一.场景需求：从小程序A页面跳转到小程序B页面，然后B页面还可以跳到A页面。

例子：订单支付页跳转查看订单页，查看订单页也能跳转支付页，这样反复横跳。

uni.navigateTo({url: `xxx?id=${this.order_id}`});

二.官方文档

三.跳转失效原因

跳转失效原因：
1.uni.navigateTo只能跳转到非tabBar页面，tabBar导航栏页面只能用uni.switchTab方法跳转；
2.uni.navigateTo跳转的页面栈太多了，超过十层页面栈就会导致跳转失败。
3.uni.navigateTo跳转的页面路径没有在pages.json内配置

四. 解决办法1

解决办法：
1.尽量使用uni.redirectTo替换uni.navigateTo；因为uni.redirectTo会关闭当前页面，跳转到应用内的某个页面。
2.wx.navigateTo ，跳转超过10次怎么点不动的解决办法。

五. 解决办法2

解决办法：
1.封装common.js

let global = {
		linkJump({ url, callback }) {
	  if (!url) { return }
	  let newUrl = url
		// 过滤首位的 /
	  if (url[0] === '/') {
	    newUrl = url.substring(1)
	  }
	  const pathname = newUrl.split('?')[0]
	  const tabBarUrl = ['pages/index/index', 'pages/contact/contact', 'pages/goods/category/category', 'pages/goods/goodsList/goodsList', 'pages/scene/sceneList/sceneList', 'pages/brand/brandList/brandList', 'pages/article/articleList/articleList', 'pages/user/user', 'pages/login/login'] /* Tab页中的路径，请根据自己项目实际情况进行修改 */
	  const page = getCurrentPages()

	  // 如果是Tab中的链接，直接跳转
	  if (tabBarUrl.includes(pathname)) {
	    uni.switchTab({
	      url: pathname,
	      success: () => {
	        callback && callback()
	      }
	    })
	    return
	  }
		
		if(page.length > 7){
			uni.redirectTo({
				url: url,
				success: () => {
					callback && callback()
				}
			})
		} else {
		// 否则就直接跳转
			uni.navigateTo({
			  url: url,
			  success: () => {
			    callback && callback()
			  }
			})
		}
	},
}

2.main.js挂载

import global from './common/js/common.js'
Vue.prototype.global = global

3.使用

  this.global.linkJump({
        url: url,
        callback: () => {
          uni.setStorageSync(type, url)
	}
});

或者

  handleGoods(id) {
      this.global.linkJump({
        url: '/pages/goods/goodsDetail/goodsDetail?id=' + id,
        callback: () => {
          uni.setStorageSync('goodsDetail', '/pages/goods/goodsDetail/goodsDetail?id=' + id)
        }
      });
    },

六. 注意事项

uni.navigateTo一定会触发下一页的onLoad和onShow，且获取参数是在onLoad内