从入门到精通：微信小程序跳转页面的实用指南_微信小程序页面跳转

前言

微信小程序中页面跳转方法的灵活运用不仅可以提升用户体验，还能为应用增添更多创意和吸引力。本文将为大家详细介绍微信小程序跳转页面的方法，让你的应用与众不同，为用户带来全新的体验。

---

方式一：wx.navigateTo

保留当前页面，跳转到应用内的某个页面。可以通过调用 wx.navigateBack 返回到原页面。跳转后左上角出现返回小箭头，点击后可返回原本页面。示例代码：

wx.navigateTo({
    url: '../carDetails/carDetails'
})
1
2
3

• 使用场景

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

• 优点

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

• 缺点

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

---

方式二：wx.redirectTo

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

wx.redirectTo({
  url: '../carDetails/carDetails'
})
1
2
3

• 使用场景

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

• 优点

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

• 缺点

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

---

方式三：wx.reLaunch

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

wx.reLaunch({
  url: '../carDetails/carDetails'
})
1
2
3

• 使用场景

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

• 优点

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

• 缺点

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

---

方式四：wx.switchTab

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

wx.switchTab({
  url: '../install/install'
})
1
2
3

• 使用场景

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

• 优点

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

• 缺点

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

---

方式五：<navigator url=""><navigator/>

通过设置 url 属性来指定跳转的目标页面。 示例代码：

<navigator url="../carDetails/carDetails"><button>我是A页面，点击跳转到B页面</button></navigator>
1

• 使用场景

  适用于需要在页面中添加跳转链接的情况，比如在列表页中点击某个项跳转到详情页。

• 优点

  使用简单，可以直接在页面中添加跳转链接。

• 缺点

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

• 注意

  <navigator> 组件只能跳转到小程序内的页面，无法跳转到外部链接。如果需要跳转到外部链接，可以使用 <a> 标签，并设置 open-type 属性为 navigate。

---

拓展 – 如何配置 tabBar

在 app.json 文件中配置 tabBar 属性，包括 list 和 color 属性。

list 属性是一个数组，每个元素代表一个 tab 项，可以设置 iconPath、selectedIconPath、pagePath 和 text 等属性。在 app.js 文件中的 onLaunch 函数中设置 tabBar 的初始状态。可以使用 wx.hideTabBar() 函数隐藏 tabBar，或者使用 wx.showTabBar() 函数显示 tabBar。在需要显示 tabBar 的页面中，可以通过设置页面的 navigationBarTitleText 属性来显示对应的 tab 项的文字。

实例代码

"tabBar": {
  "color": "#8a8a8a",
  "selectedColor": "#1296db",
  "backgroundColor": "#e6e6e6",
  "list": [
    {
      "pagePath": "pages/main/main",
      "text": "首页",
      "iconPath": "./assets/main.png",
      "selectedIconPath": "./assets/main1.png"
    },
    {
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "./assets/message.png",
      "selectedIconPath": "./assets/message1.png"
    },
    {
      "pagePath": "pages/install/install",
      "text": "设置",
      "iconPath": "./assets/install.png",
      "selectedIconPath": "./assets/install1.png"
    }
  ]
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

在 app.js 文件中的 onLaunch 函数中设置初始状态

onLaunch: function () {
  wx.hideTabBar(); // 隐藏tabBar
  // wx.hideTabBar(); // 显示tabBar
}
1
2
3
4

在需要显示 tabBar 的页面中设置 navigationBarTitleText 属性

Page({
  onLoad: function () {
    wx.setNavigationBarTitle({
      title: '首页'
    })
  }
})
1
2
3
4
5
6
7