1. 基本组件介绍
   1. 什么是组件
      1. 组件是视图层的基本组成单元。
      2. 组件自带一些功能与微信风格的样式。
      3. 一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。
   2. 参考网站
      1. https://weui.io/
   3. 注意
      1. 所有组件与属性都是小写，以连字符-连接
2. 属性类型
   1. Boolean 布尔值 组件写上该属性，不管该属性等于什么，其值都为true，只有组件上没有写该属性时，属性值才为false。如果属性值为变量，变量的值会被转换为Boolean类型
   2. Number 数字 1, 2.5
   3. String 字符串 "string"
   4. Array 数组 [ 1, "string" ]
   5. Object 对象 { key: value }
   6. EventHandler 事件处理函数名 "handlerName" 是 Page中定义的事件处理函数名
   7. Any 任意属性
3. 共同属性类型
   1. id String 组件的唯一标示 保持整个页面唯一
   2. class String 组件的样式类 在对应的 WXSS 中定义的样式类
   3. style String 组件的内联样式 可以动态设置的内联样式
   4. hidden Boolean 组件是否显示 所有组件默认显示
   5. data-* Any 自定义属性 组件上触发的事件时，会发送给事件处理函数
   6. bind* / catch* EventHandler 组件的事件 详见事件
4. 特殊属性
   1. 几乎所有组件都有各自定义的属性，可以对该组件的功能或样式进行修饰，请参考各个组件的定义。
