【愚公系列】《微信小程序与云开发从入门到实践》019-导航组件与页面配置节点组件
| 标题 | 详情 |
|---|---|
| 作者简介 | 愚公搬代码 |
| 头衔 | 华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。 |
| 近期荣誉 | 2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。 |
| 博客内容 | .NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。 |
| 欢迎 | 👍点赞、✍评论、⭐收藏 |
🚀前言
在微信小程序的开发过程中，导航组件和页面配置节点组件是构建流畅用户体验的关键要素。用户在小程序中如何顺利地浏览和找到所需信息，直接影响着他们的使用体验与满意度。本篇文章将探讨微信小程序中的导航组件及页面配置节点组件，帮助你更好地理解它们的功能与应用。
我们将详细介绍不同类型的导航组件，包括 TabBar、导航栏等，解析它们的使用场景及配置方法。同时，我们也会深入探讨页面配置节点组件的作用，如何通过合理的页面结构与组件配置，提高小程序的可用性与美观度。
无论你是小程序开发的新手，还是希望进一步提升应用质量的开发者，这篇文章都将为你提供实用的技巧与示例。让我们一起探索微信小程序的导航与页面配置组件，打造出更加友好的用户体验吧！
🚀一、导航组件与页面配置节点组件
在生活中，导航的作用是指明路途的方向，在应用程序里，多个页面的跳转过程也可以理解为组成了一条路径，导航即是管理这条页面路径的一种方式。页面配置节点组件是一种抽象的页面组件，其主要作用是对页面的展现或行为回调进行配置
🔎1.使用 navigator 组件
在前面的章节中，为了便于观察组件的效果，曾使用过 navigator 组件来快速跳转到对应的示例页面。现在，我们可以进一步学习并使用 navigator 组件来实现页面之间的跳转。
在示例工程的 pages 文件夹下创建一个新的页面文件夹，命名为 navigatorDemo，然后在 navigatorDemo.wxml 文件中编写如下示例代码：
<!-- pages/navigatorDemo/navigatorDemo.wxml -->
<navigator url="../index/index">
<view>跳转到首页</view>
</navigator>
🦋1.1 代码解释
-
<navigator>组件：这是小程序中用于页面跳转的组件。在此示例中，点击navigator组件内的文本跳转到首页时，会自动跳转到项目的首页，即index页。 -
url属性：该属性指定了跳转目标页面的路径。在此示例中，url="../index/index"表示跳转到根目录下的index页面。
🦋1.2 功能说明
运行上述代码后，当用户点击页面中的 跳转到首页 文案时，页面会自动跳转到 index 页面。
🦋1.3 navigator 组件的应用场景
-
navigator组件不仅支持小程序内的页面跳转，还可以实现跨应用页面的跳转。例如，可以跳转到另一个小程序或外部网页（如一个 H5 页面）。 -
在实际开发中，
navigator组件常用于页面间的导航，帮助用户在不同页面之间流畅切换。
🦋1.4 navigator 组件可配置的属性
| 属性名 | 类型 | 意义 |
|---|---|---|
| target | 字符串 | 设置跳转的目标，可选值为： - self： 当前小程序，默认值- miniProgram：其他小程序 |
| url | 字符串 | 设置当前小程序内的跳转连接，当 target 为 self 时有效 |
| open-type | 字符串 | 设置跳转方式，可选值为： - navigate: 入栈跳转，对应 wx.navigateTo 方法- redirect: 出栈当前页面，入栈新页面，对应 wx.redirectTo 方法- switchTab: 标签页切换，对应 wx.switchTab 方法- reLaunch: 所有页面出栈，首页入栈，对应 wx.reLaunch 方法- navigateBack: 当前页面出栈，对应 wx.navigateBack 方法- exit: 退出当前小程序，当 target 为 miniProgram 时有效 |
| delta | 数值 | 当 open-type 为 navigateBack 时，此属性设置返回的层级数 |
| app-id | 字符串 | 当 target 为 miniProgram 时有效，设置要打开的小程序的 appId |
| path | 字符串 | 当 target 为 miniProgram 时有效，设置要打开的小程序的页面路径 |
| extra-data | 对象 | 当 target 为 miniProgram 时有效，传递数据到要打开的小程序中，在被打开的小程序中的 App.onLaunch() 和 App.onShow() 方法中可以拿到这些数据 |
| Version | 字符串 | 当 target 为 miniProgram 时有效，设置打开的小程序的版本，可选值为：• develop: 开发版• trial: 体验版• release: 正式版 |
| 此参数只对开发中的小程序有效，正式版的小程序只能打开正式版的其他小程序 | ||
| short-link | 字符串 | 当 target 为 miniProgram 时有效，设置跳转链接，设置后，将忽略参数 app-id 和 path 属性 |
| hover-class | 字符串 | 自定义 navigator 组件的样式 |
| hover-stop-propagation | 布尔值 | 设置是否阻止本节点的祖先节点出现点击态 |
| hover-start-time | 数值 | 设置按住后多久出现点击态，单位为毫秒 |
| hover-stay-time | 数值 | 设置松开后点击态保留时间，单位为毫秒 |
| bindsuccess | 函数 | 当 target 为 miniProgram 时有效，跳转其他小程序成功后的回调 |
| bindfail | 函数 | 当 target 为 miniProgram 时有效，跳转其他小程序失败后的回调 |
| bindcomplete | 函数 | 当 target 为 miniProgram 时有效，跳转小程序完成后的回调 |
🔎2.页面配置组件
当使用导航进行页面跳转后，页面的顶部会出现导航栏组件，导航栏上会显示当前页面的标题和返回按钮。当用户点击返回按钮后，当前页面会被退出。为了配置页面的导航栏，我们可以在页面对应的 JSON 文件中进行配置，也可以使用页面配置组件来进行配置。
小程序开发框架中提供了 page-meta 页面属性配置节点组件，通过这个组件，我们可以对页面的属性进行配置，并监听页面的一些用户事件。
在 navigatorDemo.wxml 文件的头部添加如下代码：
<!-- pages/navigatorDemo/navigatorDemo.wxml -->
<page-meta root-background-color="#00ff00" page-font-size="20px"></page-meta>
<navigator url="../index/index">
<view>跳转到首页</view>
</navigator>
🦋2.1 代码解释
page-meta组件：这是一个页面属性配置节点组件，用于动态配置页面属性。root-background-color属性：设置页面的背景颜色。page-font-size属性：设置页面的字体大小。
运行代码后，可以看到页面的背景色和文字大小已经发生了变化。page-meta 组件的作用与页面配置文件的作用类似，但更加灵活。在设置配置项时，可以将其绑定为属性变量，这样就可以动态地修改页面的配置项。
🦋2.2 page-meta 组件可配置的属性
| 属性名 | 类型 | 意义 |
|---|---|---|
| background-text-style | 字符串 | 设置下拉背景的字体风格 |
| background-color | 字符串 | 窗口背景色 |
| background-color-top | 字符串 | 设置窗口顶部的背景色 |
| background-color-bottom | 字符串 | 设置窗口底部的背景色 |
| root-background-color | 字符串 | 设置页面内内容的根背景色 |
| scroll-top | 字符串 | 设置页面滚动到距离页面顶端的位置 |
| scroll-duration | 数值 | 设置滚动到页面的时长，单位为毫秒 |
| page-style | 字符串 | 设置页面根节点的样式 |
| page-font-size | 字符串 | 设置页面根节点的字体大小，设置为 system 时则使用微信提供的字体大小 |
| page-orientation | 字符串 | 设置页面的方向，可选值为： |
| - auto：自动 | ||
| - portrait：竖屏 | ||
| - landscape：横屏 | ||
| bindresize | 函数 | 页面尺寸发生变化时触发的回调函数 |
| bindscroll | 函数 | 页面滚动时触发的回调 |
| bindscrolldone | 函数 | 使用 scroll-top 产生页面滚动后，滚动动画结束后的回调函数 |
🦋2.3 navigation-bar 组件
需要注意，page-meta 组件没有具体的页面元素承载，可以将其理解为一个配置节点，此组件必须是页面的第一个节点。在代码层面，即使在 WXML 文件的最前面定义此组件。与此同时，对于页面中导航栏的样式配置，可以使用 navigation-bar 组件。navigation-bar 组件也是一个配置节点，且必须是 page-meta 中的第一个节点。示例如下：
<!-- pages/navigatorDemo/navigatorDemo.wxml -->
<page-meta root-background-color="#00ff00" page-font-size="20px">
<navigation-bar title="标题" front-color="red" background-color="white"></navigation-bar>
</page-meta>
🦋2.4 navigation-bar 组件的属性
| 属性名 | 类型 | 意义 |
|---|---|---|
| title | 字符串 | 设置导航栏的标题 |
| loading | 布尔值 | 设置是否显示导航栏的 loading 提示 |
| front-color | 字符串 | 设置导航栏的前景色，此属性会影响按钮、标题、状态栏的颜色，只能设置为白色或黑色 |
| background-color | 字符串 | 设置导航栏的背景色 |
| color-animation-duration | 数值 | 设置导航栏背景颜色变化的动画时长，默认为 0ms |
| color-animation-timing-func | 字符串 | 设置导航栏背景颜色变化的动画函数，可选值为： |
| - linear：线性 | ||
| - easeIn：渐入 | ||
| - easeOut：渐出 | ||
| - easeInOut：渐入渐出 |
- 点赞
- 收藏
- 关注作者
评论（0）