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

🚀前言

在微信小程序中，基础内容组件是用于构建用户界面和展示内容的基本元素。这些组件提供了丰富的功能和灵活的布局方式，使开发者能够创建直观、互动和响应迅速的小程序界面。

🚀一、基础内容组件

🔎1.icon组件

微信小程序中的 icon 组件用于显示图标，它内置了一些常用的图标，开发者可以通过设置参数来指定图标的类型、大小、颜色等属性。

🦋1.1 icon 组件参数

• type (String)：图标类型，必填。可选值有：
  • success
  • success_no_circle
  • info
  • warn
  • waiting
  • cancel
  • download
  • search
  • clear
• size (Number)：图标大小，单位为 px，默认值为 23。
• color (String)：图标颜色，默认值为 #000000。

🦋1.2 示例代码

☀️1.2.1 WXML 文件

<view class="container">
  <icon type="success" size="30" color="#4caf50"></icon>
  <icon type="info" size="30" color="#2196f3"></icon>
  <icon type="warn" size="30" color="#ff9800"></icon>
  <icon type="waiting" size="30" color="#9e9e9e"></icon>
  <icon type="cancel" size="30" color="#f44336"></icon>
  <icon type="download" size="30" color="#00bcd4"></icon>
  <icon type="search" size="30" color="#3f51b5"></icon>
  <icon type="clear" size="30" color="#9c27b0"></icon>
</view>

☀️1.2.2 WXSS 文件

/* app.wxss */
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 20px;
}

icon {
  margin: 10px;
}

🦋1.3 解释说明

1. WXML 部分：

   • 在 view 容器中添加多个 icon 组件，每个 icon 组件设置不同的 type、size 和 color 参数，以显示不同的图标。
   • 通过设置 type 参数，指定图标类型，比如 success、info、warn 等。
   • 通过设置 size 参数，控制图标的大小，单位为 px。
   • 通过设置 color 参数，控制图标的颜色。

2. WXSS 部分：

   • .container 类设置为 flex 布局，使图标在容器中按行排列，并通过 flex-wrap: wrap; 使图标在一行排满后自动换行。
   • 通过 margin 属性设置图标之间的间距，使布局更加美观。

🦋1.4 常见用途

• 状态指示：使用 icon 组件表示操作的结果状态，如成功、失败、警告等。
• 操作按钮：将 icon 组件作为按钮图标使用，如搜索、下载、清除等操作。
• 导航图标：在导航栏或选项卡中使用 icon 组件，提高用户界面的直观性。

🔎2.progress组件

在微信小程序中，progress 组件用于显示操作的进度，如文件下载、任务完成等。它提供了一些参数来控制进度条的样式和行为。

🦋2.1 progress 组件参数

• percent (Number)：进度百分比，取值范围为 0 到 100。
• stroke-width (Number)：进度条线的宽度，单位为 px，默认值为 6。
• active-color (String)：已激活部分的颜色，默认为 #09BB07。
• background-color (String)：未激活部分的颜色，默认为 #EBEBEB。
• active (Boolean)：是否启用进度条，默认为 true。
• show-info (Boolean)：是否显示进度百分比，默认为 false。

🦋2.2 示例代码

☀️2.2.1 WXML 文件

<view class="container">
  <progress percent="30" show-info></progress>
  <progress percent="60" stroke-width="10" active-color="#4caf50"></progress>
  <progress percent="90" stroke-width="14" active-color="#f44336" background-color="#ffffff"></progress>
</view>

☀️2.2.2 WXSS 文件

/* app.wxss */
.container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 300px;
}

progress {
  width: 80%;
  margin-bottom: 20px;
}

🦋2.3 解释说明

1. WXML 部分：

   • 在 view 容器中添加多个 progress 组件，每个 progress 组件设置不同的 percent、stroke-width、active-color 和 background-color 参数，以显示不同样式的进度条。
   • 通过设置 percent 参数，指定进度的百分比，取值范围为 0 到 100。
   • 通过设置 stroke-width 参数，控制进度条线的宽度。
   • 通过设置 active-color 和 background-color 参数，分别控制已激活部分和未激活部分的颜色。
   • 设置 show-info 参数为 true，以显示进度条上的百分比信息。

2. WXSS 部分：

   • .container 类设置为 flex 垂直布局，使进度条垂直排列，并在容器内居中显示。
   • progress 组件设置宽度为 80%，并通过 margin-bottom 设置进度条之间的间距，使布局更加美观。

🦋2.4 常见用途

• 文件下载进度：显示文件下载进度。
• 任务完成进度：显示任务执行的进度，如上传文件、导出数据等。
• 加载状态指示：在数据加载过程中，显示数据加载的进度。

🔎3.rich-text组件

微信小程序的 rich-text 组件允许开发者展示富文本内容。它能够解析和渲染HTML片段，因此在展示复杂格式的文本时非常有用。

🦋3.1 组件参数介绍

1. nodes:

   • 类型: Array | String
   • 默认值: []
   • 说明: 要展示的HTML节点列表或HTML字符串。

2. space:

   • 类型: String
   • 默认值: “”
   • 说明: 设置 text 节点之间的空格。支持的值为 ensp、emsp 和 nbsp。

3. user-select:

   • 类型: Boolean
   • 默认值: false
   • 说明: 设置富文本是否可以被用户选择。

