小程序组件 —— 26 组件案例 - 跳转到商品列表

在上一节实现了商品导航区域，这一节实现跳转到商品列表的功能；当用户在点击商品导航时，需要能够跳转到商品列表页面；在微信小程序中，如果需要进行跳转，需要使用 navigator 组件，navigator 组件有两个常用的属性：

• url：当前小程序内的跳转链接，也就是点击之后需要跳转到的页面路径；
• open-type：跳转方式
  • navigate：保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面；
  • redirect：关闭当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面；
  • switchTab：跳转到 tabbar 页面，并关闭其它所有非 tabbar 页面；
  • reLaunch：关闭所有页面，打开到应用内的某个页面；
  • navigateBack：关闭当前页面，返回上一页面或多级页面；

使用 navigator 时有两个注意事项：

• url 路径后可以带参数。参数和路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔，例如：/list?id=10&name=hua，list 页面可以在 onLoad(options) 生命周期函数中获取传递的参数；
• open-type="switchTab" 时不支持传参；

下面在开发者工具中演示一下具体用法：

在 index.wxml 中添加 navigator 组件，如下：

<navigator url="/pages/list/list">到商品列表页面</navigator>

navigator 组件中的 url 是指小程序内的跳转链接，当点击文本时，进入这个页面对应的路由；在微信小程序中，每个页面的路径都已经存放到根目录的 app.json 文件中的 pages 字段中，如下：

  "pages": ["pages/index/index","pages/cate/cate","pages/cart/cart","pages/profile/profile","pages/list/list"]

我们找到 pages 中的 pages/list/list 路由，并粘贴到 navigator 组件的 url 中，注意在复制粘贴过程中，需要在 pages/list/list 前面添加 / ，否则无法正常跳转，填写之后，点击文本，就能实现跳转功能，如下：

下面研究一下 open-type 属性的功能，在 index.wxml 中添加下面的代码：

<navigator url="/pages/list/list" open-type="navigate">到商品列表页面</navigator>
<navigator url="/pages/cate/cate" open-type="navigate">到商品分类页面</navigator>

当我们使用 open-type 属性的 navigate 属性值时，当我们点击第一个文本能够正常跳转，但是点击第二个“跳转到商品分类页面”时，无法正常跳转；这是因为 list 商品列表页面是一个非 tabbar 页面，cate 商品分类页面是一个 tabbar 页面；navigate 属性会导致无法跳转到 tabbar 页面；

redirect 属性同理，只能跳转到非 tabbar 页面，无法跳转 tabbar 页面：

<navigator url="/pages/list/list" open-type="redirect">到商品列表页面</navigator>
<navigator url="/pages/cate/cate" open-type="redirect">到商品分类页面</navigator>

虽然 navigate 和 redirect 都是只能跳转到非 tabbar 页面，但是两者还是有区别的：

• navigate 属性：跳转到对应的页面之后，有返回上一页的箭头；

• redirect 属性：跳转到对应的页面之后，有返回当前项目首页的一个图标：

redirect 方法的存在有其特定的意义和用途：
- 简化页面栈: 在某些情况下，页面的历史记录并不重要，或者不希望用户返回到之前的页面。使用 redirect 可以避免页面栈中累积过多的页面，简化页面管理；
- 流程控制: 在一些需要强制用户完成某个流程的场景中，使用 redirect 可以确保用户无法返回到之前的步骤。例如，在用户完成某个操作后，强制跳转到结果页面，而不允许返回到操作页面；
- 性能优化: 由于 redirect 会销毁当前页面，可能在某些情况下有助于释放内存，特别是在页面内容较多或复杂时；

下面继续分析一下 open-type 中的 switchTab 属性：

<navigator url="/pages/list/list" open-type="switchTab">到商品列表页面</navigator>
<navigator url="/pages/cate/cate" open-type="switchTab">到商品分类页面</navigator>

可以发现 switchTab 属性只能跳转到 tabbar 页面，无法跳转到 tabbar 页面；

下面继续分析一下 open-type 中的 switchTab 属性：

<navigator url="/pages/list/list" open-type="reLaunch">到商品列表页面</navigator>
<navigator url="/pages/cate/cate" open-type="reLaunch">到商品分类页面</navigator>

在微信小程序中，reLaunch 方法用于关闭所有页面并打开到应用内的某个页面。与其他页面跳转方法（如 navigateTo、redirectTo 和 switchTab）相比，reLaunch 有其独特的功能和用途：

