视图层组件：
- 组件是视图层的基本组成单元。
- 组件自带一些功能与微信风格的样式。
-
一个组件通常包括
开始标签和结束标签、属性用来修饰这个组件，内容在两个标签之内。
使用格式为：
<tagname property="value"> 内容... </tagname>
组件的通用属性：所有组件都拥有的属性
| 属性名 | 类型 | 描述 | 注解 |
|---|---|---|---|
| id | String | 组件的唯一标示 | 保持整个页面唯一 |
| class | String | 组件的样式类 | 在对应的 WXSS 中定义的样式类 |
| style | String | 组件的内联样式 | 可以动态设置的内联样式 |
| hidden | Boolean | 组件是否显示 | 所有组件默认显示 |
| data-* | Any | 自定义属性 | 组件上触发的事件时，会发送给事件处理函数 |
| bind* / catch* | EventHandler | 组件的事件 | 详见事件 |
组件分类：组件分为 微信小程序基础组件 和 自定义组件。
基础组件
基础组件分为七大类：
一：视图容器类
基本容器：view
滚动视图容器：scroll-view（
tip: 请勿在scroll-view中使用textarea、map、canvas、video组件tip:scroll-into-view的优先级高于scroll-toptip: 在滚动scroll-view时会阻止页面回弹，所以在scroll-view中滚动，是无法触发onPullDownRefreshtip: 若要使用下拉刷新，请使用页面的滚动，而不是scroll-view，这样也能通过点击顶部状态栏回到页面顶部- 使用竖向滚动时，需要给
<scroll-view/>一个固定高度，通过 WXSS 设置 height。）
滑块视图容器（轮播器）：swiper
可拖动组件：movable-area指定一个区域，movable-view创建一个容器，该视图容器可以在movable-area内自由拖动。
覆盖视图容器：覆盖在原生组件之上的文本视图，可覆盖的原生组件包括map、video、canvas、camera，只支持嵌套cover-view、cover-image。【例如：我们可以在video上覆盖两个按钮图片，定义点击事件控制video的播放与暂停】
二：基础组件
图标组件：icon。【通过type属性，指定图标的类型。主要有：success, success_no_circle, info, warn, waiting, cancel, download, search, clear】
文本组件：text。
富文本组件：rich-text。富文本组件通过 树 结构来组织内容。nodes 类型有三种：Array / HTML String。节点类型：
- 结点类型：type = node
name 标签名 String 是 支持部分受信任的HTML结点
attrs 属性 Object 否 支持部分受信任的属性，遵循Pascal命名法
children 子结点列表 Array 否 结构和nodes一致 - 结点类型：type = text
text 文本 String 是 支持entities
nodes: "<h1 style='color:red;'>html标题</h1>", //html字符串类型 nodes1: [{ //简单数组类型：有一个子节点 name: "h1", attrs: { style: "color:red", class: "red" }, children: [{ type: "text", text: '结点列表标题' }] }], nodes2: [{//复杂数组类型：有多个子节点 name: "ul", attrs: { style: "padding:20px;border:1px solid blue;", class: "red" }, children: [ { name: "li", attrs: { style: "color:red", class: "red" }, children: [{ type: "text", text: '多层结点 无序列表' }], }, { name: "li", attrs: { style: "color:red", class: "red" }, children: [{ type: "text", text: '多层结点 无序列表1' }], }] }]
进度条组件：progress。通过改变属性值来改变进度条状态。
三：导航组件
页面跳转组件：navigator。
属性：
| url | String | 应用内的跳转链接 | |
| open-type | String | navigate | 跳转方式 |
| delta | Number | 当 open-type 为 'navigateBack' 时有效，表示回退的层数 | |
| hover-class | String | navigator-hover | 指定点击时的样式类，当hover-class="none"时，没有点击态效果 |
| hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态 |
| hover-start-time | Number | 50 | 按住后多久出现点击态，单位毫秒 |
| hover-stay-time | Number | 600 | 手指松开后点击态保留时间，单位毫秒 |
open-type：
| navigate | 对应 wx.navigateTo 的功能，跳转 |
| redirect | 对应 wx.redirectTo 的功能，重定向 |
| switchTab | 对应 wx.switchTab 的功能，切换tab |
| reLaunch | 对应 wx.reLaunch 的功能，重新加载 |
| navigateBack | 对应 wx.navigateBack 的功能，返回 |
四：多媒体组件
音频组件：audio，可以通过按钮组件等绑定事件来控制播放、暂停、停止。
视频组件：video，可以通过一系列属性来设置播放器。
图片组件：image，支持多种缩放模式、懒加载等。
相机组件：camera，调用系统相机（前置摄像头、后置摄像头）
观看直播组件：live-player，实时音视频播放。
直播推流组件：live-pusher，实时音视频录制、推送，进行直播。
五：地图组件
map：地图组件，可以在上面标记地点、绘制气泡等。
六：绘图组件
canvas：画布，可以在上面进行涂鸦，主要是通过跟踪手指动作事件来实现的。
| canvas-id | String | canvas 组件的唯一标识符 | |
| disable-scroll | Boolean | false | 当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新 |
| bindtouchstart | EventHandle | 手指触摸动作开始 | |
| bindtouchmove | EventHandle | 手指触摸后移动 | |
| bindtouchend | EventHandle | 手指触摸动作结束 | |
| bindtouchcancel | EventHandle | 手指触摸动作被打断，如来电提醒，弹窗 | |
| bindlongtap | EventHandle | 手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动 | |
| binderror | EventHandle | 当发生错误时触发 error 事件，detail = {errMsg: 'something wrong'} |
七：开放组件
开放数据：open-data，用于展示微信开放的数据。
内置浏览器：web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。
八：表单组件
表单：form。将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交。
按钮组件：button。
单选按钮组件：radio-group、radio。
多选框组件：checkbox-group、check-box。
输入组件：input。
多行输入文本框组件：textarea。
标签组件：label。
底部弹起的选择器（列表选择器）：picker，支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。
嵌入页面的滚动选择器：picker-view，可以上下滚动选择内容的选择器。
滑动选择器（拖动进度条来选择）：slider。
开关组件：switch。
自定义组件
将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。
一：创建自定义组件
类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。
1：配置自定义组件
创建自定义组件后，json文件会自动生成，其中会包含组件的配置信息：
{ "component": true }
2：编写组件wxml模版文件
<view class=""> <view>组件内部view内容</view> <slot></slot> //用于承载组件引用时提供的子节点。 </view>
这里需要注意的是slot：slot为组件提供了一个空间，可以在页面wxml引用组件模版时，嵌入一个view到slot处。
<view> <组件名 参数1=值1，参数2=值2...> //标签属性键值对是自定义组件wxml中用到的变量 <!-- 这部分内容将被放置在组件 <slot> 的位置上 --> <view>这里是插入到组件slot中的内容</view> </组件名> </view>
【slot可以不要，删掉即可】
3：编写组件的wxss样式文件
组件样式需要注意的是:在组件wxss中不应使用ID选择器、属性选择器和标签名选择器，而是采用 class选择器。
4：编写组件的构造器（js文件）
在js文件中定义组件的属性、数据、方法等。
| properties | Object Map | 否 | 组件的对外属性，是属性名到属性设置的映射表，属性设置中可包含三个字段， type 表示属性类型、 value 表示属性初始值、 observer 表示属性值被更改时的响应函数 |
| data | Object | 否 | 组件的内部数据，和 properties 一同用于组件的模版渲染 |
| methods | Object | 否 | 组件的方法，包括事件响应函数和任意的自定义方法，关于事件响应函数的使用，参见 组件事件 |
| behaviors | String Array | 否 | 类似于mixins和traits的组件间代码复用机制，参见 behaviors |
| created | Function | 否 | 组件生命周期函数，在组件实例进入页面节点树时执行，注意此时不能调用 setData |
| attached | Function | 否 | 组件生命周期函数，在组件实例进入页面节点树时执行 |
| ready | Function | 否 | 组件生命周期函数，在组件布局完成后执行，此时可以获取节点信息（使用 SelectorQuery ） |
| moved | Function | 否 | 组件生命周期函数，在组件实例被移动到节点树另一个位置时执行 |
| detached | Function | 否 | 组件生命周期函数，在组件实例被从页面节点树移除时执行 |
| relations | Object | 否 | 组件间关系定义，参见 组件间关系 |
| options | Object Map | 否 | 一些组件选项，请参见文档其他部分的说明 |
5：组件事件同页面事件：在wxml中绑定，在js文件中实现事件响应函数。
二：使用自定义组件
1：在页面配置文件page.json中引入组件
{
"usingComponents": {
"组件名": "组件路径"
}
}
2：在页面wxml文件中使用组件名创建组件，并且在标签中通过属性配置组件需要用到的数据
<view class=""> <组件名 参数1=值1， 参数2=值2， 。。。。。。> </组件名> </view>
3：在页面js文件中获取组件对象，并且调用组件函数
const app = getApp() Page({ /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { //获得组件对象 this.组件名 = this.selectComponent("#组件名"); }, /** *定义函数：调用组件的方法 */ funcName:function(){ this.组件名.func(param...) }, })