🦋3.2 基本使用示例

☀️3.2.1 示例1：使用 HTML 字符串

<view class="container">
  <rich-text nodes="<h1>Hello World</h1><p>This is <b>rich text</b> content.</p>"></rich-text>
</view>

☀️3.2.2 示例2：使用节点数组

<view class="container">
  <rich-text nodes="{{nodes}}"></rich-text>
</view>

Page({
  data: {
    nodes: [
      {
        name: 'h1',
        attrs: {
          style: 'color: blue;'
        },
        children: [{
          type: 'text',
          text: 'Hello World'
        }]
      },
      {
        name: 'p',
        attrs: {},
        children: [{
          type: 'text',
          text: 'This is rich text content.'
        }]
      }
    ]
  }
});

🦋3.3 富文本内容的处理和展示

1. 支持的标签:

   • a, abbr, b, blockquote, br, code, col, colgroup, dd, del, div, dl, dt, em, fieldset, h1, h2, h3, h4, h5, h6, hr, i, img, ins, label, legend, li, ol, p, q, span, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, ul.

2. 支持的属性:

   • class, style, width, height, src, href, alt.

🦋3.4 复杂案例

☀️3.4.1 示例3：嵌套的富文本

<view class="container">
  <rich-text nodes="{{nodes}}"></rich-text>
</view>

Page({
  data: {
    nodes: [
      {
        name: 'div',
        attrs: {
          style: 'border: 1px solid #ddd; padding: 10px;'
        },
        children: [
          {
            name: 'h2',
            attrs: {
              style: 'color: red;'
            },
            children: [{
              type: 'text',
              text: 'Title'
            }]
          },
          {
            name: 'p',
            attrs: {},
            children: [{
              type: 'text',
              text: 'This is a paragraph with '
            }, {
              name: 'b',
              attrs: {},
              children: [{
                type: 'text',
                text: 'bold text'
              }]
            }, {
              type: 'text',
              text: ' and '
            }, {
              name: 'i',
              attrs: {},
              children: [{
                type: 'text',
                text: 'italic text'
              }]
            }, {
              type: 'text',
              text: '.'
            }]
          }
        ]
      }
    ]
  }
});

🔎4.text组件

微信小程序的 text 组件用于展示单一格式的文本。相比 rich-text 组件，text 组件更加轻量，适用于不需要复杂格式的场景。以下是 text 组件的一些关键参数和相关案例。

🦋4.1 组件参数介绍

1. selectable:

   • 类型: Boolean
   • 默认值: false
   • 说明: 是否支持长按选中复制。

2. space:

   • 类型: String
   • 默认值: false
   • 说明: 显示连续空格。支持的值为 ensp、emsp 和 nbsp。

3. decode:

   • 类型: Boolean
   • 默认值: false
   • 说明: 是否解码。对 < > & ' " 进行解码。

🦋4.2 基本使用示例

☀️4.2.1 示例1：基本文本展示

<view class="container">
  <text>Hello World</text>
</view>

☀️4.2.2 示例2：可选择的文本

<view class="container">
  <text selectable="true">This text can be selected and copied.</text>
</view>

☀️4.2.3 示例3：显示空格

<view class="container">
  <text space="nbsp">This text has&nbsp;&nbsp;&nbsp;multiple spaces.</text>
</view>

🦋4.3 复杂案例

☀️4.3.1 示例4：结合样式和解码功能

<view class="container">
  <text style="color: blue; font-size: 20px;" decode="true">
    This text &lt;b&gt;includes&lt;/b&gt; HTML entities.
  </text>
</view>

☀️4.3.2 示例5：多行文本与样式

<view class="container">
  <text style="white-space: pre-line;">
    Line 1
    Line 2
    Line 3
  </text>
</view>

🦋4.4 使用技巧

• 样式调整: 通过 style 属性，可以对文本颜色、大小、字体、行高等进行调整，使文本更加符合设计要求。
• 解码功能: 当文本包含HTML实体时，可以使用 decode 属性进行解码，确保文本正确显示。
• 连续空格: 通过 space 属性，可以控制文本中的空格显示，避免HTML中的空格被自动合并。

🦋4.5 结合其他组件的案例

☀️4.5.1 示例6：结合 view 组件和 text 组件

<view class="container">
  <view style="padding: 10px; background-color: #f0f0f0;">
    <text style="color: red; font-size: 18px;">Important Notice:</text>
    <text>This is a message for all users.</text>
  </view>
</view>

🚀感谢：给读者的一封信

亲爱的读者，

我在这篇文章中投入了大量的心血和时间，希望为您提供有价值的内容。这篇文章包含了深入的研究和个人经验，我相信这些信息对您非常有帮助。

如果您觉得这篇文章对您有所帮助，我诚恳地请求您考虑赞赏1元钱的支持。这个金额不会对您的财务状况造成负担，但它会对我继续创作高质量的内容产生积极的影响。

我之所以写这篇文章，是因为我热爱分享有用的知识和见解。您的支持将帮助我继续这个使命，也鼓励我花更多的时间和精力创作更多有价值的内容。

如果您愿意支持我的创作，请扫描下面二维码，您的支持将不胜感激。同时，如果您有任何反馈或建议，也欢迎与我分享。

再次感谢您的阅读和支持！

最诚挚的问候， “愚公搬代码”