介绍

经过一段时间的学习，你对小程序有了多少认识？对小程序中的组件代码有没有更深入的了解？你能独立编写一个自己想要的简单程序吗？今天我们来聊聊一些基础的组件，请仔细阅读。

基本内容组件

首先我们需要打开微信小程序制作器文档，里面有四个基本的内容组件，分别是

在这四个中，我们在上一章已经讨论了最后一个。现在我们来讨论前三个。

成分

icon组件就是图标组件，我们有时候看到的一些小图标就是通过这个组件制作的。

这里我们可以简单描述一下每个属性：

type：类型，我们可以调用的一些图标。有效值：，，info，warn，，，，，，。

size：大小，尺寸。

：颜色。

不知道大家见过没有，这里的图标是这样的，我们根据自己的需要来使用。

组件属性操作

只输入是没用的，您需要添加类型属性。

参考代码：

你可以看到模拟器上现在有一个图标。一个勾号图标。

这里我们给它一个尺寸：size="60"。你可以看到，它明显变大了。

参考代码：

这一步其实很好理解，那么颜色该怎么用呢？

我们在这里添加代码：=“pink”，按Ctrl+S保存，然后打开再看看。

参考代码：

我们来尝试一下其他类型中的属性值，看看有什么效果。

这里我们去除颜色并保留图标本身的颜色。

参考代码：

成分

这个组件的意思是进度条，大家可以看到，这里的属性还是挺多的，这个在H5里面也是类似的用法，我们接下来会讲解这个组件。

这种开发方式对于小程序来说用处不大，比较常用的是开发小游戏，毕竟如果只有进度条的话，用户会失去等待的耐心。

组件属性操作

组件属性：（进度条位置）

这个属性挺有意思的，它会把你输入的数字放到相应的位置。

参考代码：

组件属性：show-info（进度条显示）

这个属性直接调用就可以了，当然我们也可以在wxss中调整这个的大小，不过暂时就这么讲吧。

参考代码：

组件属性：-（圆角样式）

这个我估计大家看的不是很清楚，它的作用是让方形的进度条变圆。

参考代码：

组件属性：font-size（右侧字体大小百分比）

这个组件从字面上理解，就是调整右侧百分比字体的大小，我们也可以把它放到开发者工具里去操作。

为了让大家看得更清楚，小编用了比较大的数值来表示，不知道大家能看出效果吗。

默认设置为16，您可以根据需要更改。

参考代码：

组件属性：-（进度条的粗细）

这个组件也比较容易理解，就是一个可以让进度条变宽的属性，接下来我们需要实际操作一下才能看到效果。

参考代码：

怎么样？是不是更宽了？那我们再来说说下一个属性：

组件属性：（未读进度背景颜色）

可以改变未读部分的进度条背景颜色，这个也是很有意思的，我们可以在里面添加代码：="pink" 来看看效果。

参考代码：

组件属性：（选定的进度条颜色）

这个属性可以和上面的属性结合起来记忆，这里就简单说一下，我们可以输入代码：="blue"。

参考代码：

怎么样？有没有发现颜色变了？可以对比一下上面和下面的图片，所有步骤都是一步一步做的，大家可以对比一下。

组件属性：（进入动画）

这是一个进入动画，比如我之前输入的数字是30，那么当我们刷新页面的时候，进度条就会从0运行到30，并且带有动画的缓冲效果。

参考代码：

你看到截断的地方了吗？索引是 25。如果我截断得慢一点，它就会是 30。

组件属性：-mode（从最后一个断点继续加载）

这个跟下载软件类似，如果这次没下载完整，下次再下载，这个需要配合全局使用，这次就不详细讲解了。

这个属性跟框架结合起来看也很有趣，不会让人感觉死板。

组件属性：（1%进度所需时间）

必须与上面的组件属性配合使用。默认值为 30 毫秒。

如果你自己尝试一下，是可以看到效果的。但是就像我之前说的，你无法通过我的演示看到完整的效果。做GIF动图真的没必要这么做。如果你想学好小程序，你需要一步一步跟着我的步骤来。

参考代码：

最后的想法

这次我们讲完了小程序基础内容组件的图标以及所有相关属性。好了，这还没完，在接下来的内容中我们还将为大家带来更多精彩内容。

感谢大家在百忙之中抽出时间阅读我的文章，在这里，我要向大家表示最诚挚的谢意，你们的关注就是我创作的动力，谢谢大家。