背景
终于入职了，线上入职远程办公，感概还是很多的，有机会专门写一下，刚入职熟悉项目，适应新的节奏还是需要时间的，所以时间可能不肯像以前那么充裕了，我尽力保持日更吧，其实之前的两篇都是之前的存稿，确实没什么精力，虽然没做什么事，但是还是觉得很累，可能就是如此吧，无论你是否愿意，生活总是推着我们不断向前。话不多说，之前我们介绍了微信小程序中的容器组件view和scroll-view,而容器内放置的就是各种基本组件，这篇文章就会主要介绍基本组件。
基础组件
icon组件
icon是页面中非常常见的组件，通常表示状态如👍和👎等，起到引导作用，微信小程序提供了一套符合微信设计规范的样式类型，同时也支持通过自定义样式创建自定义图标，icon有一下属性
- type：icon的类型有效值包括：success、success_no_circle、info、warn、waiting、cancel、download、search和clear。
- size：icon的大小，单位是px，默认值是23px。
- color：icon的颜色，同CSS的color
示例如下
<view style="padding: 20px; display: flex; justify-content: space-around;">
<icon type="waiting" size="30"></icon>
<icon type="cancel" size="30"></icon>
<icon type="download" size="30"></icon>
<icon type="search" size="30"></icon>
</view>
<view style="padding: 20px; display: flex; justify-content: space-around;">
<icon type="clear" size="10"></icon>
<icon type="cancel" size="20"></icon>
<icon type="download" size="30"></icon>
<icon type="search" size="40"></icon>
</view>
最后的结果如图
text组件
text组件主要用于文本内容的展示，类似于HTML中的p，在微信小程序中只有text组件内的文字能够被长按选中，在展示文本的时候一定要考虑到这个属性，文本的内容支持专业字符”\“，且text只能够支持text的嵌套，通过text的嵌套能够实现字符加粗和标红等特殊样式的设置。
示例如下
<text style="margin-top: 30px;"> <text style="font-size: large;">井蛙</text>不可以语于海者\t拘于虚也\n夏虫不可以语于冰者\t笃于时也\n曲士不可以语于道者\t束于教也\n</text>
效果如下
progress组件
progress用于显示进度状态，比如资源加载、用户资料完成度等，progres是通用的进度条组件，我们可以通过各种布局、样式实现一套自定义的进度条，progress是块级元素，属性如下：
- percent：当前进度占进度的百分比，取值区间是0到100
- show-info：是否在进度条右侧显示百分比，默认是false
- stroke-width：进度条的宽度，单位px，默认值为6
- color：进度条的颜色，默认值是#09BB07
- active：渲染时是否开启从左到右的动画，默认值是false。开启后每次修改percent触发进度条重新渲染，都会从左到右显示动画。 下面简单展示进度条相关属性
<progress percent="20" style="margin-top: 30px;"></progress>
<progress percent="30" show-info="true" style="margin-top: 30px;"></progress>
<progress percent="40" stroke-width="10" style="margin-top: 30px;"></progress>
<progress percent="50" color="#CD5555" style="margin-top: 30px;"></progress>
<progress percent="60" active="true" style="margin-top: 30px;"></progress>
最终效果如图
最后
有兴趣可以关注公众号QStack，会定期分享一些文章和免费的学习资源。
