3-微信小程序组件

一、视图容器：

1、view：视图容器 【1】相关属性如下： hover-class：指定按下去的样式类 hover-stop-propagation：指定是否阻止本节点的祖先节点出现点击态 hover-start-time：按住后多久出现点击态，单位毫秒 hover-stay-time：手指松开后点击态保留时间，单位毫秒 【2】注意事项： 如果需要使用滚动视图，请使用 scroll-view

2、scroll-view：可滚动视图区域 【1】相关属性如下： scroll-x：允许横向滚动 scroll-y：允许纵向滚动 upper-threshold：距顶部/左边多远时（单位px），触发 scrolltoupper 事件 lower-threshold：距底部/右边多远时（单位px），触发 scrolltolower 事件 scroll-top：设置竖向滚动条位置 scroll-left：设置横向滚动条位置 scroll-into-view：值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 scroll-with-animation：在设置滚动条位置时使用动画过渡 enable-back-to-top：iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向 bindscrolltoupper：滚动到顶部/左边，会触发 scrolltoupper 事件 bindscrolltolower：滚动到底部/右边，会触发 scrolltolower 事件 bindscroll：滚动时触发 【2】注意事项： 《1》请勿在 scroll-view 中使用 textarea、map、canvas、video 组件 《2》scroll-into-view 的优先级高于 scroll-top 《3》在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh 《4》若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部

3、swiper：滑块视图容器 【1】相关属性如下： indicator-dots：是否显示面板指示点 indicator-color：指示点颜色 indicator-active-color：当前选中的指示点颜色 autoplay：是否自动切换 current：是否自动切换 current-item-id：当前所在滑块的 item-id ，不能与 current 被同时指定 interval：自动切换时间间隔 duration：滑动动画时长 circular：是否采用衔接滑动 vertical：滑动方向是否为纵向 previous-margin：前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值 next-margin：后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 display-multiple-items：同时显示的滑块数量 skip-hidden-item-layout：是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息 bindchange：current 改变时会触发 change 事件 bindanimationfinish：动画结束时会触发 animationfinish 事件 【2】注意事项： 如果在 bindchange 的事件回调函数中使用 setData 改变 current 值，则有可能导致 setData 被不停地调用，因而通常情况下请在改变 current 值前检测 source 字段来判断是否是由于用户触摸引起。

4.1、movable-area：movable-view 的可移动区域 【1】相关属性如下： scale-area：当里面的movable-view设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个movable-area 【2】注意事项： movable-area 必须设置width和height属性，不设置默认为10px

4.2、movable-view：可移动的视图容器，在页面中可以拖拽滑动 【1】相关属性如下： direction：movable-view的移动方向，属性值有all、vertical、horizontal、none inertia：是否采用衔接滑动 out-of-bounds：是否采用衔接滑动 x：定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画 y：定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画 damping：阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快 friction：摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值 disabled：是否禁用 scale：是否支持双指缩放，默认缩放手势生效区域是在movable-view内 scale-min：定义缩放倍数最小值 scale-max：定义缩放倍数最大值 scale-value：定义缩放倍数，取值范围为 0.5 - 10 animation：是否使用动画 bindchange：拖动过程中触发的事件 bindscale：缩放过程中触发的事件

5.1、cover-view：覆盖在原生组件之上的文本视图 【1】相关属性如下： scroll-top：设置顶部滚动偏移量，仅在设置了 overflow-y: scroll 成为滚动元素后生效

