【愚公系列】《微信小程序与云开发从入门到实践》016-基础功能组件

原创

愚公搬代码

发布于 2025-01-15 15:57:58

16700

代码可运行

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

运行总次数：0

代码可运行

标题	详情
作者简介	愚公搬代码
头衔	华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉	2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。
博客内容	.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎	👍点赞、✍评论、⭐收藏

🚀前言

在微信小程序的开发旅程中，基础功能组件是构建应用的基石。这些组件不仅提供了常见的用户交互功能，还帮助开发者快速实现丰富的应用场景。无论是按钮、输入框，还是导航栏、列表等，这些基础组件的合理运用都能大大提升用户体验和开发效率。

本篇文章将深入探讨微信小程序的基础功能组件，详细介绍它们的特性、使用方法以及最佳实践。我们将结合实际案例，帮助你理解如何灵活运用这些组件，以满足不同的业务需求和用户期望。

所谓功能组件，是指为页面提供功能支持的基础组件。通过容器组件将功能组件进行包装即可扩展出更复杂的自定义组件。常用的功能类组件有文本标签、图标、进度条、按钮、选择框、选择器等，每种功能组件都有其特定的属性与切样式。

无论你是小程序开发的新手，还是希望进一步优化应用的资深开发者，这篇文章都将为你提供实用的技巧和深入的理解。让我们一起探索微信小程序的基础功能组件，打造出更具吸引力和实用性的小程序吧！

🚀一、基础功能组件

基础功能组件是指UI样式简单一般不会有太多交互功能的组件，包括icon(图标)组件、progress(进度条)组件、text(文本)组件与rich-text(富文本)组件。

🔎1.icon 组件的应用

在页面开发时，图标组件（icon）经常用于显示一些常见提示，例如告知用户操作成功时显示一个绿色的“对号”图标，或者告知用户操作异常时显示一个红色的“叹号”图标。这些常用的图标已经内置于小程序开发框架中，可以直接使用 icon 组件。

示例代码：

在示例工程中的 pages 文件夹下新建一个名为 iconDemo 的页面，并在 icon.wxml 文件中编写以下示例代码：

<!-- pages/iconDemo/iconDemo.wxml -->
<view>成功样式图标: <icon type="success" size="30"></icon></view>
<view>提示样式图标: <icon type="info" size="30"></icon></view>
<view>无圆对号样式图标: <icon type="success_no_circle" size="30"></icon></view>
<view>警告样式图标: <icon type="warn" size="30"></icon></view>
<view>等待样式图标: <icon type="waiting" size="30"></icon></view>
<view>取消样式图标: <icon type="cancel" size="30"></icon></view>
<view>下载样式图标: <icon type="download" size="30"></icon></view>
<view>搜索样式图标: <icon type="search" size="30"></icon></view>
<view>清除样式图标: <icon type="clear" size="30"></icon></view>

图标类型及效果：

成功样式图标：undefinedtype="success"，表示成功。
提示样式图标：undefinedtype="info"，表示提示。
无圆对号样式图标：undefinedtype="success_no_circle"，表示成功，但没有圆圈。
警告样式图标：undefinedtype="warn"，表示警告。
等待样式图标：undefinedtype="waiting"，表示等待。
取消样式图标：undefinedtype="cancel"，表示取消。
下载样式图标：undefinedtype="download"，表示下载。
搜索样式图标：undefinedtype="search"，表示搜索。
清除样式图标：undefinedtype="clear"，表示清除。

运行效果：

运行代码后，页面将展示不同类型的图标，效果如下图（假设是图4-1）。每个图标的大小均为30px，展示了不同的状态提示图标。

icon 组件可配置的属性有3个，如表所示。

属性名	类型	意义
type	字符串	设置图标的类型，可选值如下：success、success_no_circle、info、warn、waiting、cancel、download、search、clear
size	数值	设置图标的大小
color	字符串	设置图标的颜色

🔎2.progress 组件的应用

progress 是一种进度条组件，在实际页面开发中，有很多场景会使用到进度条组件。例如视频播放的进度，下载任务的进度等。progress 组件提供了许多可配置的属性，支持显示百分比进度、播放进度动画等。

在 pages 文件夹下新建一个名为 progressDemo 的页面，在 progressDemo.wxml 文件中编写如下代码:

<!--pages/progressDemo/progressDemo.wxml-->
<view><progress percent="20" show-info stroke-width="3"/></view>
<view><progress percent="40" active stroke-width="6" show-info/></view>
<view><progress percent="60" active stroke-width="9" show-info/></view>
<view><progress percent="80" color="blue" active stroke-width="12" show-info border-radius="6"/></view>

运行代码，效果如图所示。

可以发现，页面首先加载时，进度条会以动画的方式前进到指定的进度。相比 icon 组件，progress 组件的可配置属性较多，如表所示。

属性名	类型	意义
percent	数值	当前进度条的百分比
show-info	布尔值	设置在进度条右侧是否显示百分比
border-radius	数值或字符串	设置进度条的圆角大小
font-size	数值或字符串	设置进度条右侧百分比数字的字体大小
stroke-width	数值或字符串	设置进度条线的宽度
color	字符串	设置进度条颜色
activeColor	字符串	设置进度条条激活部分的颜色
backgroundColor	字符串	设置未激活部分的进度条颜色
active	布尔值	设置是否显示进度条从左到右的动画进度
active-mode	字符串	设置动画的播放类型，包括以下两种类型：`backwards`：动画从头播放 `forwards`：动画从上次结束的地方播放
duration	数值	设置进度增加 1% 动画所需的时间，默认为 30ms
bindactiveend	函数	设置动画播放完成的回调

🔎3.text 组件的应用

