一、基础内容
本部分内容为自习内容，包含icon(图标)、progress（进度条）、rich-text(富文本)、text（文本）四个部分
1.icon图标
1.1解释： 比如最常见的，在我们使用微信支付时，支付成功就会跳转这样的页面，上面的那个就是我们今天要说的图标，在我们小程序里使用像这样的图标，是不需要再去另外找这样图标的，官方的文档上就已经帮我们定义好了这些图标，我们就直接引用就ok了
1.2 实验： 我们在js文件里可以直接在数据部分添加这样的字段
Page({
data: {
iconSize: [20, 30, 40, 50, 60, 70],
iconType: [
'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
],
iconColor: [
'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
]
}
})
注释：（1）iconSize是设置这图标的大小 ；
（2）iconType是设置图标的样式，包括了success（成功）、success_no_circle（成功无圆形边框）、info(提示)、warm（警告）、waiting（等待）、cancel（取消）、download（下载）search（搜索）、clear（清除）；
（3）iconColor是设置图标的颜色，支持颜色的名称以及rgb
注释：wxml界面文件 这里的wx:key作用是来指定列表中项目的唯一的标识符。
<view class="group">
<block wx:for="{{iconSize}}" wx:key="*this">
<icon type="success" size="{{item}}"/>
</block>
</view>
<view class="group">
<block wx:for="{{iconType}}" wx:key="*this">
<icon type="{{item}}" size="40"/>
</block>
</view>
<view class="group">
<block wx:for="{{iconColor}}" wx:key="*this">
<icon type="success" size="40" color="{{item}}"/>
</block>
</view>
2. progress进度条
2.1 解释： 进度条，一般加载程序的时候都会看到这个，那么包含哪些字段才可以完成这个进度条呢。我们下面具体来看一下，
<progress percent="80" active show-info stroke-width="14" />
直接添加在wxml文件里面
在界面文件中，我们直接用这个progress 然后在里面设置它的属性即可，常用的属性介绍：
- percent 用来显示进度条到设定的数就会停止加载，（0-100之间）
- show-info 用来显示是否显示进度条的百分比
- active 进度条的动画显示，演示正常的加载过程，show-info会配合一起变化
- stroke-width 进度条的宽度，像王者荣耀训练营模式加载的时候，那样的进度条，加宽而且带有百分比af
- activeColor 设置进度条的颜色，在特定的画面背景中配合主题搭配的颜色。
其它的属性，可以参考官方文档上的，这几个属性相对靠前一些
3. rich-text与text 富文本与文本
3.1 解释：经常用到的是text(文本)，这个就是用来填放文本的，就是放字在里面，它的一个属性selectable（默认false） 用来设置是否可选，比如百度文档里面设置权限，不允许大片段的复制，但是我觉得截图然后提取文字也可以达到相同的效果吧
3.2 关于空格，如果不设置，再多的空格也只算作2个空格，但是可以设置
- ensp 中文字符空格一半大小
- emsp 中文字符空格大小
- nbsp 根据字体设置的空格大小
在用的时候要添加‘&’符号配合用，即 
喜欢就点个赞呗！
版权任意