5.2、cover-image：覆盖在原生组件之上的图片视图 【1】相关属性如下： src：图标路径，支持临时路径、网络地址（1.6.0起支持） bindload：图片加载成功时触发 binderror：图片加载失败时触发 【2】注意事项： 《1》基础库 2.1.0 起支持设置 scale rotate 的css样式，包括transition动画 《2》基础库 1.9.90 起 cover-view 支持 overflow: scroll，但不支持动态更新 overflow 《3》基础库 1.9.90 起最外层 cover-view 支持 position: fixed 《4》基础库 1.9.0 起支持插在 view 等标签下。在此之前只可嵌套在原生组件map、video、canvas、camera内，避免嵌套在其他组件内 《5》基础库 1.6.0 起支持css transition动画，transition-property只支持transform (translateX, translateY)与opacity 《6》基础库 1.6.0 起支持css opacity 《7》事件模型遵循冒泡模型，但不会冒泡到原生组件 《8》文本建议都套上cover-view标签，避免排版错误 《9》只支持基本的定位、布局、文本样式。不支持设置单边的border、background-image、shadow、overflow: visible等 《10》建议子节点不要溢出父节点 《11》默认设置的样式有：white-space: nowrap; line-height: 1.2; display: block 《12》自定义组件嵌套 cover-view 时，自定义组件的 slot 及其父节点暂不支持通过 wx:if 控制显隐，否则会导致 cover-view 不显示

二、基础内容：

1、icon：图标 【1】相关属性如下： type：icon类型 size：icon的大小，单位px color：icon的颜色，同css的color

2、text：文本 【1】相关属性如下： selectable：文本是否可选 Space：显示连续空格 《1》ensp：中文字符空格一半大小 《2》emsp：中文字符空格大小 《3》nbsp：根据字体设置的空格大小 decode：是否解码 【2】注意事项： 基础库版本低于 2.1.0 时，  组件内嵌的  style 设置可能不会生效。

3、rich-text：富文本 【1】相关属性如下： nodes：节点列表 / HTML String 现支持两种节点，通过type来区分，分别是元素节点和文本节点，默认是元素节点,在富文本区域里显示的HTML节点 元素节点：type = node 《1》name：标签名 《2》attrs：属性 《3》children：子节点列表 文本节点：type = text 《1》text：文本 【2】注意事项： 《1》nodes 不推荐使用 String 类型，性能会有所下降。 《2》rich-text 组件内屏蔽所有节点的事件。 《3》attrs 属性不支持 id ，支持 class 。 《4》name 属性大小写不敏感。 《5》如果使用了不受信任的HTML节点，该节点及其所有子节点将会被移除。 《6》img 标签仅支持网络图片。 《7》如果在自定义组件中使用 rich-text 组件，那么仅自定义组件的 wxss 样式对 rich-text 中的 class 生效。

4、progress：进度条 【1】相关属性如下： percent：百分比0~100 show-info：在进度条右侧显示百分比 stroke-width：进度条线的宽度，单位px color：进度条颜色 （请使用 activeColor） activeColor：已选择的进度条的颜色 backgroundColor：未选择的进度条的颜色 active：进度条从左往右的动画 active-mode：backwards: 动画从头播；forwards：动画从上次结束点接着播

三、表单组件：

1、button：按钮 【1】相关属性如下： size：按钮的大小 type：按钮的样式类型 plain：按钮是否镂空，背景色透明 disabled：是否禁用 loading：名称前是否带 loading 图标 form-type：用于 

 组件，点击分别会触发  组件的 submit/reset 事件 open-type：微信开放能力 hover-class：指定按钮按下去的样式类。当 hover-class="none"时，没有点击态效果 hover-stop-propagation：指定是否阻止本节点的祖先节点出现点击态 hover-start-time：按住后多久出现点击态，单位毫秒 hover-stay-time：手指松开后点击态保留时间，单位毫秒

lang：指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。 bindgetuserinfo：用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致 session-from：会话来源 send-message-title：会话内消息卡片标题 send-message-path：会话内消息卡片点击跳转小程序路径 send-message-img：会话内消息卡片图片 show-message-card：显示会话内消息卡片 bindcontact：客服消息回调 bindgetphonenumber：获取用户手机号回调 app-parameter：打开 APP 时，向 APP 传递的参数 binderror：当使用开放能力时，发生错误的回调 bindopensetting：在打开授权设置页后回调

