微信小程序页面栈深度限制：如何像拼多多京东一样实现深度跳转且不丢失页面？

微信小程序的页面栈深度限制为10层，这意味着当页面栈中的页面数量达到10层时，再调用 wx.navigateTo 进行页面跳转时会失败。拼多多、京东等小程序通过一些技巧实现了深度跳转且不丢失页面的效果，以下是几种常见的解决方案：

1. 使用 wx.redirectTo 替代 wx.navigateTo

wx.redirectTo 会关闭当前页面并跳转到新页面，不会增加页面栈的深度。虽然这种方式不会增加页面栈深度，但会丢失当前页面的状态。

适用场景：适用于不需要保留当前页面状态的场景。

代码示例：

wx.redirectTo({
  url: '/pages/newPage/newPage'
});

2. 使用 wx.reLaunch 重置页面栈

wx.reLaunch 会关闭所有页面并跳转到新页面，页面栈中只保留新页面。这种方式可以避免页面栈过深的问题，但会丢失所有页面的状态。

适用场景：适用于需要重置页面栈的场景，如从首页跳转到某个深层页面。

代码示例：

wx.reLaunch({
  url: '/pages/newPage/newPage'
});

3. 使用 wx.switchTab 跳转到 Tab 页面

Tab 页面不会增加页面栈深度，因此可以通过跳转到 Tab 页面来减少页面栈深度。

适用场景：适用于需要跳转到 Tab 页面的场景。

代码示例：

wx.switchTab({
  url: '/pages/tabPage/tabPage'
});

4. 使用自定义路由管理

通过自定义路由管理，可以在页面栈达到限制时，手动关闭一些页面，然后再进行跳转。这种方式需要维护一个全局的路由栈，并在跳转时进行判断和处理。

适用场景：适用于需要精细控制页面栈的场景。

代码示例：

// 全局维护一个路由栈
const routeStack = [];

function navigateTo(url) {
  if (routeStack.length >= 10) {
    // 关闭最早打开的页面
    const firstPage = routeStack.shift();
    wx.navigateBack({
      delta: 1,
      success: () => {
        wx.navigateTo({
          url: url,
          success: () => {
            routeStack.push(url);
          }
        });
      }
    });
  } else {
    wx.navigateTo({
      url: url,
      success: () => {
        routeStack.push(url);
      }
    });
  }
}

5. 使用 getCurrentPages 获取当前页面栈

通过 getCurrentPages 方法可以获取当前页面栈的实例，然后根据页面栈的深度来决定是否进行跳转或关闭页面。

适用场景：适用于需要动态判断页面栈深度的场景。

代码示例：

const pages = getCurrentPages();
if (pages.length >= 10) {
  // 关闭最早打开的页面
  wx.navigateBack({
    delta: 1,
    success: () => {
      wx.navigateTo({
        url: '/pages/newPage/newPage'
      });
    }
  });
} else {
  wx.navigateTo({
    url: '/pages/newPage/newPage'
  });
}

6. 使用 wx.navigateBack 结合 wx.navigateTo

在某些场景下，可以先使用 wx.navigateBack 返回到某个页面，然后再使用 wx.navigateTo 跳转到新页面。这种方式可以减少页面栈深度。

适用场景：适用于需要返回到某个页面后再跳转的场景。

代码示例：

wx.navigateBack({
  delta: 1,
  success: () => {
    wx.navigateTo({
      url: '/pages/newPage/newPage'
    });
  }
});

7. 使用 wx.setStorageSync 保存页面状态

在跳转前，可以使用 wx.setStorageSync 保存当前页面的状态，然后在返回时恢复页面状态。这种方式可以避免页面状态的丢失。

适用场景：适用于需要保存页面状态的场景。

代码示例：

// 保存页面状态
wx.setStorageSync('pageState', { key: 'value' });

// 跳转到新页面
wx.navigateTo({
  url: '/pages/newPage/newPage'
});

// 返回时恢复页面状态
const pageState = wx.getStorageSync('pageState');

总结

拼多多、京东等小程序通过结合多种方式（如自定义路由管理、保存页面状态、动态调整页面栈等）来实现深度跳转且不丢失页面的效果。具体选择哪种方式，需要根据实际业务场景和需求来决定。