文章目录
- 详细说明
- 总结
- `wx.navigateTo` 的特点
- 为什么 `wx.navigateTo` 最常用?
- 其他跳转方式的使用频率
- 总结
 
 
以下是微信小程序中常见的跳转方式及其特点的表格总结:
| 跳转方式 | API 方法 | 特点 | 适用场景 | 
|---|---|---|---|
| wx.navigateTo | wx.navigateTo({ url: '路径' }) | 保留当前页面,跳转到新页面(非 tabBar 页面)。最多支持 10 层页面栈。 | 用于跳转到非 tabBar 页面,且需要返回上一页的场景。 | 
| wx.redirectTo | wx.redirectTo({ url: '路径' }) | 关闭当前页面,跳转到新页面(非 tabBar 页面)。 | 用于不需要返回当前页面的场景,如登录后跳转到主页。 | 
| wx.switchTab | wx.switchTab({ url: '路径' }) | 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。 | 用于切换到 tabBar 页面的场景。 | 
| wx.reLaunch | wx.reLaunch({ url: '路径' }) | 关闭所有页面,跳转到新页面(可以是 tabBar 或非 tabBar 页面)。 | 用于重置应用状态并跳转到新页面的场景,如退出登录后跳转到登录页。 | 
| wx.navigateBack | wx.navigateBack({ delta: 1 }) | 返回上一页面或多层页面, delta参数指定返回的层数。 | 用于返回上一页或多层页面的场景。 | 
| wx.navigateToMiniProgram | wx.navigateToMiniProgram({ appId: '目标小程序appId' }) | 跳转到其他小程序。 | 用于跳转到其他小程序的场景。 | 
| wx.navigateBackMiniProgram | wx.navigateBackMiniProgram() | 从其他小程序返回到当前小程序。 | 用于从其他小程序返回当前小程序的场景。 | 
详细说明
-  wx.navigateTo - 特点:保留当前页面,跳转到新页面。
- 限制:最多只能打开 10 层页面栈。
- 示例:wx.navigateTo({ url: '/pages/detail/detail?id=123' });
 
-  wx.redirectTo - 特点:关闭当前页面,跳转到新页面。
- 限制:不能跳转到 tabBar 页面。
- 示例:wx.redirectTo({ url: '/pages/index/index' });
 
-  wx.switchTab - 特点:跳转到 tabBar 页面,并关闭其他非 tabBar 页面。
- 限制:只能跳转到 tabBar 页面。
- 示例:wx.switchTab({ url: '/pages/home/home' });
 
-  wx.reLaunch - 特点:关闭所有页面,跳转到新页面。
- 限制:无。
- 示例:wx.reLaunch({ url: '/pages/login/login' });
 
-  wx.navigateBack - 特点:返回上一页面或多层页面。
- 参数:delta指定返回的层数,默认为 1。
- 示例:wx.navigateBack({ delta: 1 // 返回上一页 });
 
-  wx.navigateToMiniProgram - 特点:跳转到其他小程序。
- 限制:需要目标小程序的 appId,且需要用户授权。
- 示例:wx.navigateToMiniProgram({ appId: '目标小程序的appId', path: '目标小程序的路径' });
 
-  wx.navigateBackMiniProgram - 特点:从其他小程序返回到当前小程序。
- 示例:wx.navigateBackMiniProgram();
 
总结
微信小程序提供了多种跳转方式,适用于不同的场景:
- 页面内跳转:wx.navigateTo、wx.redirectTo、wx.reLaunch。
- tabBar 跳转:wx.switchTab。
- 返回上一页:wx.navigateBack。
- 跳转到其他小程序:wx.navigateToMiniProgram、wx.navigateBackMiniProgram。
根据具体需求选择合适的跳转方式,可以提升用户体验和开发效率。
在微信小程序开发中,wx.navigateTo 是使用最频繁的跳转方式。以下是它的特点和使用场景,以及为什么它是最常用的:
wx.navigateTo 的特点
 
-  保留当前页面: - 跳转到新页面时,当前页面会被保留在页面栈中,用户可以通过返回按钮回到上一页。
- 适合需要返回上一页的场景。
 
-  支持传递参数: - 可以通过 URL 传递参数到目标页面,例如:wx.navigateTo({ url: '/pages/detail/detail?id=123&name=foo' });
- 目标页面可以通过 onLoad生命周期函数接收参数:Page({ onLoad(query) { console.log(query.id); // 输出 123 console.log(query.name); // 输出 foo } });
 
- 可以通过 URL 传递参数到目标页面,例如:
-  适用于非 tabBar 页面: - wx.navigateTo只能跳转到非 tabBar 页面,而 tabBar 页面通常使用- wx.switchTab。
 
-  页面栈限制: - 最多只能打开 10 层页面栈。如果超过 10 层,需要先关闭一些页面。
 
为什么 wx.navigateTo 最常用?
 
-  符合用户习惯: - 用户通常期望通过返回按钮回到上一页,而 wx.navigateTo正好满足这一需求。
 
- 用户通常期望通过返回按钮回到上一页,而 
-  灵活性高: - 支持传递参数,适合大多数页面跳转场景。
- 可以跳转到任意非 tabBar 页面。
 
-  开发便捷: - 代码简单易用,适合快速开发。
 
-  适用场景广泛: - 例如: 
    - 从列表页跳转到详情页。
- 从表单页跳转到确认页。
- 从主页跳转到设置页。
 
 
- 例如: 
    
其他跳转方式的使用频率
-  wx.redirectTo:- 使用频率较低,通常用于不需要返回当前页面的场景,例如登录后跳转到主页。
 
-  wx.switchTab:- 用于跳转到 tabBar 页面,使用频率中等。
 
-  wx.reLaunch:- 使用频率较低,通常用于重置应用状态,例如退出登录后跳转到登录页。
 
-  wx.navigateBack:- 使用频率较高,通常用于返回上一页或多层页面。
 
-  wx.navigateToMiniProgram:- 使用频率较低,通常用于跳转到其他小程序。
 
总结
- wx.navigateTo是最常用的跳转方式,因为它符合用户习惯、灵活性高且开发便捷。
- 其他跳转方式(如 wx.switchTab、wx.redirectTo等)则根据具体场景选择使用。


















![[Day 15]54.螺旋矩阵(简单易懂 有画图)](https://i-blog.csdnimg.cn/direct/4bea2ec0becf4b4dbf584542708cdf10.png)