size有效值： default：默认大小 mini：小尺寸

type 有效值： primary：绿色 default：白色 warn：红色

form-type 有效值： submit：提交表单 reset：重置表单

open-type 有效值： contact：打开客服会话 share：触发用户转发，使用前建议先阅读使用指引 getUserInfo：获取用户信息，可以从bindgetuserinfo回调中获取到用户信息 getPhoneNumber：获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息 launchApp：打开APP，可以通过app-parameter属性设定向APP传的参数 openSetting：打开授权设置页 feedback：打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容 【2】注意事项： 目前，设置了 form-type 的 button 只会对当前组件中的 form 有效。因而，将 button 封装在自定义组件中，而 from 在自定义组件外，将会使这个 button 的 form-type 失效。

2.1、checkbox-group：多项选择器，内部由多个checkbox组成 【1】相关属性如下： bindchange：中选中项发生改变是触发 change 事件

2.2、checkbox：多选项目 【1】相关属性如下： value：标识，选中时触发的 change 事件，并携带  的 value disabled：是否禁用 checked：当前是否选中，可用来设置默认选中 color：checkbox的颜色，同css的color

3、form：表单 【1】相关属性如下： report-submit：是否返回 formId 用于发送模板消息 bindsubmit：携带 form 中的数据触发 submit 事件 bindreset：表单重置时会触发 reset 事件

4、input：输入框 【1】相关属性如下： value：输入框的初始内容 type：input 的类型 password：是否是密码类型 placeholder：输入框为空时占位符 placeholder-style：指定 placeholder 的样式 placeholder-class：指定 placeholder 的样式类 disabled：是否禁用 maxlength：最大输入长度，设置为 -1 的时候不限制最大长度 cursor-spacing：指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离。

auto-focus：自动聚焦，拉起键盘 focus：获取焦点 confirm-type：设置键盘右下角按钮的文字，仅在type='text'时生效 confirm-hold：点击键盘右下角按钮时是否保持键盘不收起 cursor：指定focus时的光标位置 selection-start：光标起始位置，自动聚集时有效，需与selection-end搭配使用 selection-end：光标结束位置，自动聚集时有效，需与selection-start搭配使用 adjust-position：键盘弹起时，是否自动上推页面 bindinput：键盘输入时触发 bindfocus：输入框聚焦时触发 bindblur：输入框失去焦点时触发 bindconfirm：点击完成按钮时触发

type 有效值： text：文本输入键盘 number：数字输入键盘 idcard：身份证输入键盘 digit：带小数点的数字键盘

confirm-type 有效值： send：右下角按钮为“发送” search：右下角按钮为“搜索” next：右下角按钮为“下一个” go：右下角按钮为“前往” done：右下角按钮为“完成” 【2】注意事项： 《1》微信版本 6.3.30, focus 属性设置无效 《2》微信版本 6.3.30, placeholder 在聚焦时出现重影问题 《3》input 组件是一个 native 组件，字体是系统字体，所以无法设置 font-family 《4》在 input 聚焦期间，避免使用 css 动画 《5》对于将 input 封装在自定义组件中、而 from 在自定义组件外的情况， form 将不能获得这个自定义组件中 input 的值。此时需要使用自定义组件的 内置 behaviors wx://form-field

5、label：标签 用来改进表单组件的可用性，使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件 【1】相关属性如下： for：绑定控件的 id

6、picker：从底部弹起的滚动选择器 从底部弹起的滚动选择器，现支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。

【1.1】普通选择器：mode = selector： range：mode为 selector 或 multiSelector 时，range 有效 range-key：当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 value：value 的值表示选择了 range 中的第几个（下标从 0 开始） bindchange：value 改变时触发 change 事件 disabled：是否禁用 bindcancel：取消选择或点遮罩层收起 picker 时触发

