微信小程序的页面跳转navigateTo,redirectTo,reLaunch和页面栈

页面栈大小

小程序页面栈的默认大小为 10，这意味着在小程序运行过程中，最多可以同时存在 10 个页面。当页面数量超过这个限制时，最早打开的页面会被自动关闭，以保证页面栈的大小不超过限制。这一机制有助于控制小程序的内存使用，避免因页面过多导致内存溢出等问题。

页面跳转

当进行页面跳转时，当前页面会被推入页面栈，同时新的页面会被打开。例如，使用 wx.navigateTo 方法进行跳转时，就会遵循这样的规则。示例代码如下：

wx.navigateTo({
  url: 'pages/detail?id=123'
});

在这个例子中，当前页面会被压入页面栈，然后跳转到 pages/detail 页面。需要注意的是，wx.navigateTo 只能打开非 tabBar 页面。如果跳转的目标页面是 tabBar 页面，应该使用 wx.switchTab 方法。

页面返回

通过调用 wx.navigateBack() 方法或者点击页面上的返回按钮，用户可以返回到前一个页面。当执行返回操作时，当前页面会从页面栈中弹出并被关闭。你还可以指定后退的步数，例如 wx.navigateBack({ delta: 2 }) 会将当前页面以及它上面的一个页面都从页面栈中移除，从而返回到前两个页面。

页面传参

在进行页面跳转时，可以通过在跳转方法中传递参数。比如使用 wx.navigateTo 或 wx.redirectTo 方法时，可以在 url 中添加参数，如 wx.navigateTo({ url: 'pages/detail?id=123' })。在接收页面中，可以通过 onLoad 生命周期函数来获取这些参数，示例代码如下：

// 跳转页面并传递参数
wx.navigateTo({
  url: 'pages/detail?id=123'
});

// 在目标页面的 onLoad 函数中获取参数
Page({
  onLoad: function (options) {
    const id = options.id;
    console.log('接收到的参数 id 为:', id);
  }
});

页面重定向

1.wx.redirectTo 方法用于关闭当前页面并打开一个新的页面，新页面会被放置在页面栈的顶部。与 wx.navigateTo 不同的是，wx.redirectTo 不会在页面栈中保留当前页面。示例代码如下：

wx.redirectTo({
  url: 'pages/detail?id=123'
});

2.wx.reLaunch 主要用于关闭所有页面并打开指定的应用内页面。此操作会清空当前页面栈，并将目标页面作为新的首页加载。

// 示例：带有查询参数的 URL 编码方式
const queryParam = encodeURIComponent('some value');
wx.reLaunch({
  url: `/pages/targetPage?param=${queryParam}`
});

注意事项

调用本接口后将关闭所有页面，无法再通过常规手段（如点击左上角回退按钮）回到之前浏览过的页面，因此建议谨慎使用以避免影响用户体验。

应用场景

• ​​用户登录完成​​：登录后，通常需要直接进入主页而不再保留之前的登录界面。
• ​​重置应用状态​​：在某些情况下，可能需要重置整个应用的状态。
• ​​流程结束​​：在完成某个流程（如注册、支付等）后，需要返回到应用的首页或某个特定页面。
• ​​错误处理​​：异常情况时，需要重置应用并返回到如错误提示页面或首页。

页面栈操作的其他注意事项

• ​​不要手动修改页面栈​​：框架以栈的形式维护当前的所有页面，不要尝试手动修改页面栈，否则会导致路由以及页面状态错误。
• ​​页面栈的获取​​：可以使用 getCurrentPages() 函数来获取当前页面栈的实例，该函数会以数组形式按栈的顺序给出页面信息，数组的第一个元素为首页，最后一个元素为当前页面。示例代码如下：

const pages = getCurrentPages();
console.log(pages);

总结：小程序的路由与通信

在小程序中实现页面的跳转，有两种方式：

1. 声明式导航：navigator 组件

2. 编程式导航：使用小程序提供的 API

   • wx.navigateTo()：保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面

   • wx.redirectTo()：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面

   • wx.reLaunch()：关闭所有页面，跳转到应用内的某个页面

   • wx.switchTab()：跳转到 tabBar 页面，路径后不能带参数

   • wx.navigateBack()：关闭当前页面，返回上一页面或多级页面

3. 路径后可以带参数，参数需要在跳转到的页面的 onLoad 钩子函数中通过形参进行接收

   • 参数与路径之间使用 ? 分隔

   • 参数键与参数值用 = 相连

   • 不同参数用 & 分隔

   • 例如 path?key=value&key2=value2
     

Page({


  navigateTo() {

    // 保留当前页面，跳转到应用中其他页面，不能跳转到 tabBar 页面
    wx.navigateTo({
      url: '/pages/list/list?id=1&name=tom'
      // url: '/pages/cate/cate'
    })

  },

  redirectTo() {

    // 关闭(销毁)当前页面，跳转到应用中其他页面，不能跳转到 tabBar 页面
    wx.redirectTo({
      url: '/pages/list/list?id=1&name=tom'
      // url: '/pages/cate/cate'
    })

  },

  switchTab() {

    // 跳转到 tabBar 页面，不能跳转到 非 tabBar 页面，路径后面不能传递参数
    wx.switchTab({
      // url: '/pages/list/list'
      url: '/pages/cate/cate?id=1&name=tom'
    })

  },

  reLaunch() {

    // 关闭所有的页面，然后跳转到应用中某一个页面
    wx.reLaunch({
      url: '/pages/list/list?id=1&name=tom'
      // url: '/pages/cate/cate?id=1&name=tom'
    })

  }

})

// list.js
Page({

  navigateBack() {

    // 关闭当前页面，返回上一页或者返回多级页面
    // 默认返回上一页
    wx.navigateBack({
      delta: 1
    })

  },

  onLoad(options) {
    console.log(options)
  }

})