微信小程序navigateTo和redirectTo交替使用报错navigateTo:fail webview count limit exceed

前言

小程序的头部默认使用 wx.navigateBack 关闭当前页面，返回上一页面或多级页面。然后在自定义小程序头部后，返回按钮可以调用其他API。当 wx.navigateTo 和 wx.redirectTo 交替反复使用时，报错 navigateTo:fail webview count limit exceed。

您可以点击小程序代码片段 minicode-27

步骤

在小程序用 a 页面使用 wx.navigateTo 跳转到 b 页面，然后在 b 页面使用 wx.redirectTo 返回 a 页面。如此交替切换页面，最终页面栈超过 10 个，页面报错 navigateTo:fail webview count limit exceed。

代码

• 首页

// index.js
Page({
  onNavigateTo () {
    console.warn('通过 navigateTo 进入 redirectPage 页面');
    wx.navigateTo({
      url: '/redirectPage/redirectPage'
    })
  },
  onShow () {
    const pages = [...getCurrentPages()]
    console.log('index页面中，页面栈总数', pages.length, pages)
  },
})

<!-- index.wxml -->
<button type="primary" bindtap="onNavigateTo">通过 navigateTo 进入 redirectPage 页面</button>

• redirectPage页面

// redirectPage.js
Component({
  pageLifetimes: {
    show: function () {
      const pages = [...getCurrentPages()]
      console.log('redirectPage页面中，页面栈总数', pages.length, pages)
    },
  },
  methods: {
    toIndex () {
      console.warn('通过 redirectTo 返回 首页');
      wx.redirectTo({
        url: '/index/index'
      })
    }
  },
})

<!-- redirectPage.wxml -->
<view>
  redirectPage页面
</view>
<button type="primary" bindtap="toIndex">返回首页</button>

报错原因

wx.navigateTo 保留当前页面，跳转到应用内的某个页面。
wx.redirectTo 关闭当前页面，跳转到应用内的某个页面。

• 初始化：第一次打开首页，页面栈为 1，只包含首页。
• 步骤1：从首页 navigateTo 到 redirectPage页面，页面栈为2。
• 步骤2：再从 redirectPage页面，通过 redirectTo 返回首页，页面栈为2。
• 重复步骤1 和步骤2。
• …
  最后页面栈有10层，已经无法跳转页面，并且报错 navigateTo:fail webview count limit exceed。

建议

• wx.navigateTo 配合 wx.navigateBack 使用
• 小程序从 a 页面 -> b 页面 -> c 页面 -> d -> 页面 -> e 页面 -> f 页面等，页面层级较深时，当页面 d既可以返回页面 a，又可以返回页面 c时。返回页面 c用 wx.navigateBack ，返回页面 a使用 wx.reLaunch 更佳，关闭所有页面，打开到应用内的某个页面。
• 页面无需保留，跳转到一个新页面时，使用 redirectTo