【1.2】多列选择器：mode = multiSelector： range：mode为selector或multiSelector 时，range 有效。二维数组，长度表示多少列，数组的每项表示每列的数据 range-key：当 range 是一个 二维Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 value：value 每一项的值表示选择了 range 对应项中的第几个（下标从 0 开始） bindchange：value 改变时触发 change 事件 bindcolumnchange：某一列的值改变时触发 columnchange 事件 bindcancel：取消选择时触发 disabled：是否禁用

【1.3】时间选择器：mode = time： value：表示选中的时间，格式为"hh:mm" start：表示有效时间范围的开始，字符串格式为"hh:mm" end：表示有效时间范围的结束，字符串格式为"hh:mm" bindchange：value 改变时触发 change 事件 bindcancel：取消选择时触发 disabled：是否禁用

【1.4】日期选择器：mode = date： value：表示选中的日期，格式为"YYYY-MM-DD" start：表示有效日期范围的开始，字符串格式为"YYYY-MM-DD" end：表示有效日期范围的结束，字符串格式为"YYYY-MM-DD" fields：有效值 year,month,day，表示选择器的粒度 bindchange：value 改变时触发 change 事件 bindcancel：取消选择时触发 disabled：是否禁用

fields 有效值： year：选择器粒度为年 month：选择器粒度为月份 day：选择器粒度为天

【1.5】省市区选择器：mode = region： value：表示选中的省市区，默认选中每一列的第一个值 custom-item：可为每一列的顶部添加一个自定义的项 bindchange：value 改变时触发 change 事件 bindcancel：取消选择时触发 disabled：是否禁用

7、picker-view：嵌入页面的滚动选择器 【1】相关属性如下： value：数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。 indicator-style：设置选择器中间选中框的样式 indicator-class：设置选择器中间选中框的类名 mask-style：设置蒙层的样式 mask-class：设置蒙层的类名 bindchange：当滚动选择，value 改变时触发 change 事件 【2】注意事项： 滚动时在iOS自带振动反馈，可在系统设置 -> 声音与触感 -> 系统触感反馈中关闭

8.1、radio-group：单项选择器，内部由多个组成。 【1】相关属性如下： bindchange： 中的选中项发生变化时触发 change 事件

8.2、radio：单选项目 【1】相关属性如下： value： 标识。当该 选中时， 的 change 事件会携带的value checked：当前是否选中 disabled：是否禁用 color：radio的颜色，同css的color

9、slider：滑动选择器 【1】相关属性如下： min：最小值 max：最大值 step：步长，取值必须大于 0，并且可被(max - min)整除 disabled：是否禁用 value：当前取值 color：背景条的颜色（请使用 backgroundColor） selected-color：已选择的颜色（请使用 activeColor） activeColor：已选择的颜色 backgroundColor：背景条的颜色 block-size：滑块的大小，取值范围为 12 - 28 block-color：滑块的颜色 show-value：是否显示当前 value bindchange：当滚动选择，value 改变时触发 change 事件 bindchanging：拖动过程中触发的事件

10、switch：开关选择器 【1】相关属性如下： checked：是否选中 type：样式，有效值：switch, checkbox bindchange：checked 改变时触发 change 事件 color：switch 的颜色，同 css 的 color 【2】注意事项： switch类型切换时在iOS自带振动反馈，可在系统设置 -> 声音与触感 -> 系统触感反馈中关闭

11、textarea：多行输入框 【1】相关属性如下： value：输入框的内容 placeholder：输入框为空时占位符 placeholder-style：指定 placeholder 的样式 placeholder-class：指定 placeholder 的样式类 disabled：是否禁用 maxlength：最大输入长度，设置为 -1 的时候不限制最大长度 auto-focus：自动聚焦，拉起键盘 focus：获取焦点 auto-height：是否自动增高，设置auto-height时，style.height不生效 fixed：如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true cursor-spacing：指定光标与键盘的距离，单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 cursor：指定focus时的光标位置