• 功能

  • 关闭所有页面: reLaunch 会关闭当前小程序中的所有页面，清空页面栈；
  • 打开指定页面: 在关闭所有页面后，reLaunch 会打开指定的页面，使其成为新的首页；

• 用途

  • 重置应用状态: 在某些情况下，可能需要重置整个应用的状态。例如，用户注销登录后，可能需要返回到登录页面并清除之前的所有页面历史记录。reLaunch 可以实现这一需求；
  • 流程结束: 在完成某个流程（如注册、支付等）后，可能需要返回到应用的首页或某个特定页面，并清除流程中的所有页面记录；reLaunch 在这里插入代码片可以确保用户无法通过返回按钮回到流程中的页面；
  • 错误处理: 在遇到严重错误或异常情况时，可能需要重置应用并返回到某个特定页面（如错误提示页面或首页）。reLaunch 可以帮助开发者实现这一需求；

• 注意事项

  • 页面路径: reLaunch 方法的 url 参数必须是应用内的有效页面路径；
  • 页面栈清空: 使用 reLaunch 后，所有之前的页面都会被关闭，用户无法通过返回按钮回到之前的页面；
  • 性能影响: 由于 reLaunch 会关闭所有页面并重新打开一个新页面，可能会对应用的性能产生一定影响，特别是在页面内容较多或复杂时；

下面继续分析一下 open-type 中的 navigateBack 属性：

在 index.wxml 中添加下面的内容：

<navigator url="/pages/list/list" open-type="navigate">到商品列表页面</navigator>

在 list.wxml 中添加对应代码：

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

当从 index 进入到 list 页面时，点击 list 页面的 返回上一页 就能返回到 index 页面（上一页），所以说 navigateBack 的功能是返回上一页或者返回前几页，navigateBack 默认只能返回上一页，如果需要返回前几页，需要添加一个属性 delta。delta 用于控制返回的层级（指定返回前几页）：

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

如果需要传递参数，需要遵循规范，路径和参数之间需要以问号进行分隔，参数键和值之间需要使用 = 来进行连接，如果有多个参数需要使用 & 连接符进行分隔：

<navigator url="/pages/list/list?id=10&num=hua" open-type="navigate">到商品列表页面</navigator>

可以看到，在跳转的时候，页面参数已经成功带上：

如果想获取 url 中的参数，需要在 list.js 文件中找到 onLoad 生命周期函数，onLoad 函数有一个默认的 options 形参，通过 options 形参就能够接收传递的参数:

  onLoad(options) {console.log(options);},

通过上面的讲解我们大致了解了 navigator 组件的用法，下面我们使用 navigator 实现产品需求：当点击商品导航时跳转到对应的商品列表中，修改前面编写的商品导航区代码，如下：

<view class="good-nav"><view><navigator url="/pages/list/list"><image src="../../assets/category/cate-1.png" mode="" /><text>鲜花玫瑰</text></navigator></view><view><navigator url="/pages/list/list"><image src="../../assets/category/cate-1.png" mode="" /><text>鲜花玫瑰</text></navigator></view><view><navigator url="/pages/list/list"><image src="../../assets/category/cate-1.png" mode="" /><text>鲜花玫瑰</text></navigator></view><view><navigator url="/pages/list/list"><image src="../../assets/category/cate-1.png" mode="" /><text>鲜花玫瑰</text></navigator></view><view><image src="../../assets/category/cate-1.png" mode="" /><text>鲜花玫瑰</text></view>
</view>

具体效果如下：

下面修改一下样式：

view {navigator {display: flex;flex-direction: column;align-items: center;}image {width: 80rpx;height: 80rpx;}text {font-size: 24rpx;margin-top: 12rpx;}}

• navigator:
  • display: flex;：使用弹性盒布局，使得子元素可以灵活地排列。
  • flex-direction: column;：将子元素垂直排列（从上到下）。
  • align-items: center;：将子元素在交叉轴（水平轴）上居中对齐。
• image:
  • width: 80rpx;：设置图像的宽度为80rpx（responsive pixel，响应式像素），适应不同屏幕尺寸。
  • height: 80rpx;：设置图像的高度为80rpx，保持图像的正方形比例。
• text:
  • font-size: 24rpx;：设置文本的字体大小为24rpx，确保在不同设备上有良好的可读性。
  • margin-top: 12rpx;：在文本和上方的图像之间添加12rpx的上外边距，增加视觉上的间距，使得布局更加美观。

参考视频：尚硅谷微信小程序开发教程