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

Question

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

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

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

Answer 1

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

Answer 2

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

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

Answer 4

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

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 页面});

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