微信小程序跳转的几种方式

微信小程序中页面跳转方法的灵活运用不仅可以提升用户体验，还能为应用增添更多创意和吸引力。

方式一：wx.navigateTo

保留当前页面，跳转到应用内的某个页面 。示例：

wx.navigateTo({
    url: '../details/details'
})

• 使用场景

  适用于需要跳转到新页面并保留原页面状态的情况，比如从列表页跳转到详情页。

• 优点

  可以保留原页面的状态，用户返回时可以继续操作。

• 缺点

  每次跳转都会创建新页面，可能会占用较多的内存资源。

 

方式二：wx.redirectTo

关闭当前页面，跳转到应用内的某个页面，不能跳转 tabbar 页面，跳转后左上角出现返回首页图标，点击后可返回首页面。示例：

wx.redirectTo({
  url: '../details/details'
})

• 使用场景

  适用于需要关闭当前页面并跳转到新页面的情况，比如登录成功后跳转到首页。

• 优点

  可以直接关闭当前页面，减少内存占用。

• 缺点

  无法保留原页面的状态，用户返回时会重新加载页面。

方式三：wx.reLaunch

关闭所有页面，打开应用内的某个页面，跳转后左上角出现返回首页图标，点击后可返回首页面。示例：

wx.reLaunch({
  url: '../details/details'
})

• 使用场景

  适用于需要关闭所有页面并打开新页面的情况，比如用户退出登录后跳转到登录页。

• 优点

  可以清空页面栈，减少内存占用。

• 缺点

  无法保留原页面的状态，用户返回时会重新加载页面。

方式四：wx.switchTab

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，该方法只能跳转 tabbar 页面。 示例：

wx.switchTab({
  url: '../home/home'
})

• 使用场景

  适用于需要跳转到 tabBar 页面的情况，比如从其他页面跳转到首页。

• 优点

  可以直接跳转到 tabBar 页面，方便用户导航。

• 缺点

  无法保留原页面的状态，用户返回时会重新加载页面。

 方式五：wx.navigateBack

 关闭当前页面  示例：

wx.navigateBack({
    url: '../details/details'
})

• 使用场景

  适用于跳转后左上角出现返回小箭头，点击后可返回原本页面 。

• 优点

  可以返回上一页面或多级页面。 

原创作者：吴小糖

创作时间：2024.1.17