制作的小程序当点击弹出层超过10层时就会在页面怎么点也没有反应效果,就像手机卡死一样。(我一开始以为写的程序有死循环卡死了,怎么也检查不出来)
但是微信小程序中有特别说明:https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html
wx.navigateTo(Object object)
保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。
使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
如何查看页面栈数量
如果你用navigateTo做链接跳转,就会很快的成为10层以上。所以使用时一定要注意。
redirectTo、navigateBack、switchTab、reLaunch 这四个的使用环境是不一样的。
通过执行getCurrentPages()这个函数可以查看当前小程序中页面栈的数量。
最后参考了资料与别人的想法。
封装一个名叫linkJump的方法,然后页面上的链接跳转时全部要通过这个方法。这也就意味着:之前页面上使用<navigator>标签跳转的地方要全部换成js事件,否则就无法走linkJump方法了
/* url: 要跳转的链接,例如:pages/find/index?id=15 */
/* callback: 回调方法,做些特殊的事情 */
function 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/find/index', 'pages/user/index', 'pages/cart/index'] /* Tab页中的路径,请根据自己项目实际情况进行修改 */
const page = getCurrentPages()
const index = page.findIndex(item => item.route === pathname)
/* 如果是Tab中的链接,直接跳转 */
if (tabBarUrl.includes(pathname)) {
uni.switchTab({
url: url,
success: () => {
callback && callback()
}
})
return
}
if (index !== -1) { /* 在页面栈中找到时 */
const step = page.length - 1 - index
if (step === 0) {
uni.redirectTo({
url: url,
success: () => {
callback && callback()
}
})
} else {
callback && callback()
uni.navigateBack({ delta: step })
}
return
}
/* 否则就直接跳转 */
uni.navigateTo({
url: url,
success: () => {
callback && callback()
}
})
}
//使用方式
linkJump({
url: '/pages/merchant/info?id=' + this.locationId + '¤t=0', /* 商家信息页的url */
callback: () => {
this.$store.commit('setLinkJumpInfo', { location_id: this.locationId, current: 0 }) /* vuex中保存信息,用于在info页面接收并做出相应的处理。除此之外,还可以使用微信小程序自身的存储功能,比如:wx.getStorage() */
}
})
源码地址:https://github.com/yilingsj/uni-app-demo/tree/dev-pagestack-20201002
网上参考地址:http://www.yilingsj.com/xwzj/2020-10-02/uni-app-pagestack.html