微信小程序——页面跳转方法和场景用法总结

✅作者简介：2022年博客新星 第八。热爱国学的Java后端开发者，修心和技术同步精进。
个人主页：Java Fans的博客
个人信条：不迁怒，不贰过。小知识，大智慧。
当前专栏：微信小程序学习分享
✨特色专栏：国学周更-心性养成之路
本文内容：微信小程序——页面跳转方法和场景用法总结

1、wx.switchTab(url)：跳转主页

• 描述：跳转到带有标签栏的页面，并关闭其他非标签页的页面。
• 使用场景：当你需要切换到小程序中不同的页面，并且页面具有标签栏时，可以使用此方法。

属性	解释
url	需要跳转的tabBar路径，不能带参数
success	接口调用成功的回调函数
fail	接口调用失败的回调函数
complete	接口调用结束的回调函数（调用成功、失败都会执行）

案例展示：

wx.switchTab({
  url: '/pages/tab/home' // 跳转到名为“home”的标签页
})

• 参数说明：
  url（必填）：要跳转的页面路径，需在app.json中进行注册。

2、wx.reLaunch(url)：关闭所有页面跳转

• 描述：关闭所有页面，并打开一个新的页面作为首页。
• 使用场景：当你需要重新启动小程序，并跳转到一个全新的页面时，可以使用此方法。

属性	解释
url	需要跳转的应用内页面路径，可以带参数
success	接口调用成功的回调函数
fail	接口调用失败的回调函数
complete	接口调用结束的回调函数（调用成功、失败都会执行）

案例展示：

wx.reLaunch({
  url: '/pages/login' // 跳转到名为“login”的页面
})

• 参数说明：
  url（必填）：要跳转的页面路径，需在app.json中进行注册。

3、wx.redirectTo(url)：关闭当前页面跳转

• 描述：关闭当前页面，并跳转到一个新的页面。
• 使用场景：当你需要关闭当前页面，并导航到另一个页面时，可以使用此方法。

属性	解释
url	需要跳转的应用内页面路径，可以带参数
success	接口调用成功的回调函数
fail	接口调用失败的回调函数
complete	接口调用结束的回调函数（调用成功、失败都会执行）

案例展示：

wx.redirectTo({
  url: '/pages/detail?id=123' // 跳转到名为“detail”的页面，并传递参数id
})

• 参数说明：
  url（必填）：要跳转的页面路径，需在app.json中进行注册。

4、wx.navigateTo(url)：保留页面跳转

• 描述：保留当前页面，并跳转到一个新的页面。
• 使用场景：当你需要在当前页面保留导航记录，并在新页面打开时，可以使用此方法。

属性	解释
url	需要跳转的应用内页面路径，可以带参数
events	页面间通信接口，用于监听被打开页面发送到当前页面的数据
success	接口调用成功的回调函数
fail	接口调用失败的回调函数
complete	接口调用结束的回调函数（调用成功、失败都会执行）

案例展示：

wx.navigateTo({
  url: '/pages/detail?id=123' // 跳转到名为“detail”的页面，并传递参数id
})

• 参数说明：
  url（必填）：要跳转的页面路径，需在app.json中进行注册。

5、wx.navigateBack(delta)：页面返回

• 描述：返回上一页面。
• 使用场景：当你需要回到上一个页面时，可以使用此方法。

属性	解释
delta	默认值为1，返回的页面数，如果 delta 大于现有页面数，则返回到首页。
success	接口调用成功的回调函数
fail	接口调用失败的回调函数
complete	接口调用结束的回调函数（调用成功、失败都会执行）

案例展示：

wx.navigateBack({
  delta: 1 // 返回上一页面（如果存在）
})

• 参数说明：
  delta（选填）：返回的页面数，如果不填则默认返回上一页面；设置为2则返回上两个页面，以此类推。

注意： 小程序的页面不是很多，通常推荐使用wx.navigateTo进行跳转，后退不需要重新渲染，提高加载相率。反之，页面很多时候，最好不用。

总结

  这些方法在跳转页面时，参数中的路径需在app.json中注册，确保小程序能够正确识别页面路径。根据你的具体需求，选择适当的方法来实现页面跳转。

---

  码文不易，本篇文章就介绍到这里，如果想要学习更多Java系列知识，点击关注博主，博主带你零基础学习Java知识。与此同时，对于日常生活有困扰的朋友，欢迎阅读我的第四栏目：《国学周更—心性养成之路》，学习技术的同时，我们也注重了心性的养成。