show-confirm-bar：是否显示键盘上方带有”完成“按钮那一栏 selection-start：光标起始位置，自动聚集时有效，需与selection-end搭配使用 selection-end：光标结束位置，自动聚集时有效，需与selection-start搭配使用 adjust-position：键盘弹起时，是否自动上推页面 bindfocus：输入框聚焦时触发 bindblur：输入框失去焦点时触发 bindlinechange：输入框行数变化时调用 bindinput：当键盘输入时，触发 input 事件 bindconfirm：点击完成时， 触发 confirm 事件 【2】注意事项： 《1》微信版本 6.3.30，textarea 在列表渲染时，新增加的 textarea 在自动聚焦时的位置计算错误 《2》textarea 的 blur 事件会晚于页面上的 tap 事件，如果需要在 button 的点击事件获取 textarea，可以使用 form 的 bindsubmit 《3》不建议在多行文本上对用户的输入进行修改，所以 textarea 的 bindinput 处理函数并不会将返回值反映到 textarea 上 《4》textarea 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级 《5》请勿在 scroll-view、swiper、picker-view、movable-view 中使用 textarea 组件 《6》css 动画对 textarea 组件无效

四、导航：

1、navigator：页面链接 【1】相关属性如下： target：在哪个目标上发生跳转，默认当前小程序 url：当前小程序内的跳转链接 open-type：跳转方式 delta：当 open-type 为 'navigateBack' 时有效，表示回退的层数 app-id：当target="miniProgram"时有效，要打开的小程序 appId path：当target="miniProgram"时有效，打开的页面路径，如果为空则打开首页 extra-data：当target="miniProgram"时有效，需要传递给目标小程序的数据，目标小程序可在 App.onLaunch()，App.onShow() 中获取到这份数据 version：当target="miniProgram"时有效，要打开的小程序版本，有效值 develop（开发版），trial（体验版），release（正式版），仅在当前小程序为开发版或体验版时此参数有效；如果当前小程序是正式版，则打开的小程序必定是正式版。

hover-class：指定点击时的样式类，当hover-class="none"时，没有点击态效果 hover-stop-propagation：指定是否阻止本节点的祖先节点出现点击态 hover-start-time：按住后多久出现点击态，单位毫秒 hover-stay-time：手指松开后点击态保留时间，单位毫秒 bindsuccess：当target="miniProgram"时有效，跳转小程序成功 binderror：当target="miniProgram"时有效，跳转小程序失败 bindcomplete：当target="miniProgram"时有效，跳转小程序完成

open-type 有效值： navigate：对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能 redirect：对应 wx.redirectTo 的功能 switchTab：对应 wx.switchTab 的功能 reLaunch：对应 wx.reLaunch 的功能 navigateBack：对应 wx.navigateBack 的功能 exit：退出小程序，target="miniProgram"时生效

2、functional-page-navigator：用于跳转到插件功能页(仅在插件的自定义组件中有效) 【1】相关属性如下： version：跳转到的小程序版本 name：要跳转到的功能页 args：功能页参数，参数格式与具体功能页相关 bindsuccess：功能页返回，且操作成功时触发， detail 格式与具体功能页相关 bindfail：功能页返回，且操作失败时触发， detail 格式与具体功能页相关

name 有效值： loginAndGetUserInfo：获取用户信息，对应 wx.login 和 wx.getUserInfo requestPayment：支付，对应 wx.requestPayment 【2】注意事项： 《1》功能页是插件所有者小程序中的一个特殊页面，开发者不能自定义这个页面的外观 《2》在功能页展示时，一些与界面展示相关的接口将被禁用（接口调用返回 fail ） 《3》这个组件本身可以在开发者工具中使用，但功能页的跳转目前不支持在开发者工具中调试，请在真机上测试

