请问大家一个小程序跳转路由栈超过10层的比较好的解决方案？

发布于
2024-04-18 湖北

我有a页面是个退货列表页面，通过wx.navigateTo点击跳转到b页面 b页面是个退货申请页面，

b页面有个选择退货商品的按钮是需要通过wx.navigateTo跳转新页面c去选商品的，然后提交申请成功后，我用wx.redirectTo回到a页面，
这一套下去没什么问题，有问题的事，当我反复进行这个操作，在第六遍的时候，就会出现在b页面选择退货商品时，无法通过wx.navigateTo跳转新页面c去选商品，点了也没反应，

请问这种限制10层路由栈的情况，应该怎么解决比较好？又不能影响用户正常返回操作

小程序前端 javascript vue.js react

阅读 1.7k

AI BotBETA

小程序中路由栈深度的限制确实可能会带来一些困扰。针对你所描述的问题，有几种可能的解决方案：

1. 重用页面

理由：避免频繁创建新页面实例，减少路由栈深度。
实现：使用 wx.redirectTo 代替 wx.navigateTo。wx.redirectTo 会关闭当前页面，跳转到应用内的某个页面，这样就不会增加路由栈的深度。

2. 合并页面

理由：将多个页面合并为一个页面，减少跳转次数。
实现：将 b 页面和 c 页面合并为一个页面，通过页面内导航或组件切换来展示不同内容。

3. 使用页面生命周期函数

理由：通过页面生命周期函数，在页面卸载前清理数据，避免内存泄漏。
实现：在页面的 onUnload 或 onHide 生命周期函数中，清理页面数据，确保在重新进入页面时能够正常加载。

4. 自定义导航

理由：完全自定义导航流程，不受小程序路由栈限制。
实现：使用自定义组件和视图层渲染来模拟页面跳转，而不是使用小程序的 wx.navigateTo、wx.redirectTo 等方法。

5. 提示用户

理由：在达到路由栈深度限制时，提示用户返回上一页面或减少连续操作。
实现：在关键位置添加逻辑判断，当用户尝试进行可能导致路由栈过深的操作时，弹出提示框，引导用户正确操作。

6. 优化用户体验

理由：避免不必要的跳转，优化用户操作流程。
实现：重新评估页面结构和交互设计，减少不必要的页面跳转，提升用户体验。

示例

假设你选择重用页面，那么可以在 b 页面选择退货商品时，使用 wx.redirectTo 回到 a 页面，而不是使用 wx.navigateTo 跳转到新页面 c。

// b 页面选择退货商品时
wx.redirectTo({
  url: '/pages/a/a' // 回到 a 页面
});

选择哪种解决方案取决于你的具体需求和用户体验考量。在实际应用中，可能需要结合多种方法来达到最佳效果。

3 个回答

得票最新

along

2.9k1329

发布于
2024-04-18 安徽

更新于
2024-04-18

以uniapp为例，对navigateTo方法进行二次封装,伪代码如下

最好的办法还是在产品需求上给优化掉


function navigateTo (url, params) {
    const length = getCurrentPages().length;

    if(length >= 10) {
        uni.redirectTo({
            url: url
        })
    } else {
        uni.navigateTo({
            url: url
        })
    }
}

wx.navigateTo ，跳转超过10次怎么点不动的解决办法。
小程序突破10层路由方案
 微信小程序页面栈超过【10层】之后无法打开其他页面原因 _
解决小程序路由超过10层限制