本文主要是介绍【微信小程序】-- 常用的基础内容组件介绍 -- text rich-text progress icon（七），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
💌 所属专栏：【微信小程序开发教程】
😀 作 者：我是夜阑的狗🐶
🚀 个人简介：一个正在努力学技术的CV工程师，专注基础和实战分享 ，欢迎咨询！
💖 欢迎大家：这里是CSDN，我总结知识的地方，喜欢的话请三连，有问题请私信 😘 😘 😘
文章目录
- 前言
- 一、基础内容组件
- 1、常用的基础内容组件
- 2、 text 组件的基本使用
- 3、 rich-text 组件的基本使用
- 4、 progress 组件的基本使用
- 5、 icon组件的基本使用
- 总结
前言
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第7篇文章;
今天开始学习微信小程序的第四天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。
专栏地址：【微信小程序开发教程】， 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。
如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。
一、基础内容组件
1、常用的基础内容组件
比较常用的基础内容组件有 text 和 rich-text，其作用和使用场景如下所示：
| 组件 | 作用 |
|---|---|
| text | 文本组件 类似于 HTML 中的 span 标签，是一个行内元素 |
| rich-text | 富文本组件 支持把 HTML 字符串渲染为 WXML 结构 |
| progress | 进度条 可实现动画进度或者下载进度等 |
| icon | 图标组件 常用于表示信息提示 |
2、 text 组件的基本使用
首先要找到对应的页面来使用 text 组件，这里以 cshPageText 页面为例，在 cshPageText.wxml 里写页面的结构。下面是 text 组件的属性：
| 属性 | 类型 | 默认值 | 说明 | 最低版本 |
|---|---|---|---|---|
| selectable | boolean | false | 文本是否可选 (已废弃) | 1.1.0 |
| user-select | boolean | false | 文本是否可选，该属性会使文本节点显示为 inline-block | 2.12.1 |
| space | string | 显示连续空格 | 1.4.0 | |
| decode | boolean | false | 是否解码 | 1.4.0 |
cshPageText.wxml：
<view>我是夜阑的狗 60级萌新 UID:<text selectable space="emsp">131338582 忘放孜然</text>
</view>
通过 text 组件的 selectable 属性，实现长按选中文本内容的效果：
3、 rich-text 组件的基本使用
如果想把 HTML字符串渲染为对应的 UI 结构，就要通过 rich-text 组件的 nodes 属性节点，先来看一下rich-text有哪些属性吧。
| 属性 | 类型 | 默认值 | 说明 | 最低版本 |
|---|---|---|---|---|
| nodes | array/string | [] | 节点列表/HTML String | 1.4.0 |
| space | string | 显示连续空格 | 2.4.1 | |
| user-select | boolean | false | 文本是否可选，该属性会使节点显示为 block | 2.24.0 |
其中 nodes 现支持两种节点，通过 type 来区分，分别是元素节点和文本节点，默认是元素节点，在富文本区域里显示的 HTML 节点。
| 属性 | 类型 | 说明 | 必填 | 备注 |
|---|---|---|---|---|
| name | string | 标签名 | 是 | 支持部分受信任的 HTML 节点 |
| attrs | object | 属性 | 否 | 支持部分受信任的属性，遵循 Pascal 命名法 |
| children | array | 子节点列表 | 否 | 结构和 nodes 一致 |
cshPageText.wxml：
注意这里 style 后面要用单引号‘’，不能使用双引号，因为外面已经使用了。
<view><rich-text nodes="<h1 style = 'color: red;'> CSH <h1>"></rich-text>我是夜阑的狗 60级萌新 UID:<text selectable space="emsp">131338582 忘放孜然</text>
</view>
可以来看一下标题效果：
4、 progress 组件的基本使用
如果想要实现进度条，就可以使用 progress 组件，先来介绍 progress 组件的常用属性吧。
| 属性 | 类型 | 默认值 | 说明 | 最低版本 |
|---|---|---|---|---|
| percent | number | 百分比0~100 | 1.0.0 | |
| show-info | boolean | false | 在进度条右侧显示百分比 | 1.0.0 |
| stroke-width | number/string | 6 | 进度条线的宽度 | 1.0.0 |
| active | boolean | false | 进度条从左往右的动画 | 1.0.0 |
cshPageText.wxml：
<view><rich-text nodes="<h1 style = 'color: red;'> CSH <h1>"></rich-text>我是夜阑的狗 60级萌新 UID:<text selectable space="emsp">131338582 忘放孜然</text>
</view>
<view><progress percent="80" show-info stroke-width="8" />
</view>
<view><progress percent="90" show-info active stroke-width="8"/>
</view>
可以来看一下进度条效果：
5、 icon组件的基本使用
icon 组件常用于表示信息提示，先来介绍 icon 组件的常用属性吧。
| 属性 | 类型 | 默认值 | 说明 | 最低版本 |
|---|---|---|---|---|
| type | string | icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear | 1.0.0 | |
| size | number/string | 23 | icon的大小，单位默认为px，2.4.0起支持传入 单位(rpx/px)，2.21.3起支持传入其余单位(rem 等)。 | 1.0.0 |
| color | string | icon的颜色，同 css 的color | 1.0.0 |
cshPageText.wxml：
<view><rich-text nodes="<h1 style = 'color: red;'> CSH <h1>"></rich-text>我是夜阑的狗 60级萌新 UID:<text selectable space="emsp">131338582 忘放孜然</text>
</view>
<view><progress percent="80" show-info stroke-width="8" />
</view>
<view><progress percent="90" show-info active stroke-width="8"/>
</view><view class="icon-box"><icon class="icon-box-img" type="success" size="93"></icon><view class="icon-box-ctn"><view class="icon-box-title">成功</view><view class="icon-box-desc">用于表示操作顺利完成</view></view><icon class="icon-box-img" type="info" size="93"></icon><view class="icon-box-ctn"><view class="icon-box-title">提示</view><view class="icon-box-desc">用于表示信息提示；也常用于缺乏条件的操作拦截，提示用户所需信息</view></view>
</view>
cshPageText.wxss：
.icon-box {text-align: center;
}
可以来看一下图标显示效果：
总结
感谢观看，这里就是常用的基础内容组件介绍使用，如果觉得有帮助，请给文章点个赞吧，让更多的人看到。🌹 🌹 🌹
也欢迎你，关注我。👍 👍 👍
原创不易，还希望各位大佬支持一下，你们的点赞、收藏和留言对我真的很重要！！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。🎉
更多专栏订阅:
- 😀 【LeetCode题解（持续更新中）】
- 🚝 【Java Web项目构建过程】
- 💛 【微信小程序开发教程】
- ⚽ 【JavaScript随手笔记】
- 🤩 【大数据学习笔记（华为云）】
- 🦄 【程序错误解决方法（建议收藏）】
- 🚀 【软件安装教程】
订阅更多，你们将会看到更多的优质内容！！
这篇关于【微信小程序】-- 常用的基础内容组件介绍 -- text rich-text progress icon（七）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