五、媒体组件：

1、audio：音频 【1】相关属性如下： id：audio 组件的唯一标识符 src：要播放音频的资源地址 loop：是否循环播放 controls：是否显示默认控件 poster：默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效 name：默认控件上的音频名字，如果 controls 属性值为 false 则设置 name 无效 author：默认控件上的作者名字，如果 controls 属性值为 false 则设置 author 无效 binderror：当发生错误时触发 error 事件 bindplay：当开始/继续播放时触发play事件 bindpause：当暂停播放时触发 pause 事件 bindtimeupdate：当播放进度改变时触发 timeupdate 事件 bindended：当播放到末尾时触发 ended 事件

MediaError.code(返回错误码)： 1：获取资源被用户禁止 2：网络错误 3：解码错误 4：不合适资源

2、image：图片 【1】相关属性如下： src：图片资源地址 mode：图片裁剪、缩放的模式 lazy-load：图片懒加载 binderror：当错误发生时，发布到 AppService 的事件名，事件对象 bindload：当图片载入完毕时，发布到 AppService 的事件名，事件对象

mode 有效值(13种模式，4种是缩放模式，9种是裁剪模式)： 缩放模式 scaleToFill：不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来 aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取 widthFix：宽度不变，高度自动变化，保持原图宽高比不变 裁剪模式 top：不缩放图片，只显示图片的顶部区域 bottom：不缩放图片，只显示图片的底部区域 center：不缩放图片，只显示图片的中间区域 left：不缩放图片，只显示图片的左边区域 right：不缩放图片，只显示图片的右边区域 top left：不缩放图片，只显示图片的左上边区域 top right：不缩放图片，只显示图片的右上边区域 bottom left：不缩放图片，只显示图片的左下边区域 bottom right：不缩放图片，只显示图片的右下边区域 【2】注意事项： 《1》功能页是插件所有者小程序中的一个特殊页面，开发者不能自定义这个页面的外观

3、video：视频 【1】相关属性如下： src：要播放视频的资源地址 initial-time：指定视频初始播放位置 duration：指定视频时长 controls：是否显示默认播放控件（播放/暂停按钮、播放进度、时间）是否显示默认播放控件（播放/暂停按钮、播放进度、时间） danmu-list：弹幕列表 danmu-btn：是否显示弹幕按钮，只在初始化时有效，不能动态变更 enable-danmu：是否展示弹幕，只在初始化时有效，不能动态变更 autoplay：是否自动播放 loop：是否循环播放 muted：是否静音播放 page-gesture：在非全屏模式下，是否开启亮度与音量调节手势 direction：设置全屏时视频的方向，不指定则根据宽高比自动判断 show-progress：若不设置，宽度大于240时才会显示 show-fullscreen-btn：是否显示全屏按钮

show-play-btn：是否显示视频底部控制栏的播放按钮 show-center-play-btn：是否显示视频中间的播放按钮 enable-progress-gesture：是否开启控制进度的手势 objectFit：当视频大小与 video 容器大小不一致时，视频的表现形式 poster：视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效 bindplay：当开始/继续播放时触发play事件 bindpause：当暂停播放时触发 pause 事件 bindended：当播放到末尾时触发 ended 事件 bindtimeupdate：播放进度变化时触发 bindfullscreenchange：视频进入和退出全屏时触发 bindwaiting：视频出现缓冲时触发 binderror：视频播放出错时触发 【2】注意事项： 《1》video 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级 《2》请勿在 scroll-view、swiper、picker-view、movable-view 中使用 video 组件 《3》css 动画对 video 组件无效

