跳到主要内容

小程序互跳转链接

介绍​

在小程序开发中，页面之间的跳转是非常常见的需求。无论是从首页跳转到详情页，还是从详情页返回到首页，都需要使用到跳转链接。小程序提供了多种方式来实现页面之间的跳转，包括 navigateTo、redirectTo、switchTab 等。本文将详细介绍这些方法的使用场景和实现方式。

基本跳转方法​

1. wx.navigateTo​

wx.navigateTo 是最常用的跳转方法之一，它用于跳转到非 tabBar 页面，并且会保留当前页面，用户可以通过返回按钮返回到上一个页面。

javascript
wx.navigateTo({
  url: '/pages/detail/detail'
});

输入：

  • url: 目标页面的路径。

输出：

  • 跳转到指定页面，并保留当前页面。

2. wx.redirectTo​

wx.redirectTo 用于关闭当前页面，并跳转到非 tabBar 页面。与 navigateTo 不同，redirectTo 不会保留当前页面。

javascript
wx.redirectTo({
  url: '/pages/detail/detail'
});

输入：

  • url: 目标页面的路径。

输出：

  • 关闭当前页面，并跳转到指定页面。

3. wx.switchTab​

wx.switchTab 用于跳转到 tabBar 页面，并且会关闭所有非 tabBar 页面。

javascript
wx.switchTab({
  url: '/pages/index/index'
});

输入：

  • url: 目标 tabBar 页面的路径。

输出：

  • 跳转到指定的 tabBar 页面，并关闭所有非 tabBar 页面。

实际案例​

案例 1：从首页跳转到详情页​

假设我们有一个电商小程序，用户可以在首页点击商品，跳转到商品详情页。我们可以使用 wx.navigateTo 来实现这一功能。

javascript
// 首页页面
Page({
  goToDetail: function() {
    wx.navigateTo({
      url: '/pages/detail/detail'
    });
  }
});

案例 2：从详情页返回到首页​

在详情页中，我们可以提供一个返回按钮，使用 wx.navigateBack 返回到首页。

javascript
// 详情页页面
Page({
  goBack: function() {
    wx.navigateBack({
      delta: 1
    });
  }
});