关于微信小程序页面无法跳转的问题

一、微信小程序跳转的API

1、wx.navigateTo(obj)保留当前页面,跳转到应用内的某个页面

wx.navigateTo({ url: 'test?id=1' })

2、wx.redirectTo(OBJECT)关闭当前页面,跳转到应用内的某个页面。

wx.redirectTo({ url: 'test?id=1' })

3、wx.navigateBack(OBJECT)关闭当前页面,返回上一页面或多级页面

wx.navigateBack({ delta: 2 })

4、wx.switchTab(OBJECT)跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

wx.switchTab({ url: '/index' })

5、wx.reLaunch(OBJECT)关闭所有页面,打开到应用内的某个页面。

wx.reLaunch({ url: 'test?id=1' })

二、出现不能跳转的情况,可能有这是三种

要跳转的路径是不是在app.js里注册过,或者路径写错了

要跳转的路径是否位于TabBar中,如果是的话,要使用wx.switchTab 来跳转界面

页面路径最多只能是10层,即是页面栈中的元素不能超过10个,

三、举例说明

现有A、B、C、D四个页面。A为最先打开的页面,小程序启动后,在A页面中通过navigateTo跳转到B页面,然后在B页面再通过navigateTo跳转到C页面。此时页面栈中包含三个元素,分别为A、B、C三个页面
现在再通过redirectTo跳转到D页面,redirectTo会将当前页面出栈,即将C页面出栈,再将D页面入栈这时页面栈中的元素则变为A、B、D
此时如果在 D 页面调用 navigateBack,会发现不是返回 C 页面,而是返回到了 B 页面。因为 navigateBack 将栈中最后一个元素(D 页面)出栈后,页面栈的内容则变为 A、B。页面栈最后一个元素为 B 页面,即当前显示的会是 B 页面。

综上所述「页面路径」限制为十层,其实就是规定了页面栈中的元素不能超过十个。页面栈中元素达到十个后,就不能增加了。

navigateTo 不会将旧页面出栈,因此通过 navigateTo 跳转后,页面栈中元素个数会加一,因此在页面栈中元素个数达到 10之后再调用 navigateTo 会失败,出现无法跳转的错误。

而 redirectTo 会在将旧页面出栈后,再将新页面入栈,因此通过 redirectTo 跳转,页面栈中元素个数会保持不变,因此即使在页面栈中元素达到 5 个之后再调用 redirectTo 也能成功跳转。

四、总结

小程序上线以后就发现了这个问题,点击按钮没有反应,页面跳转不了,看了代码没有什么问题,猜测原因可能就是页面栈中的元素达到了上限,然后就开始根据猜测操作,发现一直从文章列表进到文章详情,在点击重新编辑在保存,保存成功之后跳转到文章列表。但是上个文章列表并没有出栈。就这个一直重新编辑保存就会一直往页面栈里放元素,直到在点击跳转页面失效。

我是在重新编辑完点击保存之后用wx.navigateBack({delta: 2})

写完这篇文章发现好像没有判断新建的时候也让返回了2,直接返回到了首页。

猜你喜欢

转载自blog.csdn.net/weixin_34396103/article/details/87638558