手把手小程序开发【3-小程序组件】】
你在活着的同时，也在学习着，无论如何，你活着。
——道格拉斯·亚当斯
小程序的前端界面，都是有相关的组件组成的。小程序组件的概念和HTML标签类似，虽然名称、属性和Html标签不太一样，但是实现效果和写法是类似的。
下面列出一些常用的小程序开发组件，由于篇幅不想过于冗长，也就是大体的介绍和用法，更多的了解可到小程序的官方文档查看，如下地址：
https://developers.weixin.qq.com/miniprogram/dev/component/
1
视图容器
组件 | 描述 | 标签 |
|---|---|---|
view | 最基础的视图组件，相当于html中的div | <view></view> |
scroll-view | 可滚动视图区域，实现整页的股东视图，很少用 | <scroll-view></scroll-view> |
swiper | 图片轮播，子项需要swiper-item标签包裹 | <swiper></swiper> |
movable-view | 实现拖曳滑动，并且可以控制滑动的方向，甚至提供滑动时的惯性、阻尼、摩擦等。移动的区域，使用movable-area标签包裹。 | <movable-view></movable-view> |
cover-view/cover-image | 可以覆盖在原生组件之上的文本视图，只支持嵌套cover-view，cover-image，可在cover-view中使用button | <cover-view></cover-view>,<cover-image></cover-image> |
2
基础组件
组件 | 描述 | 标签 |
|---|---|---|
icon | 图标组件，可以配置size、color属性 | <icon type="图标类型" size="尺寸" color="颜色"/> |
text | 文字组件，可以解析占位符，只支持text标签的 | <text>文本</text> |
rich-text | 富文本组件,不能读取纯粹的html,只支持已经格式化的Json对象 | <rich-text node=""bindtap="">文本</rich-text> |
progress | 进度条组件，可以对下载和上传操作进行良好的可视化操作 | <progress percent="20" show-info/> |
form | 表单组件 | <form></form> |
button | 按钮组件 | <button></button> |
3
导航组件和媒体组件
组件 | 描述 | 标签 |
|---|---|---|
navigator | 实现应用内的跳转，小程序之间的跳转 | <navigator url="" open-type="" hover-class=""></navigator> |
image | 显示图片 | <image src="" mode=""></image> |
video | 视频组件，提供视频播放弹幕，全屏，进度控制等功能 | <video src=""></video> |
camera | 拍照组件 | <camera></camera> |
4
地图组件和画布组件
组件 | 描述 | 标签 |
|---|---|---|
map | 地图组件，使用前需要开通 腾讯位置服务 | <map></map> |
canvas | 画布组件 | <canvas></canvas> |
5
HTML和开放能力支持
- 开放数据域组件：open-data
该组件用于显示用户的昵称，头像、性别、地址、语言等内容。
之所以要使用这个组件，是因为用户的信息需要保密，getUserInfo这个API已经无法获取用户的相关信息，大量用户又会拒绝授权的方式，要保证能显示用户的头像等信息，就只能使用这个组件了。
- HTML 网页支持：web-view
这个算是对html网页的一个妥协，让html页面可以在小程序中显示，这样小程序就显得很鸡肋，原生的组件都没有得好较好的应用，可以说这种嵌套网页小程序是个“伪小程序”，本质还是网页。
- 广告组件：ad
主要面向的小程序开发者，使之能给开发者带来盈利。前提是要达到一定的条件，才能开通流量主的功能。以及还需要提交个人信息，等待腾讯官方的审核才行。
- 引导关注公众号组件：official-account
用于推广小程序与公众号联系的一个组件。
本节只是全局大概的介绍下小程序中的组件，实际还是需要我们去小程序的官方文档中全面的了解一下。这里在贴出一下官方的文档地址，或者点击左下角原文链接直达官网。
https://developers.weixin.qq.com/miniprogram/dev/component/