页面导航

1. 什么是页面导航

页面导航是指在应用中，用户可以在不同页面之间跳转和切换的操作。比如在浏览器中，我们可以通过 <a> 标签或者 location.href 进行页面跳转。在微信小程序中，也提供了类似的导航功能，帮助用户在不同的页面之间进行切换和交互。

在小程序中，页面导航主要用于将用户从一个页面跳转到另一个页面，或者在多页面之间进行前进、后退等操作。

2. 小程序中实现页面导航的两种方式

微信小程序提供了两种方式实现页面导航：

1. 声明式导航：

   • 通过在页面中使用 <navigator> 组件来实现导航。
   • 用户点击 <navigator> 组件时，可以实现页面跳转。

2. 编程式导航：

   • 通过调用小程序的导航 API 实现页面跳转。
   • 常用的 API 有 wx.navigateTo、wx.switchTab、wx.navigateBack 等。

这两种方式适用于不同的场景，声明式导航适合在页面中直接使用，而编程式导航则可以在逻辑中灵活控制页面的跳转。

3. 声明式导航

声明式导航通过 <navigator> 组件实现，它与 HTML 中的 <a> 标签类似，点击后会跳转到指定页面。

3.1 导航到 tabBar 页面

微信小程序的 tabBar 是底部导航栏，开发者可以配置多个 tab 页面。要导航到 tabBar 页面，需要使用 <navigator> 组件，并且指定 open-type 为 switchTab，如下图所示：

示例代码：

<navigator url="/pages/home/home" open-type="switchTab">跳转到首页</navigator>

点击这个 <navigator> 组件，用户将跳转到 home 页面，该页面必须是 tabBar 中配置的页面。

3.2 导航到非 tabBar 页面

非 tabBar 页面是指没有在小程序的 app.json 中被配置为 tabBar 的页面。导航到这些页面时，需要使用 <navigator> 组件的 url 属性和 open-type="navigate" 属性。

示例代码：

<navigator url="/pages/about/about" open-type="navigate">跳转到 About 页面</navigator>

• url：指定要跳转的页面路径，必须以 / 开头。
• open-type="navigate"：表示是普通页面的跳转。

注意：如果不指定 open-type，默认的跳转类型就是 navigate，因此 open-type="navigate" 可以省略。

3.3 后退导航

后退导航允许用户返回到之前的页面。通过 <navigator> 组件的 open-type="navigateBack" 和 delta 属性，可以实现多级页面返回。

• open-type="navigateBack"：表示执行后退操作。
• delta：表示要后退的层级，默认返回上一级页面。

示例代码：

<navigator open-type="navigateBack" delta="1">返回上一页面</navigator>

在这个例子中，点击按钮后会返回上一页面。

4. 编程式导航

编程式导航通过微信小程序的 API 实现，适合在逻辑代码中灵活地控制页面跳转。

4.1 导航到 tabBar 页面

使用 wx.switchTab(Object object) 方法可以实现跳转到 tabBar 页面。Object 参数对象中，url 属性指定要跳转的 tabBar 页面路径。

示例代码：

wx.switchTab({
  url: '/pages/home/home', // 跳转到首页
});

调用该 API 后，用户将跳转到 home 页面。

4.2 导航到非 tabBar 页面

使用 wx.navigateTo(Object object) 方法可以跳转到非 tabBar 的页面。该方法适合跳转到普通的页面，且会保留当前页面在页面栈中。

示例代码：

wx.navigateTo({
  url: '/pages/about/about', // 跳转到 About 页面
});

通过 navigateTo 方法，用户可以跳转到指定的页面，但该页面不会替换当前页面，用户可以在新页面中点击返回按钮返回到当前页面。

4.3 后退导航

使用 wx.navigateBack(Object object) 方法可以返回到上一页面或多级页面，适合在程序逻辑中控制页面的返回。

• delta：指定要返回的层级，默认为 1。

示例代码：

wx.navigateBack({
  delta: 1 // 返回上一页面
});

通过 navigateBack，用户可以返回到之前的页面，delta 控制返回的页面层级。

5. 导航传参

在页面导航时，通常需要向目标页面传递一些参数，例如页面 ID、用户信息等。小程序支持在声明式和编程式导航中携带参数。

5.1 声明式导航传参

在 <navigator> 组件中，url 属性除了可以指定目标页面的路径外，还可以携带参数。参数需要通过 ? 分隔，键值对使用 = 相连，不同参数之间使用 & 分隔。

示例代码：

<navigator url="/pages/detail/detail?id=123&name=John">跳转到详情页</navigator>

在这个示例中，跳转到 detail 页面时，会同时携带两个参数：id=123 和 name=John。

5.2 编程式导航传参

编程式导航也支持传参，可以直接在 url 中附加参数进行传递。

示例代码：

wx.navigateTo({
  url: '/pages/detail/detail?id=123&name=John' // 携带参数跳转到详情页
});

参数以 URL 查询字符串的形式传递，目标页面可以通过 onLoad 方法接收这些参数。

5.3 在 onLoad 中接收导航参数

无论是声明式导航还是编程式导航，传递的参数都可以在目标页面的 onLoad 事件中通过 options 对象接收。

示例代码：

Page({
  onLoad: function (options) {
    console.log(options.id); // 获取传递的 id 参数
    console.log(options.name); // 获取传递的 name 参数
  }
});

在 onLoad 中，options 包含了通过 URL 传递的参数，开发者可以直接使用这些参数进行页面初始化。

总结

微信小程序中的页面导航主要有两种方式：声明式导航和编程式导航。声明式导航通过 <navigator> 组件实现，适合在页面中直接定义导航跳转；编程式导航则通过调用小程序的导航 API 来实现，适合在代码逻辑中动态控制页面跳转。无论是哪种导航方式，开发者都可以通过 URL 参数向目标页面传递数据，并在目标页面的 onLoad 方法中接收这些参数。