4、camera：系统相机 【1】相关属性如下： mode：有效值为 normal, scanCode device-position：前置或后置，值为front, back flash：闪光灯，值为auto, on, off scan-area：扫码识别区域，格式为[x, y, w, h]，x,y是相对于camera显示区域的左上角，w,h为区域宽度，单位px，仅在 mode="scanCode" 时生效 bindstop：摄像头在非正常终止时触发，如退出后台等情况 binderror：用户不允许使用摄像头时触发 bindscancode：在成功识别到一维码时触发，仅在 mode="scanCode" 时生效 【2】注意事项： 《1》camera 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。可使用 cover-view cover-image覆盖在上面。 《2》同一页面只能插入一个 camera 组件 《3》 请勿在 scroll-view、swiper、picker-view、movable-view 中使用 camera 组件 《4》 scan-area 属性目前存在识别区域不准的问题，建议先不指定

5、live-player：实时音视频播放 【1】相关属性如下： src：音视频地址，目前仅支持 flv, rtmp 格式 mode：live（直播），RTC（实时通话） autoplay：自动播放 muted：是否静音 orientation：画面方向，可选值有 vertical，horizontal object-fit：填充模式，可选值有 contain，fillCrop background-mute：进入后台时是否静音（已废弃，默认退台静音） min-cache：最小缓冲区，单位s max-cache：最大缓冲区，单位s bindstatechange：播放状态变化事件 bindfullscreenchange：全屏变化事件 bindnetstatus：网络状态通知 【2】注意事项： 《1》live-player 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。可使用 cover-view cover-image覆盖在上面 《2》请勿在 scroll-view、swiper、picker-view、movable-view 中使用 live-player 组件 《3》css 动画对 live-player 组件无效

6、live-pusher：实时音视频录制(需要用户授权 scope.camera、scope.record) 【1】相关属性如下： url：推流地址。目前仅支持 flv, rtmp 格式 mode：SD（标清）, HD（高清）, FHD（超清）, RTC（实时通话） autopush：自动推流 muted：是否静音 enable-camera：开启摄像头 auto-focus：自动聚集 orientation：vertical，horizontal beauty：美颜 whiteness：美白 aspect：宽高比，可选值有 3:4, 9:16 min-bitrate：最小码率 max-bitrate：最大码率 waiting-image：进入后台时推流的等待画面 waiting-image-hash：等待画面资源的MD5值 zoom：调整焦距 background-mute：进入后台时是否静音 bindstatechange：状态变化事件 bindnetstatus：网络状态通知 binderror：渲染错误事件 【2】注意事项： 《1》live-pusher 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。可使用 cover-view cover-image覆盖在上面 《2》请勿在 scroll-view、swiper、picker-view、movable-view 中使用 live-pusher 组件 《3》css 动画对 live-pusher 组件无效

六、地图：

1、map：地图 【1】相关属性如下： longitude：中心经度 latitude：中心纬度 scale：缩放级别，取值范围为5-18 markers：标记点 covers：即将移除，请使用 markers polyline：路线 circles：圆 controls：控件 include-points：缩放视野以包含所有给定的坐标点 show-location：显示带有方向的当前定位点 bindmarkertap：点击标记点时触发，会返回marker的id bindcallouttap：点击标记点对应的气泡时触发，会返回marker的id bindcontroltap：点击控件时触发，会返回control的id bindregionchange：视野发生变化时触发 bindtap：点击地图时触发 bindupdated：在地图渲染更新完成时触发

markers：标记点用于在地图上显示标记的位置 id：marker点击事件回调会返回此id latitude：纬度 longitude：经度 title：标注点名 iconPath：显示的图标 rotate：旋转角度 alpha：标注的透明度 width：标注图标宽度 height：标注图标高度 callout：自定义标记点上方的气泡窗口 label：为标记点旁边增加标签 anchor：经纬度在标注图标的锚点，默认底边中点

marker上的气泡callout content：文本 color：文本颜色 fontSize：文字大小 borderRadius：callout边框圆角 bgColor：背景色 padding：文本边缘留白 display：'BYCLICK':点击显示; 'ALWAYS':常显 textAlign：文本对齐方式。有效值: left, right, center

