【愚公系列】《微信小程序项目实战（AI编程+视频图解）》014-莫凡商城小程序项目视图容器组件的应用

💎【行业认证·权威头衔】

✔ 华为云天团核心成员：特约编辑/云享专家/开发者专家/产品云测专家

✔ 开发者社区全满贯：CSDN博客&商业化双料专家/阿里云签约作者/腾讯云内容共创官/掘金&亚马逊&51CTO顶级博主

✔ 技术生态共建先锋：横跨鸿蒙、云计算、AI等前沿领域的技术布道者

🏆【荣誉殿堂】

🎖 连续三年蝉联"华为云十佳博主"（2022-2024）

🎖 双冠加冕CSDN"年度博客之星TOP2"（2022&2023）

🎖 十余个技术社区年度杰出贡献奖得主

📚【知识宝库】

覆盖全栈技术矩阵：

◾ 编程语言：.NET/Java/Python/Go/Node...

◾ 移动生态：HarmonyOS/iOS/Android/小程序

◾ 前沿领域：物联网/网络安全/大数据/AI/元宇宙

◾ 游戏开发：Unity3D引擎深度解析

文章目录

• 🚀基础内容组件
• • [🔎1 图标组件 icon](#🔎1 图标组件 icon)
  • [🔎2 文本组件 text](#🔎2 文本组件 text)
  • [🔎3 进度条组件 progress](#🔎3 进度条组件 progress)
  • [🔎4 富文本组件 rich-text](#🔎4 富文本组件 rich-text)
  • [🔎5 富文本编辑器 editor](#🔎5 富文本编辑器 editor)
  • 🔎补充：基础内容组件对比
  • 🔎注意事项
• [🚀附：AI 提示词模板与完整回答示例](#🚀附：AI 提示词模板与完整回答示例)
• • [🔎模板 1：让 AI 解释微信小程序基础内容组件](#🔎模板 1：让 AI 解释微信小程序基础内容组件)
  • • [🦋一、icon 组件](#🦋一、icon 组件)
    • [🦋二、text 组件](#🦋二、text 组件)
    • [🦋三、progress 组件](#🦋三、progress 组件)
    • [🦋四、rich-text 组件](#🦋四、rich-text 组件)
    • [🦋五、editor 组件](#🦋五、editor 组件)
    • 🦋六、注意事项
  • [🔎模板 2：让 AI 生成商品详情页进度条](#🔎模板 2：让 AI 生成商品详情页进度条)

---

🚀基础内容组件

使用微信小程序的基础内容组件能快速进行各种页面布局设计。基础内容组件包括 icon 组件、text 组件、progress 组件、rich-text 组件、富文本编辑器 editor 等。

组件	作用
icon	显示图标，如成功、警告、提示、取消、下载等。
text	显示文本内容，支持转义、连续空格、解码等。
progress	显示进度条，常用于视频、下载、任务进度等。
rich-text	显示富文本内容，支持部分 HTML 标签和节点。
editor	富文本编辑器，可编辑图片、文字，导出 HTML 和纯文本。

🔎1 图标组件 icon

微信小程序提供了丰富的 icon 组件，有成功、警告、提示、取消、下载等不同的含义，可应用于不同场景，如图 3.6 所示。

常用属性：

属性	类型	默认值	说明
type	string	无	图标类型，常用值：success、success_no_circle、info、warn、waiting、cancel、download、search、clear
size	number/string	23	图标大小，单位 px
color	string	无	图标颜色

示例：

<icon type="success" size="30" color="#09bb07"></icon>
<icon type="info" size="30" color="#576b95"></icon>
<icon type="warn" size="30" color="#e54d42"></icon>
<icon type="cancel" size="30" color="#999999"></icon>
<icon type="download" size="30" color="#FFA500"></icon>

说明：

• icon 组件适合显示简单图标。
• 复杂图标建议使用 image 组件或字体图标。
• type 不同版本可能略有差异，以官方文档为准。

🔎2 文本组件 text

text 组件是用来放置文本信息的组件，其属性如表 3.5 所示。

表 3.5 text 组件的属性

属性	类型	默认值	说明
user-select	boolean	false	设置文本是否可选，该属性会使文本节点显示为 inline-block。
space	string	无	设置显示连续空格。可选值：ensp 为半角空格大小，emsp 为全角空格大小，nbsp 为根据字体设置的空格大小。
decode	boolean	false	设置是否解码。

补充说明：

• text 组件支持转义符 \，如换行 \n、制表符 \t 等。
• text 组件内只支持嵌套 text 组件。
• 除了 text 组件外的其他组件都无法长按选中。
• decode 属性可以解析的有：不换行空格  、小于号 <、大于号 >、& 符号 &、引号 '、半角空格  、全角空格  。
• 各个操作系统的空格标准并不一致，使用 space 属性可以统一连续空格表现。

示例：

<text>你好，微信小程序</text>

<text>第一行\n第二行</text>

<text space="ensp">你好  小程序</text>

<text decode="{{true}}">&lt;view&gt; 是一个组件</text>

<text user-select="{{true}}">这段文字可以长按选中</text>

🔎3 进度条组件 progress

progress 组件是一种用来提升用户体验的组件，就像视频播放器一样，可以通过进度条看到完整视频的长度、当前播放进度，拖动进度条可控制播放，让用户能合理地安排自己的时间。progress 组件的属性如表 3.6 所示。

表 3.6 progress 组件的属性

属性	类型	默认值	说明
percent	number	0	设置百分比（0~100）。
show-info	boolean	false	设置是否在进度条右侧显示百分比。
border-radius	number/string	0	设置圆角大小。
font-size	number/string	16	设置进度条右侧百分比的字体大小。
stroke-width	number	6	设置进度条线的宽度，单位为 px。
color	string	#09bb07	设置进度条颜色（建议使用 activeColor）。
activeColor	string	#09bb07	设置激活部分的进度条的颜色。
backgroundColor	string	#ebebeb	设置未激活部分的进度条的颜色。
active	boolean	false	设置进度条是否显示从左往右的动画式流动填充效果。
active-mode	string	backwards	backwards：动画从头播放；forwards：动画从上次结束点接着播放。
duration	number	30	设置进度增加 1% 所需的时间，单位为 ms。
bindactiveend	eventhandle	无	设置动画完成事件。

示例：

<progress
  percent="{{percent}}"
  show-info="{{true}}"
  stroke-width="10"
  activeColor="#FFA500"
  backgroundColor="#eeeeee"
  active="{{true}}"
  bindactiveend="onActiveEnd"
/>

Page({
  data: {
    percent: 60
  },

  onActiveEnd() {
    console.log('进度条动画完成');
  }
});

说明：

• percent 取值范围为 0~100。
• active 为 true 时，进度条会从左往右填充。
• show-info 为 true 时，右侧显示百分比。
• 可以通过 setData 动态改变 percent，实现进度更新。

🔎4 富文本组件 rich-text

通过 rich-text 组件可以在 WXML 页面文件中显示一些富文本内容，如显示 HTML 的一些元素内容。rich-text 组件的属性如表 3.7 所示。

表 3.7 rich-text 组件的属性

属性	类型	默认值	说明
nodes	array/string	无	节点列表 / HTML 字符串。
space	string	无	显示连续空格，ensp 为半角空格大小，emsp 为全角空格大小，nbsp 为根据字体设置的空格大小。
user-select	boolean	false	设置文本是否可选，该属性会使节点显示为 block。

示例：

<rich-text nodes="{{html}}"></rich-text>

Page({
  data: {
    html: '<h1>莫凡商城</h1><p style="color:red;">欢迎选购图书</p>'
  }
});

说明：

• nodes 可以是 HTML 字符串，也可以是节点数组。
• rich-text 适合展示富文本内容，不响应事件。
• 不要直接渲染未经处理的用户输入，避免 XSS 风险。
• 支持的 HTML 标签和属性有限，复杂样式建议使用 WXML 组件实现。

🔎5 富文本编辑器 editor

富文本编辑器 editor 可以对图片、文字进行编辑，可以导出带标签的 HTML 代码和纯文本内容。富文本组件内部引入了一些基本的样式，使得内容可以正确展示，开发时可以对这些内容进行覆盖。editor 的属性如表 3.8 所示。

表 3.8 editor 的属性

属性	类型	默认值	说明
read-only	boolean	false	设置编辑器是否为只读。
placeholder	string	无	设置提示信息。
show-img-size	boolean	false	设置点击图片时是否显示图片大小控件。
show-img-toolbar	boolean	false	设置点击图片时是否显示工具栏控件。
show-img-resize	boolean	false	设置点击图片时是否显示修改尺寸控件。
bindready	eventhandle	无	当编辑器初始化完成时触发。
bindfocus	eventhandle	无	当编辑器获得焦点时触发，event.detail = {html, text, delta}。
bindblur	eventhandle	无	当编辑器失去焦点时触发，event.detail = {html, text, delta}。
bindinput	eventhandle	无	当编辑器内容改变时触发，event.detail = {html, text, delta}。
bindstatuschange	eventhandle	无	当通过 context 改变编辑器内样式时触发，返回选区已设置的样式。

示例：

<editor
  id="editor"
  placeholder="请输入内容"
  show-img-size="{{true}}"
  show-img-toolbar="{{true}}"
  show-img-resize="{{true}}"
  bindready="onEditorReady"
  bindinput="onEditorInput"
></editor>

<button bindtap="getContent">获取内容</button>

Page({
  onEditorReady() {
    wx.createSelectorQuery()
      .select('#editor')
      .context(function (res) {
        this.editorCtx = res.context;
      })
      .exec();
  },

  onEditorInput(e) {
    console.log('HTML：', e.detail.html);
    console.log('文本：', e.detail.text);
  },

  getContent() {
    this.editorCtx.getContents({
      success: (res) => {
        console.log('HTML：', res.html);
        console.log('文本：', res.text);
      }
    });
  }
});

说明：

• editor 需要通过 wx.createSelectorQuery() 获取上下文。
• 可以通过 editorCtx 插入图片、设置内容、获取内容等。
• editor 属于原生组件，层级较高，使用时注意遮挡问题。
• 需要基础库版本支持，实际以官方文档为准。

🔎补充：基础内容组件对比

组件	主要用途	是否支持交互	常用属性
icon	显示简单图标	否	type、size、color
text	显示文本	支持长按选中	user-select、space、decode
progress	显示进度	支持动画事件	percent、show-info、activeColor
rich-text	显示富文本	否	nodes、space、user-select
editor	编辑富文本	是	read-only、placeholder、bindinput

🔎注意事项

1. icon 的 type 值有限，复杂图标建议使用图片。
2. text 内只能嵌套 text，不能嵌套 view。
3. text 的连续空格需要 space 属性。
4. progress 的 percent 范围为 0~100。
5. rich-text 不响应事件，适合展示，不适合交互。
6. rich-text 渲染用户输入时要注意 XSS 安全。
7. editor 需要通过上下文操作，不能直接修改内容。
8. 使用 AI 生成代码后，需要人工检查属性、事件和兼容性。

🚀附：AI 提示词模板与完整回答示例

原文未包含 AI 提示词模板和回答。以下为便于学习和开发补充的完整模板与完整回答，可直接复制使用。

🔎模板 1：让 AI 解释微信小程序基础内容组件

提示词模板：

请详细解释微信小程序的基础内容组件，包括 icon、text、progress、rich-text、editor。
要求：
1. 分别说明每个组件的作用；
2. 列出常用属性；
3. 给出完整示例代码；
4. 说明注意事项。
请用表格和分级标题输出，内容完整。

完整回答示例：

微信小程序基础内容组件详解

🦋一、icon 组件

作用： 显示简单图标。

常用属性：

属性	类型	说明
type	string	图标类型，如 success、info、warn、cancel、download
size	number/string	图标大小
color	string	图标颜色

示例：

<icon type="success" size="30" color="#09bb07"></icon>

🦋二、text 组件

作用： 显示文本内容。

常用属性：

属性	类型	说明
user-select	boolean	文本是否可选
space	string	显示连续空格，可选 ensp、emsp、nbsp
decode	boolean	是否解码

示例：

<text>你好，微信小程序</text>
<text space="ensp">你好  小程序</text>
<text decode="{{true}}">&lt;view&gt;</text>

🦋三、progress 组件

作用： 显示进度条。

常用属性：

属性	类型	说明
percent	number	百分比 0~100
show-info	boolean	是否显示百分比
activeColor	string	激活部分颜色
backgroundColor	string	未激活部分颜色
active	boolean	是否显示动画

示例：

<progress percent="60" show-info activeColor="#FFA500" backgroundColor="#eee" active />

🦋四、rich-text 组件

作用： 显示富文本内容。

常用属性：

属性	类型	说明
nodes	array/string	节点列表或 HTML 字符串
space	string	显示连续空格
user-select	boolean	文本是否可选

示例：

<rich-text nodes="{{html}}"></rich-text>

Page({
  data: {
    html: '<h1>标题</h1><p>内容</p>'
  }
});

🦋五、editor 组件

作用： 富文本编辑器，可编辑图片和文字。

常用属性：

属性	类型	说明
read-only	boolean	是否只读
placeholder	string	提示信息
show-img-size	boolean	是否显示图片大小控件
show-img-toolbar	boolean	是否显示工具栏
show-img-resize	boolean	是否显示修改尺寸控件
bindready	eventhandle	初始化完成时触发
bindinput	eventhandle	内容改变时触发

示例：

<editor id="editor" placeholder="请输入内容" bindready="onEditorReady" bindinput="onEditorInput"></editor>

Page({
  onEditorReady() {
    wx.createSelectorQuery()
      .select('#editor')
      .context(function (res) {
        this.editorCtx = res.context;
      })
      .exec();
  },
  onEditorInput(e) {
    console.log(e.detail.html, e.detail.text);
  }
});

🦋六、注意事项

1. text 内只能嵌套 text。
2. progress 的 percent 范围为 0~100。
3. rich-text 不响应事件。
4. editor 需要通过上下文操作。
5. 使用 AI 生成代码后需要人工审核。

🔎模板 2：让 AI 生成商品详情页进度条

提示词模板：

请使用微信小程序原生框架，生成一个商品详情页中的库存进度条。
要求：
1. 使用 progress 组件；
2. 显示已售百分比；
3. 进度条颜色为橙色；
4. 显示百分比信息；
5. 给出完整 WXML、WXSS、JS 代码，并解释关键逻辑。

完整回答示例：

index.wxml

<view class="page">
  <view class="title">库存进度</view>
  <progress
    percent="{{percent}}"
    show-info="{{true}}"
    stroke-width="10"
    activeColor="#FFA500"
    backgroundColor="#eeeeee"
    active="{{true}}"
  />
  <view class="desc">已售 {{percent}}%</view>
</view>

index.wxss

.page {
  padding: 30rpx;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.desc {
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #666;
}

index.js

Page({
  data: {
    percent: 75
  }
});

关键逻辑说明：

1. percent 控制进度条百分比。
2. show-info 显示右侧百分比。
3. activeColor 设置激活部分颜色。
4. backgroundColor 设置未激活部分颜色。
5. 可通过 setData 动态更新 percent。