javascript - 萌新求助，微信小程序如何删除页面栈？

Question

都知道微信小程序最多10个页面栈并提供了几个api reLaunch redirectTo

但是拼多多或者京东的商品详情页面里面点击“推荐商品”无限递归跳转商品详情页面，哪怕跳100层都没问题，然后点击左上角的返回，返回8层左右前面选的商品页面都没了，这种是怎么做到的呢，大佬们求救

我公司有个需求

首页-商品详情-（redirectTo确认-redirectTo支付-redirectTo支付结果）- 订单列表 - 订单详情

然后订单详情里面有个再次购买， 又会跳到商品详情重复这个流程 直到10层页面栈报错走不动了，我想实现京东或者拼多多的， 超出10层 前面的几个就自动删掉

Answer 1

返回已有的页面

Answer 2

微信小程序页面栈的管理确实是一个需要关注的问题，特别是当涉及到深度跳转和返回时。微信小程序本身限制了页面栈的最大深度为10层，超过这个深度将不再允许新的页面入栈。

对于你的需求，一个可行的解决方案是手动管理页面栈。你可以使用getCurrentPages()函数来获取当前页面栈的信息，然后根据需要删除一些页面。但请注意，getCurrentPages()并不提供直接删除页面栈中某个页面的功能，你只能通过跳转的方式来达到删除页面栈中页面的效果。

对于你的需求，一个可能的实现方式是：

1. 当页面栈深度超过某个阈值（例如8）时，你可以监听页面栈的变化，并在新的页面入栈前，先使用redirectTo或reLaunch跳转到一个中间页面，然后从那个中间页面再跳转到目标页面。这样，中间的几个页面就会被从页面栈中移除。
2. 对于你的具体流程，可以在每次进入新的商品详情页面或支付页面时，都检查当前页面栈的深度。如果深度超过阈值，就先跳转到中间页面，然后再从中间页面跳转到目标页面。

示例代码如下：

// 假设你的页面栈深度阈值为8const MAX_STACK_DEPTH = 8;// 在需要跳转的地方function navigateTo(url) {  const pages = getCurrentPages();  if (pages.length > MAX_STACK_DEPTH) {    // 如果页面栈深度超过阈值，先跳转到中间页面    wx.redirectTo({      url: '/path/to/middle/page'    });    // 然后再从中间页面跳转到目标页面    setTimeout(() => {      wx.redirectTo({        url: url      });    }, 500);  } else {    // 如果页面栈深度没有超过阈值，直接跳转到目标页面    wx.redirectTo({      url: url    });  }}

请注意，这只是一种可能的解决方案，具体的实现可能需要根据你的具体需求进行调整。另外，由于微信小程序页面栈的限制，这种方案并不能完全避免页面栈溢出的问题，但它可以在一定程度上缓解这个问题。如果你的应用需要频繁地进行深度跳转和返回，可能需要考虑其他的技术方案，例如使用Webview组件或者在服务器端进行页面管理。