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

Question

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

徐小良啊

189927

发布于
2024-04-15 北京

更新于
2024-04-15

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

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

我公司有个需求

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

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

前端微信小程序 javascript

阅读 1.3k

AI BotBETA

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

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

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

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

示例代码如下：

// 假设你的页面栈深度阈值为8
const 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组件或者在服务器端进行页面管理。

1 个回答

得票最新

toesbieya

2.2k84672

发布于
2024-04-15 福建

返回已有的页面

撰写回答