marker上的气泡label content：文本 color：文本颜色 fontSize：文字大小 x：label的坐标（废弃） y：label的坐标（废弃） anchorX：label的坐标，原点是 marker 对应的经纬度 anchorY：label的坐标，原点是 marker 对应的经纬度 borderWidth：边框宽度 borderColor：边框颜色 borderRadius：边框圆角 bgColor：背景色 padding：文本边缘留白 textAlign：文本对齐方式。有效值: left, right, center

polyline：指定一系列坐标点，从数组第一项连线至最后一项 points：经纬度数组 color：线的颜色 width：线的宽度 dottedLine：是否虚线 arrowLine：带箭头的线 arrowIconPath：更换箭头图标 borderColor：线的边框颜色 borderWidth：线的厚度

circles：在地图上显示图 latitude：纬度 longitude：经度 color：描边的颜色 fillColor：填充颜色 radius：半径 strokeWidth：描边的宽度

controls：在地图上显示控件，控件不随着地图移动。即将废弃，请使用 cover-view id：控件id positio：控件在地图的位置 iconPath：显示的图标 clickable：是否可点击

position：地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬度 left：距离地图的左边界多远距离地图的左边界多远 top：距离地图的上边界多远 width：控件宽度 height：控件高度 【2】注意事项： 《1》map 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级 《2》请勿在 scroll-view、swiper、picker-view、movable-view 中使用 map 组件 《3》css 动画对 map 组件无效 《4》map 组件使用的经纬度是火星坐标系，调用 wx.getLocation 接口需要指定 type 为 gcj02

七、画布：

1、canvas：画布 【1】相关属性如下： canvas-id：canvas 组件的唯一标识符 disable-scroll：当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新 bindtouchstart：手指触摸动作开始 bindtouchmove：手指触摸后移动 bindtouchend：手指触摸动作结束 bindtouchcancel：手指触摸动作被打断，如来电提醒，弹窗 bindlongtap：手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动 binderror：当发生错误时触发 error 事件 【2】注意事项： 《1》canvas 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级 《2》请勿在 scroll-view、swiper、picker-view、movable-view 中使用 canvas 组件 《3》css 动画对 canvas 组件无效 《4》避免设置过大的宽高，在安卓下会有crash的问题

八、开放能力：

1、open-data：用于展示微信开放的数据 【1】相关属性如下： type：开放数据类型 open-gid：当 type="groupName" 时生效, 群id lang：当 type="user*" 时生效，以哪种语言展示 userInfo，有效值有：en, zh_CN, zh_TW

type 有效值： groupName：拉取群名称 userNickName：用户昵称 userAvatarUrl：用户头像 userGender：用户性别 userProvince：用户所在省份 userCountry：用户所在国家 userLanguage：用户的语言 【2】注意事项： 《1》只有当前用户在此群内才能拉取到群名称

2、web-view：web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面 【1】相关属性如下： src：webview 指向网页的链接。可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名 bindmessage：网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息 【2】注意事项： 《1》网页内iframe的域名也需要配置到域名白名单 《2》开发者工具上，可以在  组件上通过右键 - 调试，打开  组件的调试 《3》网页与小程序之间不支持除JSSDK提供的接口之外的通信 《4》在iOS中，若存在JSSDK接口调用无响应的情况，可在的src后面加个#wechat_redirect解决

3、ad：广告 【1】相关属性如下： unit-id：广告单元id，可在小程序管理后台的流量主模块新建 bindload：广告加载成功的回调 binderror：当广告发生错误时，触发的事件，可以通过该事件获取错误码及原因 【2】注意事项： 《1》目前可以给 ad 标签设置 wxss 样式调整广告宽度，以使广告与页面更融洽，但请遵循小程序流量主应用规范 《2》在无广告展示时，ad 标签不会占用高度 《3》ad 组件不支持触发 bindtap 等触摸相关事件