微信小程序页面导航介绍及使用详解

在微信小程序中，页面导航是非常重要的功能。通过页面导航，用户可以在不同页面中跳转，从而实现小程序各种功能。

常用导航组件

在小程序中，常用的导航组件有 navigator 和 tabbar。其中 navigator 组件用于页面间的跳转，tabbar 组件则用于底部导航栏。

navigator 组件

navigator 组件支持跳转页面、触发用户分享、打开小程序页面、拨打电话等功能。

以下是一个基本的 navigator 组件：

<navigator url="/pages/home/home">首页</navigator>

其中，url 属性指定了跳转的目标页面路径。

tabbar 组件

tabbar 组件用于底部导航栏，在小程序中非常常见，可以方便用户快速切换页面。

以下是一个基本的 tabbar 组件：

<tabbar>
  <tabbar-item icon="/images/home.png" selected-icon="/images/home_active.png" text="首页" url="/pages/home/home"></tabbar-item>
  <tabbar-item icon="/images/cart.png" selected-icon="/images/cart_active.png" text="购物车" url="/pages/cart/cart"></tabbar-item>
  <tabbar-item icon="/images/mine.png" selected-icon="/images/mine_active.png" text="我的" url="/pages/mine/mine"></tabbar-item>
</tabbar>

其中，每个 tabbar-item 都有一个 url 属性，指定了点击后跳转的目标页面路径。

页面跳转方式

在小程序中，可以使用 wx.navigateTo 和 wx.switchTab 方法实现页面跳转。

wx.navigateTo

wx.navigateTo 方法用于跳转到新的页面。以下是一个示例代码：

wx.navigateTo({
  url: '/pages/home/home?id=123'
})

其中，url 属性指定了跳转的目标页面路径，也可以传递参数，如上述代码中的 id 参数。

wx.switchTab

wx.switchTab 方法用于跳转到底部标签栏对应的页面，只能用于底部标签栏。以下是一个示例代码：

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

示例一：商品列表跳转详情页

假设我们有一个商品列表页面和一个商品详情页面，当用户点击商品列表中的某个商品时，就需要跳转到商品详情页面。

首先，在商品列表页面的 WXML 文件中，需要添加 navigator 组件，如下：

<view>
  <navigator url="/pages/product/product?id=123">
    <image src="/images/product.png"></image>
    <text>商品名称</text>
  </navigator>
</view>

其中，url 属性指定了跳转的目标页面路径，这里我们传递了 id 参数。

接下来，在商品详情页面中获取 id 参数，可以通过 wx.getStorageSync 方法来实现，如下：

const id = wx.getStorageSync('id')

示例二：底部导航切换页面

假设我们有一个底部导航栏，包含首页、购物车和我的三个标签，当用户点击底部标签时，就需要切换到对应的页面。

首先，在 app.json 文件中，需要配置 tabBar，如下：

"tabBar": {
  "color": "#333",
  "selectedColor": "#fff",
  "backgroundColor": "#000",
  "list": [
    {
      "pagePath": "/pages/home/home",
      "text": "首页",
      "iconPath": "/images/home.png",
      "selectedIconPath": "/images/home_active.png"
    },
    {
      "pagePath": "/pages/cart/cart",
      "text": "购物车",
      "iconPath": "/images/cart.png",
      "selectedIconPath": "/images/cart_active.png"
    },
    {
      "pagePath": "/pages/mine/mine",
      "text": "我的",
      "iconPath": "/images/mine.png",
      "selectedIconPath": "/images/mine_active.png"
    }
  ]
}

其中，list 数组中每个对象的 pagePath 属性指定了对应的页面路径，text 属性是标签文字，iconPath 属性是未选中时的图标路径，selectedIconPath 属性是选中时的图标路径。

接下来，在点击标签时，可以使用 wx.switchTab 方法切换到对应的页面，如下：

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

其中，url 属性值是对应页面路径。

至此，我们讲解了微信小程序页面导航的相关知识和示例。希望对大家的代码编写有所帮助。