text 是一种用来展示文本的组件。其本身使用非常简单，当我们新建一个页面时，默认生成的模板中就带有一个 text 组件，如下所示：

<!--pages/textDemo/textDemo.wxml-->
<text user-select>文本示例</text>

text 组件可配置的属性如表所示。

表 text 组件的属性

属性名	类型	意义
user-select	布尔值	文本是否支持选中
space	字符串	设置空格字符的大小，可设置为：ensp：半角空格，emsp：全角空格，nbsp：半角不换行的空格
decode	布尔值	设置是否对文本进行解码

decode 属性用来设置是否对文本进行解码操作，支持解码的字符如表所示。

表decode 属性支持的解码字符

字符	意义
	半角不断行空格符
<	小于号
>	大于号
&	"&" 符号
'	"'" 符号
	半角空格
	全角空格

还有一点需要注意，text 组件内部只允许嵌套 text 组件。

🔎4.rich-text 组件的应用

在小程序中，rich-text 组件可以用来渲染富文本内容。下面是两个示例，其中一个是使用字符串渲染富文本，另一个是使用描述 Node 节点的对象来渲染富文本。

🦋4.1 示例 1：使用字符串渲染富文本

在 pages/textDemo/textDemo.wxml 文件中编写以下代码：

<!--pages/textDemo/textDemo.wxml-->
<rich-text nodes="{{html}}"></rich-text>

在 textDemo.js 文件中定义一个字符串 html：

// pages/textDemo/textDemo.js
Page({
  data: {
    html: `<div>
             <h1>标题</h1>
             <p class="p">正文段落<i>斜体</i> <b>粗体</b>.</p>
           </div>`
  }
});

运行代码，效果如图所示。

🦋4.2 示例 2：使用描述 Node 节点的对象渲染富文本

修改 textDemo.wxml 文件中的代码如下：

<!--pages/textDemo/textDemo.wxml-->
<rich-text nodes="{{nodes}}"></rich-text>

在 textDemo.js 文件中定义一个 Node 节点对象数组 nodes：

// pages/textDemo/textDemo.js
Page({
  data: {
    nodes: [
      {
        name: 'h1',
        attrs: {
          style: 'line-height: 60px; color: #1AAD19;'
        },
        children: [
          {
            type: 'text',
            text: '标题'
          }
        ]
      },
      {
        name: 'p',
        children: [
          {
            type: 'text',
            text: '正文段落'
          }
        ]
      }
    ]
  }
});

运行代码，效果如图所示。

🦋4.3 使用 Node 对象渲染富文本

在使用 Node 对象渲染富文本时，需要传递一组 Node 节点对象。

Node 节点对象可配置的属性如表所示。

属性名	类型	意义
name	字符串	标签名
attrs	对象	当前标签元素的属性
children	数组	子节点数组
type	字符串	节点类型，可设置为 `.node`：标签节点，`.text`：文本节点
text	字符串	文本，只有 tex 节点可以设置此值

rich-text 支持的标签及属性

标签名	支持的属性	意义
a	class、style	超链接标签
abbr	class、style	缩写标签
address	class、style	文档联系人的信息标签
article	class、style	独立内容标签
aside	class、style	侧边栏标签
b	class、style	粗体标签
bdi	class、style	bidi 隔离标签
bdo	class、style、dir	bidi 覆盖标签
big	class、style	大号字体文本标签
blockquote	class、style	引用标签
br	class、style	换行标签
caption	class、style	表格标题标签
center	class、style	文本居中标签
cite	class、style	作品标题标标签
code	class、style	代码文本标签
col	class、style、span、width	对表格中的列进行组合
colgroup	class、style、span、width	定义 colgroup 内每一列的列属性
dd	class、style	列表项标签
del	class、style	文本删除标签
div	class、style	块标签
dl	class、style	列表标文本标签
dt	class、style	列表标标签
em	class、style	文本强调标签
fieldset	class、style	表单分组标签
font	class、style	字体配置标签
footer	class、style	页脚标签
h1	class、style	标题标签
h2	class、style	标题标签
h3	class、style	标题标签
h4	class、style	标题标签
h5	class、style	标题标签
h6	class、style	标题标签
header	class、style	页头标签
hr	class、style	水平分割线标签
i	class、style	文本斜体标签
img	class、style、alt、src、height、width	图片标签
ins	class、style	文本插入标签
label	class、style	标注标签
legend	class、style	fieldset 中的标题标签
li	class、style	列表项标签
mark	class、style	文本记号标签
nav	class、style	导航标签
ol	class、style、start、type	有序列表标签
p	class、style	段落标签
pre	class、style	文本预格式化标签
q	class、style	文本引用标签
rt	class、style	注音标签
ruby	class、style	定义注音，与 rt 和 rp 标签一起使用
s	class、style	定义不正确文本的标签
section	class、style	区域标签
small	class、style	小号字体标签
span	class、style	行内元素标签
strong	class、style	文本加粗标签
sub	class、style	下标文本标签
sup	class、style	上标文本标签
table	class、style、width	表格标签
tbody	class、style	主体内容标签
td	class、style、colspan、height、rowspan、width	表格中的单元格标签
tfoot	class、style	表格页脚标签
th	class、style、colspan、height、rowspan、width	表头单元格标签
thead	class、style	表头内容标签
tr	class、style、colspan、height、rowspan、width	表格行标签
tt	class、style	打字机文本标签
u	class、style	下划线文本标签
ul	class、style	无序列表标签

在 rich-text 渲染时，其中大部分标签的用法都与 HTML 原标签的用法一致。但是有些也有区别，比如富文本中的 img 标签只能支持网络图片资源。如果使用了非上述列表中的标签，则会被自动移除。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S11#重启人生

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S11#重启人生

登录后参与评论

0 条评论

热度