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

前言

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

---

方式一：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 页面，方便用户导航。

• 缺点

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

---

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

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

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

• 使用场景

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

• 优点

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

• 缺点

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

• 注意

  <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 项的文字。

属性	描述
color	未选中文字颜色
selectedColor	选中文字颜色
backgroundColor	背景颜色
pagePath	页面路径
text	名称
iconPath	默认图标路径
selectedIconPath	选中图标路径

实例代码

"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"
    }
  ]
},

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

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

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

Page({
  onLoad: function () {
    wx.setNavigationBarTitle({
      title: '首页'
    })
  }
})