4.3 基础内容组件
基础内容组件主要包含4种，如表4-10所示。
表4-10 基础内容组件
4.3.1 icon
<icon>为图标组件，开发者可以自定义其类型、大小和颜色。该组件对应的属性如表4-11所示。
表4-11 icon组件属性
不同type属性值对应的样式，如表4-12所示。
表4-12 icon组件的type属性值对应的样式
例如声明一个红色、40像素大小的警告图标，WXML代码如下：
<icon type="warn" size="40" color="red"></icon>
如果有多个图标需要批量生成，可以事先在对应的JS文件中用data记录数据，然后在WXML文件中配合使用<block>标签。
例如依次生成红、黄、蓝色的信息图标，WXML代码如下：
此时配套的JS代码如下：
【例4-6】 基础内容组件icon的简单应用
WXML（pages/demo02/icon/icon.wxml）的代码片段如下：
视频讲解
JS（pages/demo02/icon/icon.js）的代码片段如下：
运行效果如图4-6所示。
图4-6 基础内容组件icon的简单应用
【代码说明】
本示例在icon.js的data中设置了3个数组，即iconType、iconColor、iconSize，分别用于记录图标的类型、图标的颜色和图标的大小；在icon.wxml中使用<block>标签配合wx:for循环实现批量生成多个标签组件的效果。由图4-6可见，图标的类型、颜色和大小均可以自由变化。
4.3.2 text
text为文本组件，该组件对应的属性如表4-13所示。
表4-13 text组件属性
例如生成一个内容可选的文本组件，代码如下：
<text selectable>这一段测试文本</text>
space属性值的具体介绍如表4-14所示。
表4-14 text组件的space属性值
注意事项如下：
（1）decode可以解析的有 、<、>、&、'、 、 。
（2）各个操作系统的空格标准并不一致。
（3）<text/>组件内只支持<text/>嵌套。
（4）除了文本节点以外的其他节点都无法长按选中。
【例4-7】 基础内容组件text的简单应用
WXML（pages/demo02/text/text.wxml）的代码片段如下：
视频讲解
WXSS（pages/demo02/text/text.wxss）的代码如下：
运行效果如图4-7所示。
图4-7 基础内容组件text的简单应用
【代码说明】
本示例在text.wxml中放置了3组案例，即文本可选、空格显示形式和文本解码。其中，第1组使用selectable属性实现了<text>文本内容可选效果；第2组包含了4个<text>组件，分别用于验证同样的4个连续中文空格的显示效果；第3组包含了两个<text>组件，分别用于验证特殊符号（ 、<、>、&、'、 、 ）的解码效果。
为了更清晰地显示效果，在text.wxss中为<text>组件设置了内／外边距为15rpx、带有1rpx宽的银色实线边框、块级元素显示以及10号字的样式。
4.3.3 rich-text
<rich-text>为富文本组件，该组件对应的属性如表4-15所示。
表4-15 rich-text组件属性
注意：该组件由基础库1.4.0开始支持，低版本需要做兼容处理。
例如在WXML中声明一个富文本组件，代码如下：
<rich-text nodes='{{nodes}}'></rich-text>
其中{{nodes}}为自定义名称的变量，用于定义HTML内容。
如果是用纯字符串（String类型）描述HTML代码，在JS中表示如下：
上述代码表示声明一个<div>元素，里面的文字内容是“Hello World!”，并且该元素的行高为60像素（HTML不支持rpx单位，如果使用会无效）、字体为红色。其运行效果如图4-8所示。
图4-8 基础内容组件rich-text的简单应用
需要注意的是，官方声明nodes属性推荐使用Array类型，这是由于<rich-text>组件会将String类型转换为Array类型，所以在内容比较多的时候性能会有所下降。
Array类型目前支持两种节点，分别为元素节点（node）和文本节点（text）：支持的事件有tap、touchstart、touchmove、touchcancel、touchend和longtap。
1 元素节点
当type='node'时为元素节点效果，相关属性如表4-16所示。
表4-16 元素节点（type='node'）属性一览表
注意：元素节点为默认效果，可以省略type类型不写。
2 文本节点
当type='text'时为文本节点效果，相关属性如表4-17所示。
表4-17 文本节点（type='text'）属性
注意：文本节点不支持样式效果，只用于显示纯文本内容，但可以与元素节点配合使用。
因此，上面的例子可以重新用数组（Array类型）描述，将JS代码改写如下：
这里将元素节点与文本节点配合使用，使用元素节点的attrs属性声明样式、使用文本节点的text属性声明文字内容，其运行结果与改写前完全一样。需要注意的是，元素节点全局支持class和style属性，但不支持id属性。
上面的示例使用了HTML中的div元素，除此之外还有42个HTML常用标签可以被识别。受信任的HTML节点及其属性如表4-18所示。
表4-18 受信任的HTML节点及其属性
【例4-8】 基础内容组件rich-text的简单应用
WXML（pages/demo02/rich-text/rich-text.wxml）的代码片段如下：
视频讲解
JS（pages/demo02/rich-text/rich-text.js）的代码片段如下：
WXSS（pages/demo02/rich-text/rich-text.wxss）的代码如下：
运行效果如图4-9所示。
图4-9 基础内容组件rich-text的简单应用
【代码说明】
本示例在rich-text.wxml中放置了3组案例，即元素节点（使用style样式）、元素节点（使用class样式）和文本节点，均用于实现同一种元素样式（<div>元素、行高60像素、红色加粗字体）。
其中，第1组在JS中使用style属性实现元素样式；第2组在JS中使用class属性自定义myStyle元素样式，并且在WXSS中对myStyle进行完善；第3组直接使用String类型实现元素样式。
由图4-9可见，这3种不同的表述方式可以实现完全一样的运行效果。
4.3.4 progress
progress为进度条组件，该组件对应的属性如表4-19所示。
表4-19 progress组件属性
例如声明一个目前正处于80%刻度，并且宽20px的进度条组件，WXML代码如下：
<progress percent="80" stroke-width="20"/ >
【例4-9】 基础内容组件progress的简单应用
WXML（pages/demo02/progress/progress.wxml）的代码片段如下：
视频讲解
运行效果如图4-10所示。
图4-10 基础内容组件progress的简单应用
【代码说明】
本示例依次列举了4种进度条的情况，即进度条右侧显示百分比、线条宽度为20px的进度条、自定义颜色的进度条、带有动画效果的进度条。需要注意的是，用户只能使用activeColor属性来自定义进度条的选中颜色，单独使用color属性将无效。