微信小程序页面跳转方法
文章目录
- 前言
- 方式一：wx.navigateTo
- 方式二：wx.redirectTo
- 方式三：wx.reLaunch
- 方式四：wx.switchTab
- 方式五：wxml中navigator标签跳转
- 页面回退
前言
微信小程序页面跳转的各种方法总结，备查。
方式一：wx.navigateTo
保留当前页面，跳转到应用内的某个页面。可以通过调用 wx.navigateBack 返回到原页面。跳转后左上角出现返回小箭头，点击后可返回原本页面。示例代码：
wx.navigateTo({
url: '../carDetails/carDetails'
})
- 使用场景
适用于需要跳转到新页面并保留原页面状态的情况，比如从列表页跳转到详情页。
- 优点
可以保留原页面的状态，用户返回时可以继续操作。
- 缺点
每次跳转都会创建新页面，可能会占用较多的内存资源。
方式二：wx.redirectTo
关闭当前页面，跳转到应用内的某个页面，不能跳转 tabbar 页面，跳转后左上角出现返回首页图标，点击后可返回首页面。示例代码：
wx.redirectTo({
url: '../carDetails/carDetails'
})
- 使用场景
适用于需要关闭当前页面并跳转到新页面的情况，比如登录成功后跳转到首页。
- 优点
可以直接关闭当前页面，减少内存占用。
- 缺点
无法保留原页面的状态，用户返回时会重新加载页面。
方式三：wx.reLaunch
关闭所有页面，打开应用内的某个页面，跳转后左上角出现返回首页图标，点击后可返回首页面。示例代码：
wx.reLaunch({
url: '../carDetails/carDetails'
})
- 使用场景
适用于需要关闭所有页面并打开新页面的情况，比如用户退出登录后跳转到登录页。
- 优点
可以清空页面栈，减少内存占用。
- 缺点
无法保留原页面的状态，用户返回时会重新加载页面。
方式四：wx.switchTab
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，该方法只能跳转 tabbar 页面。 示例代码：
wx.switchTab({
url: '../install/install'
})
- 使用场景
适用于需要跳转到 tabBar 页面的情况，比如从其他页面跳转到首页。
- 优点
可以直接跳转到 tabBar 页面，方便用户导航。
- 缺点
无法保留原页面的状态，用户返回时会重新加载页面。
方式五：wxml中navigator标签跳转
通过设置 url 属性来指定跳转的目标页面。 示例代码：
<navigator url="../carDetails/carDetails"><button>我是A页面，点击跳转到B页面</button></navigator>
- 使用场景
适用于需要在页面中添加跳转链接的情况，比如在列表页中点击某个项跳转到详情页。
- 优点
使用简单，可以直接在页面中添加跳转链接。
- 缺点
无法保留原页面的状态，用户返回时会重新加载页面。
- 注意
标签，并设置 open-type 属性为 navigate。
页面回退
wx.navigateBack(Object object)
- 功能描述
关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。
- wx.navigateBack的作用
wx.navigateBack函数是微信小程序提供的一个API接口，用于实现页面的跳转回退功能。具体来说，它可以用来回到历史记录中的上一个页面。
例如，在一个小程序中，用户从页面A跳转到页面B，此时在页面B中如果使用wx.navigateBack函数，则可以返回到页面A，即上一个页面。
- wx.navigateBack的参数
wx.navigateBack函数支持传入一个参数，用来指定返回的页面数，即返回历史记录中的第几个页面。
例如，如果用户从页面A跳转到页面B，再从页面B跳转到页面C，此时在页面C中使用wx.navigateBack(2)函数，则可以返回到页面A，因为历史记录中的第2个页面就是页面A。
// 示例代码
wx.navigateBack({
delta: 2
})