5. 组件列表
   1. 视图容器(View Container)
      1. view 视图容器
         1. hover Boolean false 是否启用点击态
         2. hover-class String none 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
         3. hover-start-time Number 50 按住后多久出现点击态，单位毫秒
         4. hover-stay-time Number 400 手指松开后点击态保留时间，单位毫秒
      2. scroll-view 可滚动视图容器
         1. scroll-x Boolean false 允许横向滚动
         2. scroll-y Boolean false 允许纵向滚动
         3. upper-threshold Number 50 距顶部/左边多远时（单位px），触发 scrolltoupper 事件
         4. lower-threshold Number 50 距底部/右边多远时（单位px），触发 scrolltolower 事件
         5. scroll-top Number 设置竖向滚动条位置
         6. scroll-left Number 设置横向滚动条位置
         7. scroll-into-view String 值应为某子元素id（id不能以数字开头），则滚动到该元素，元素顶部对齐滚动区域顶部，只支持纵向滚动
         8. scroll-with-animation Boolean false 在设置滚动条位置时使用动画过渡
         9. enable-back-to-top Boolean false iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向
         10. bindscrolltoupper EventHandle 滚动到顶部/左边，会触发 scrolltoupper 事件
         11. bindscrolltolower EventHandle 滚动到底部/右边，会触发 scrolltolower 事件
         12. bindscroll EventHandle 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
      3. swiper 滑块视图容器
         1. indicator-dots Boolean false 是否显示面板指示点
         2. indicator-color Color rgba(0, 0, 0, .3) 指示点颜色
         3. indicator-active-color Color #000000 当前选中的指示点颜色
         4. autoplay Boolean false 是否自动切换
         5. current Number 0 当前所在页面的 index
         6. interval Number 5000 自动切换时间间隔
         7. duration Number 500 滑动动画时长
         8. circular Boolean false 是否采用衔接滑动
         9. bindchange EventHandle current 改变时会触发 change 事件，event.detail = {current: current}
   2. 基础内容(Basic Content)
      1. icon 图标
         1. type String icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
         2. size Number 23 icon的大小，单位px
         3. color Color icon的颜色，同css的color
      2. text 文字
         1. selectable Boolean false 文本是否可选
      3. progress 进度条
         1. percent Float 无 百分比0~100
         2. show-info Boolean false 在进度条右侧显示百分比
         3. stroke-width Number 6 进度条线的宽度，单位px
         4. color Color #09BB07 进度条颜色 （请使用 activeColor）
         5. activeColor Color 已选择的进度条的颜色
         6. backgroundColor Color 未选择的进度条的颜色
         7. active Boolean false 进度条从左往右的动画
   3. 表单(Form)
      1. button 按钮
         1. size String default 有效值 default, mini
         2. type String default 按钮的样式类型，有效值 primary, default, warn
         3. plain Boolean false 按钮是否镂空，背景色透明
         4. disabled Boolean false 是否禁用
         5. loading Boolean false 名称前是否带 loading 图标
         6. form-type String 无 有效值：submit, reset，用于 <form/> 组件，点击分别会触发 submit/reset 事件
         7. open-type String 无 有效值：contact，打开客服会话
         8. hover-class String button-hover 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果
         9. hover-start-time Number 20 按住后多久出现点击态，单位毫秒
         10. hover-stay-time Number 70 手指松开后点击态保留时间，单位毫秒
      2. form 表单
         1. report-submit Boolean 是否返回 formId 用于发送模板消息
         2. bindsubmit EventHandle 携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''}
         3. bindreset EventHandle 表单重置时会触发 reset 事件
      3. input 输入框
         1. value String 输入框的初始内容
         2. type String "text" input 的类型，有效值："text", "number", "idcard", "digit"
         3. password Boolean false 是否是密码类型
         4. placeholder String 输入框为空时占位符
         5. placeholder-style String 指定 placeholder 的样式
         6. placeholder-class String "input-placeholder" 指定 placeholder 的样式类
         7. disabled Boolean false 是否禁用
         8. maxlength Number 140 最大输入长度，设置为 -1 的时候不限制最大长度
         9. cursor-spacing Number 0 指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
         10. auto-focus Boolean false (即将废弃，请直接使用 focus )自动聚焦，拉起键盘
         11. focus Boolean false 获取焦点
         12. confirm-type String "done" 设置键盘右下角按钮的文字，有效值： "send","search","next","go","done"
         13. confirm-hold Boolean false 点击键盘右下角按钮时是否保持键盘不收起
         14. bindinput EventHandle 当键盘输入时，触发input事件，event.detail = {value: value}，处理函数可以直接 return 一个字符串，将替换输入框的内容。
         15. bindfocus EventHandle 输入框聚焦时触发，event.detail = {value: value}
         16. bindblur EventHandle 输入框失去焦点时触发，event.detail = {value: value}
         17. bindconfirm EventHandle 点击完成按钮时触发，event.detail = {value: value}
      4. checkbox 多项选择器
         1. bindchange EventHandle <checkbox-group/>中选中项发生改变是触发 change 事件，detail = {value:[选中的checkbox的value的数组]}
      5. radio 单项选择器
         1. radio-group
            1. bindchange EventHandle <radio-group/> 中的选中项发生变化时触发 change 事件，event.detail = {value: 选中项radio的value}
         2. value String <radio/> 标识。当该<radio/> 选中时，<radio-group/> 的 change 事件会携带<radio/>的value
         3. checked Boolean false 当前是否选中
         4. disabled Boolean false 是否禁用
         5. color Color radio的颜色，同css的color
      6. picker 列表选择器
         1. 普通选择器：mode = selector
            1. range Array / Object Array [] mode为 selector 时，range 有效
            2. range-key String 当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
            3. value Number 0 value 的值表示表示选择了 range 中的第几个（下标从 0 开始）。
            4. bindchange EventHandle value 改变时触发 change 事件，event.detail = {value: value}
            5. disabled Boolean false 是否禁用
         2. 时间选择器：mode = time
            1. value String 表示选中的时间，格式为"hh:mm"
            2. start String 表示有效时间范围的开始，字符串格式为"hh:mm"
            3. end String 表示有效时间范围的结束，字符串格式为"hh:mm"
            4. bindchange EventHandle value 改变时触发 change 事件，event.detail = {value: value}
            5. disabled Boolean false 是否禁用
         3. 日期选择器：mode = date
            1. value String 0 表示选中的日期，格式为"YYYY-MM-DD"
            2. start String 表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"
            3. end String 表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"
            4. fields String day 有效值 year,month,day，表示选择器的粒度
            5. bindchange EventHandle value 改变时触发 change 事件，event.detail = {value: value}
            6. disabled Boolean false 是否禁用
      7. picker-view 内嵌列表选择器
         1. value Number Array 数组中的数字依次表示 picker-view 内的 picker-view-colume 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。
         2. indicator-style String 设置选择器中间选中框的样式
         3. indicator-class String 设置选择器中间选中框的类名
         4. bindchange EventHandle 当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）
      8. slider 滚动选择器
         1. min Number 0 最小值
         2. max Number 100 最大值
         3. step Number 1 步长，取值必须大于 0，并且可被(max - min)整除
         4. disabled Boolean false 是否禁用
         5. value Number 0 当前取值
         6. color Color #e9e9e9 背景条的颜色（请使用 backgroundColor）
         7. selected-color Color #1aad19 已选择的颜色（请使用 activeColor）
         8. activeColor Color #1aad19 已选择的颜色
         9. backgroundColor Color #e9e9e9 背景条的颜色
         10. show-value Boolean false 是否显示当前 value
         11. bindchange EventHandle 完成一次拖动后触发的事件，event.detail = {value: value}
      9. switch 开关选择器
         1. checked Boolean false 是否选中
         2. type String switch 样式，有效值：switch, checkbox
         3. bindchange EventHandle checked 改变时触发 change 事件，event.detail={ value:checked}
         4. color Color switch 的颜色，同 css 的 color
      10. label 标签
          1. for String 绑定控件的 id
      11. textarea 多行输入框
          1. value String 输入框的内容
          2. placeholder String 输入框为空时占位符
          3. placeholder-style String 指定 placeholder 的样式
          4. placeholder-class String textarea-placeholder 指定 placeholder 的样式类
          5. disabled Boolean false 是否禁用
          6. maxlength Number 140 最大输入长度，设置为 -1 的时候不限制最大长度
          7. auto-focus Boolean false 自动聚焦，拉起键盘。
          8. focus Boolean false 获取焦点
          9. auto-height Boolean false 是否自动增高，设置auto-height时，style.height不生效
          10. fixed Boolean false 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true
          11. cursor-spacing Number 0 指定光标与键盘的距离，单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
          12. bindfocus EventHandle 输入框聚焦时触发，event.detail = {value: value}
          13. bindblur EventHandle 输入框失去焦点时触发，event.detail = {value: value}
          14. bindlinechange EventHandle 输入框行数变化时调用，event.detail = {height: 0, heightRpx: 0, lineCount: 0}
          15. bindinput EventHandle 当键盘输入时，触发 input 事件，event.detail = {value: value}， bindinput 处理函数的返回值并不会反映到 textarea 上
          16. bindconfirm EventHandle 点击完成时， 触发 confirm 事件，event.detail = {value: value}
   4. 导航(Navigation)
      1. navigator 应用链接
         1. url String 应用内的跳转链接
         2. open-type String navigate 可选值 'navigate'、'redirect'、'switchTab'、'reLaunch'，'navigateBack'，对应于wx.navigateTo、wx.redirectTo、wx.switchTab、wx.reLaunch、wx.navigateBack 的功能
         3. delta Number 当 open-type 为 'navigateBack' 时有效，表示回退的层数
         4. hover-class String navigator-hover 指定点击时的样式类，当hover-class="none"时，没有点击态效果
         5. hover-start-time Number 50 按住后多久出现点击态，单位毫秒
         6. hover-stay-time Number 600 手指松开后点击态保留时间，单位毫秒
   5. 多媒体(Media)
      1. audio 音频
         1. id String video 组件的唯一标识符
         2. src String 要播放音频的资源地址
         3. loop Boolean false 是否循环播放
         4. controls Boolean true 是否显示默认控件
         5. poster String 默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效
         6. name String 未知音频 默认控件上的音频名字，如果 controls 属性值为 false 则设置 name 无效
         7. author String 未知作者 默认控件上的作者名字，如果 controls 属性值为 false 则设置 author 无效
         8. binderror EventHandle 当发生错误时触发 error 事件，detail = {errMsg: MediaError.code}
         9. bindplay EventHandle 当开始/继续播放时触发play事件
         10. bindpause EventHandle 当暂停播放时触发 pause 事件
         11. bindtimeupdate EventHandle 当播放进度改变时触发 timeupdate 事件，detail = {currentTime, duration}
         12. bindended EventHandle 当播放到末尾时触发 ended 事件
      2. image 图片
         1. src String 图片资源地址
         2. mode String 'scaleToFill' 图片裁剪、缩放的模式
         3. binderror HandleEvent 当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: 'something wrong'}
         4. bindload HandleEvent 当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}
      3. video 视频
         1. src String 要播放视频的资源地址
         2. duration Number 指定视频时长
         3. controls Boolean true 是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
         4. danmu-list Object Array 弹幕列表
         5. danmu-btn Boolean false 是否显示弹幕按钮，只在初始化时有效，不能动态变更
         6. enable-danmu Boolean false 是否展示弹幕，只在初始化时有效，不能动态变更
         7. autoplay Boolean false 是否自动播放
         8. bindplay EventHandle 当开始/继续播放时触发play事件
         9. bindpause EventHandle 当暂停播放时触发 pause 事件
         10. bindended EventHandle 当播放到末尾时触发 ended 事件
         11. bindtimeupdate EventHandle 播放进度变化时触发，event.detail = {currentTime: '当前播放时间'} 。触发频率应该在 250ms 一次
         12. objectFit String contain 当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖
   6. 地图(Map)
      1. map 地图
         1. longitude Number 中心经度
         2. latitude Number 中心纬度
         3. scale Number 16 缩放级别，取值范围为5-18
         4. markers Array 标记点
         5. covers Array 即将移除，请使用 markers
         6. polyline Array 路线
         7. circles Array 圆
         8. controls Array 控件
         9. include-points Array 缩放视野以包含所有给定的坐标点
         10. show-location Boolean 显示带有方向的当前定位点
         11. bindmarkertap EventHandle 点击标记点时触发
         12. bindcontroltap EventHandle 点击控件时触发
         13. bindregionchange EventHandle 视野发生变化时触发
         14. bindtap EventHandle 点击地图时触发
   7. 画布(Canvas)
      1. canvas 画布
         1. canvas-id String canvas 组件的唯一标识符
         2. disable-scroll Boolean false 当在 canvas 中移动时，禁止屏幕滚动以及下拉刷新
         3. bindtouchstart EventHandle 手指触摸动作开始
         4. bindtouchmove EventHandle 手指触摸后移动
         5. bindtouchend EventHandle 手指触摸动作结束
         6. bindtouchcancel EventHandle 手指触摸动作被打断，如来电提醒，弹窗
         7. bindlongtap EventHandle 手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动
         8. binderror EventHandle 当发生错误时触发 error 事件，detail = {errMsg: 'something wrong'}
   8. 客服会话
      1. contact-button 进入客服会话按钮
         1. size Number 18 会话按钮大小，有效值 18-27，单位：px
         2. type String default-dark 会话按钮的样式类型，有效值 default-dark, default-light
         3. session-from String 用户从该按钮进入会话时，开发者将收到带上本参数的事件推送。本参数可用于区分用户进入客服会话的来源。