【愚公系列】《微信小程序与云开发从入门到实践》019-导航组件与页面配置节点组件

原创

愚公搬代码

发布于 2025-01-15 16:41:00

1980

文章被收录于专栏：愚公系列-书籍专栏愚公系列-书籍专栏

标题	详情
作者简介	愚公搬代码
头衔	华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，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：渐入渐出