🚀前言

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

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

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

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

🚀一、基础功能组件

基础功能组件是指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>

图标类型及效果：

1. 成功样式图标：
   type="success"，表示成功。

2. 提示样式图标：
   type="info"，表示提示。

3. 无圆对号样式图标：
   type="success_no_circle"，表示成功，但没有圆圈。

4. 警告样式图标：
   type="warn"，表示警告。

5. 等待样式图标：
   type="waiting"，表示等待。

6. 取消样式图标：
   type="cancel"，表示取消。

7. 下载样式图标：
   type="download"，表示下载。

8. 搜索样式图标：
   type="search"，表示搜索。

9. 清除样式图标：
   type="clear"，表示清除。

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

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

🔎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 组件的可配置属性较多，如表所示。

🔎3.text 组件的应用

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

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

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

表 text 组件的属性

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

表decode 属性支持的解码字符

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

🔎4.rich-text 组件的应用

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

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

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

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

2. 在 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 节点的对象渲染富文本

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

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

2. 在 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 节点对象可配置的属性如表所示。

rich-text 支持的标签及属性

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