3.2 内容组件
相较于视图组件，内容组件的内容会少很多。在微信小程序中，仅提供了icon（图标组件）、text（文本组件）、rich-text（富文本组件）、progress（进度条组件）。通常大家都会选择设置CSS样式来改变文字效果，所以富文本组件不是很常用。所以，在本节的学习中主要掌握图标、文本和进度条组件即可。
3.2.1 图标icon
其实，icon的功能实际上用image也可以实现，主要是小程序官方提供了很多内置的图标，方便开发者使用，而且这些图标与系统风格一致。icon的自带属性如表3.6所示。
表3.6 icon组件的自带属性
icon的type属性对应的样式如表3.7所示。
表3.7 icon的Type属性
【示例3-6】
在演示代码之前，我们先修改index.wxml和index.js，增加基础内容组件的演示按钮。
首页效果如图3.7所示。
图3.7 首页组件选择列表
接下来继续演示icon组件。它的属性不多，这里直接演示3个属性效果，代码如下：
运行效果如图3.8所示。
图3.8 icon组件的三个属性效果
【代码解析】第1个view用于样式不同的type样式，第2个view演示尺寸的变化，最后一个是颜色的变化。
3.2.2 进度条progress
progress是进度条组件。在日常开发中，进度条是十分常见的，需要用户等待的地方基本都要使用一个进度条。progress的自带属性如表3.8所示。
表3.8 icon组件的自带属性
【示例3-7】
使用progress组件创建一个从0到100的进度条，代码如下：
运行效果如图3.9所示。
图3.9 progress组件的进度条效果
【代码解析】我们通过percent控制百分比，通过stroke-width调整宽度，通过show-info显示进度，最后的active也是不可少的，否则进度会没有动画直接跳到100%。从图中可以看到进度到了27%。读者可以自行运行代码，看看进度条的动画。
3.2.3 文本text
text是最基础的文本组件。它提供了一些方便的属性，所以需要处理文字的时候尽量使用text而非view组件。text的自带属性如表3.9所示。
表3.9 text组件的自带属性
space的合法值如表3.10所示。
表3.10 selectable的合法值
【示例3-8】
使用text组件演示selectable和space属性，代码如下：
运行效果如图3.10所示。
图3.10 progress组件的进度条效果
【代码解析】从中可以看出，设置了selectable之后，长按这块文字即可选中。A、B、C、D四行文字分别对应了空格设置的状态，对照表格的说明查看即可。