2.2 小程序的基础组件
本节会介绍大部分经常使用的微信小程序基础组件，但一些简单的表单元素不会详细介绍，只选择了一部分经常使用但在官方文档中较少出现的或非常零散的组件。
2.2.1 图标组件：icon
微信为了避免开发者将大量的时间花费在美术设计上，专门提供了一套图标组件。虽然提供的图标和配置都非常简单，但对于开发一个符合微信设计风格的小程序而言，这些完全够用且符合简洁的设计风格，只需要配置即可。这些图标显示的速度也远远超过使用图片自制的图标。
小程序全部的icon如表2-2所示。
表2-2 小程序全部的icon
当然了，所有图标的颜色和大小都是可以更改的，只需要配置其size和color属性即可。最基本的icon如下所示。
＜icon type="" size="" color=""/＞
注意：在大多数情况下，微信小程序提供的icon并不能满足我们的全部需求，这个时候，适当地使用图片和字符也是一种很好的选择。
2.2.2 文字组件：text
文字组件是所有组件中最重要的一个组件。其实在小程序中，在任何的标签内输入需要显示的文字，都可以实现文字的输出，为什么还需要这个组件呢？主要是因为，只有在这个组件内，微信小程序才会对一些特殊的占位符进行解析。
占位符是否被解码，显示在其decode属性中。不仅如此，在text组件中，可以在space属性中控制是否显示连续空格和空格的样式。
text组件可以解析的占位符如表2-3所示。
表2-3 text组件可以解析的占位符
注意：占位符的显示效果在不同系统中可能不同，并且在text标签中只支持text标签的嵌套。
2.2.3 富文本组件：rich-text
富文本组件rich-text是一个非常有用的组件，开始在小程序中是不存在的（当时需要通过手动循环来显示文章内容）。
富文本的显示和一般网页的显示有非常大的不同。该组件不能读取纯粹的HTML，只支持已经格式化的JSON对象。
rich-text基本的格式如下所示。
[{"name": "div"，"attrs": {"class": "div_class"，"style": "line-height: 19px; color:
black;"}，"children": [{"type": "text"，"text": "文字内容"}]}]
如果文字格式是不对的，则不会在任何的界面显示正确的内容，而是直接显示带[“name”]等标签的原本内容。
注意：在Node中不推荐使用String类型，因为这会让性能下降，且在组件内会屏蔽所有节点的事件。
2.2.4 进度条组件：progress
进度条组件在用户体验中是很重要的一个组件，利用该组件可以对下载和上传操作进行良好的可视化控制。
progress基本的使用方法如下所示，通过配置show-info可以决定是否显示百分比，通过配置color、backgroundColor和activeColor可以控制进度条的颜色和背景。
＜progress percent="20" show-info /＞
2.2.5 表单组件：form
表单是一个小程序的灵魂，所有的用户输入都需要使用表单进行回传。除了一般的表单应用，在小程序中另外一个应用是获得用户的formId。只有使用该formId才可以给用户推送消息，一个id只可以使用一次，而这个时候，收集足够的formId对于一个小程序是非常必要的。这也使得大量的元素都包含在一个表单中，有时甚至整个页面都在表单中。也就是说，用户单击任何一个元素，都将上传一个formId给后台。
＜form＞元素的使用如下所示，这里的表单拥有一个输入框和两个相关的按钮，并且绑定了相关事件。
＜form bindsubmit="formSubmit" bindreset="formReset"＞ ＜input name="input" placeholder="please input here" /＞ ＜button form-type="submit"＞Submit＜/button＞ ＜button form-type="reset"＞Reset＜/button＞ ＜/form＞
可以在JavaScript代码中通过声明绑定的事件获得表单的情况和用户输入的值，其代码如下所示，而用户的值可以在e事件中获取。
formSubmit（e）{
console.log（'form发生了submit事件，携带数据为：'，e.detail.value）
}，
formReset（）{
console.log（'form发生了reset事件'）
}
同样，如果需要绑定一个获得formId的表单，也需要在＜form＞＜/form＞标签中增加绑定事件，代码如下所示。
＜form bindsubmit="formSubmit" bindreset="formReset" report-submit＞ ＜/form＞
当通过这样的方式提交后，将会在提交表单的事件中获取一个用户的formId。当然，此id需要发送至服务器端进行保存，之后才可以通过该id发送模板消息给该用户（在模拟器中模拟的是无效formId），如图2-1所示。
图2-1 发送formId至服务器
具体的实例可以参考2.3.2节的图片组件。
2.2.6 极其重要的按钮组件：button
按钮组件是任何一个程序都不可或缺的组件，对于小程序而言尤其如此。除了处理普通的用户单击事件，大量用户权限和提示的获取都要用到按钮组件。
这当然就导致了和表单组件一样的问题：大量的图片甚至界面被制作成一个个的按钮，只是为了方便获取用户的单击事件，提示用户打开其他的小程序广告，或者获取一个有效formId或展示一个获取权限的提示。
按钮一般需要给open-type属性设置相应的值，代码如下。button基本的开放能力是绑定一个事件用于接收单击事件后的返回信息，此绑定事件和form的提交事件或者用户自身设置的绑定事件不冲突。
＜button bindtap="绑定事件" open-type="开放能力" ……＞按钮 ＜/button＞
button基本的开放能力如表2-4所示。
表2-4 button基本的开放能力
注意：button-hover默认为{background-color: rgba（0，0，0，0.1）; opacity: 0.7;}，从2.1.0版本起，button可作为原生组件的子节点嵌入，以便在原生组件上使用open-type的能力。
有关button组件具体的实例可参考2.3.2节。