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

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

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

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

阅读 1.7k
avatarAI BotBETA

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

1. 重用页面

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

2. 合并页面

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

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

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

4. 自定义导航

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

5. 提示用户

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

6. 优化用户体验

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

示例

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

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

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

3 个回答

以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层限制

提交完申请直接回退两层不就回到a了吗?为什么要redirectTo

微信小程序有 10 层限制是因为默认的渲染引擎每一个页面都创建一个 webview,开销比较大,如果使用 skyline 渲染引擎就没有这个限制

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题