微信小程序学习之路(二) ------ 组件

组件

视图容器

1. view

   • hover-class , 指定按下去的样式类，不指定hover-class没有点击特效
   • hover-start-time, 按住后多久出现点击态(默认50ms)
   • hovar-stay-time, 松开后点击态保留多久(默认400ms)

       // logs.wxml
       <view class="section">
       <view class="section__title">flex-direction: rowview>
       <view class="flex-wrp" style="flex-direction:row;">
           <view class="flex-item bc_green">1view>
           <view class="flex-item bc_red" hover-class="bc_yellow">2view>
           <view class="flex-item bc_blue">3view>
       view>
       view>
       <view class="section">
       <view class="section__title">flex-direction: columnview>
       <view class="flex-wrp" style="height: 300px;flex-direction:column;">
           <view class="flex-item bc_green" hover-class="bc_orange">1view>
           <view class="flex-item bc_red">2view>
           <view class="flex-item bc_blue">3view>
       view>
       view>
   
       // logs.wxss
       .flex-wrp{
           display: flex;
       }
       .flex-item{
           flex: 1;
           width: 100rpx;
           height: 100rpx;
       }
       .bc_green{
           background-color: green;
       }
       .bc_red{
           background-color: red;
       }
       .bc_blue{
           background-color: blue;
       }
       .bc_orange{
           background-color: orange;
       }
       .bc_yellow{
           background-color: yellow;
       }
   
       // 如果需要滚动视图。需要使用 scroll-view

2. scroll-view： 滚动视图
   
   • scroll-x — 允许横向滚动(默认false)
   • scroll-y — 允许纵向滚动(默认false)
   • upper-threshold(number) — 距顶部/左边多远时（单位px），触发 scrolltoupper 事件
   • lower-threshold(number) — 距底部/右边多远时（单位px），触发 scrolltolower 事件
   • scroll-top(number) — 设置竖向滚动条位置
   • scroll-left(number) — 设置横向滚动条位置
   • scroll-into-view(目标元素的id) — 滚动到目标元素
   • scroll-with-animation(false) — 设置滚动条位置时使用动画过度
   • enable-back-to-top(false) — ios点击顶部，安卓双击顶部标题返回顶部
   • bindscrolltoupper(event) — 滚动到左边/顶部会触发 scrolltoupper 事件
   • bindscrolltolower(event) — 滚动到左边/顶部会触发 scrolltolower 事件
   • bindscroll(event) — 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
     

     使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height。
     注意：
     

     1. 请勿在 scroll-view 中使用 textarea、map、canvas、video 组件
     2. scroll-into-view 的优先级高于 scroll-top
     3. 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh
     4. 若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部

3. swiper： 滑块视图容器，swiper中只可放置swiper-item组件，swiper-item只可放置在swiper中

   • indicator-dots(false) — 是否显示面板指示点
   • indicator-color(rgba(0,0,0,.3)) — 面板指示点颜色
   • indicator-active-color(#000000) — 当前选中的指示点颜色
   • autoplay(false) — 是否自动切换
   • current(0) — 当前所在页面的index
   • interval(5000) — 自动切换间隔
   • duration(500) — 滑动动画时长
   • circular(false) — 是否采用衔接滑动
   • bindchange(event) — current 改变时会触发 change 事件，event.detail = {current: current}

       // item.wxml
       "{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
           for="{{imgUrls}}">
               item>
               "{{item}}" class="slide-image" width="355" height="150" />
               item>
           
       
       "changeIndicatorDots"> indicator-dots 
       "changeAutoplay"> autoplay 
       "intervalChange" show-value min="500" max="2000" /> interval
       "durationChange" show-value min="1000" max="10000" /> duration
   
       // item.js
       Page({
           data: {
               imgUrls: [
                   'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
                   'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
                   'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
               ],
               indicatorDots: false,
               autoplay: false,
               interval: 500,
               duration: 100
           },
           changeIndicatorDots: function (e) {
               this.setData({
                   indicatorDots: !this.data.indicatorDots
               })
           },
           changeAutoplay: function (e) {
               this.setData({
                   autoplay: !this.data.autoplay
               })
           },
           intervalChange: function (e) {
               this.setData({
                   interval: e.detail.value
               })
           },
           durationChange: function (e) {
               this.setData({
                   duration: e.detail.value
               })
           }
       })

4. movable-area: movable-view 的可移动区域

   • 注意：movable-area 必须设置width和height属性，不设置默认为10px
   • movable-view: 可移动的视图容器，在页面中可以拖拽滑动
   • direction(none) — movable-view的移动方向，属性值有all、vertical、horizontal、none
   • inertia(false) — movable-view 是否带有惯性
   • out-of-bounds(false) — 超过可移动区域后，movable-view是否还可以移动
   • x(number) — 定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画
   • y(number) — 定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画
   • damping(20) — 阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快
   • friction(2) — 摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值
   • 注意：movable-view必须在组件中，并且必须是直接子节点，否则不能移动。
   • 示例：

       // item.wxml
       <view class="section">
           <view class="section__title">movable-view区域小于movable-areaview>
           <movable-area style="height: 200px;width: 200px;background: red;">
               <movable-view style="height: 50px; width: 50px; background: blue;" x="{{x}}" y="{{y}}">movable-view>
           movable-area>
           <view class="btn-area">
               <button size="mini" bindtap="tap">click me to move to (30px, 30px)button>
           view>
           <view class="section__title">movable-view区域大于movable-areaview>
           <movable-area style="height: 100px;width: 100px;background: red;">
               <movable-view style="height: 200px; width: 200px; background: blue;">movable-view>
           movable-area>
       view>
   
       // item.js
       Page({
           data: {
               x: 0,
               y: 0
           },
           tap: function (e) {
               this.setData({
               x: 30,
               y: 30
               });
           }
       })

基础内容

1. icon: 图标

   • type(string) — icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
   • size(23) — icon的大小，单位： px
   • color(color) — icon 的颜色，同css的color

       // item.wxml
       <view class="group">
           <block wx:for="{{iconSize}}">
               <icon type="success" size="{{item}}"/>
           block>
       view>
   
       <view class="group">
           <block wx:for="{{iconType}}">
               <icon type="{{item}}" size="40"/>
           block>
       view>
   
   
       <view class="group">
           <block wx:for="{{iconColor}}">
               <icon type="success" size="40" color="{{item}}"/>
           block>
       view>
   
       // item.js  
       Page({
           data: {
               iconSize: [20, 30, 40, 50, 60, 70],
               iconColor: [
               'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
               ],
               iconType: [
               'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
               ]
           }
       })

2. text: 文本
   
   • selectable(false) — 文本是否可选
   • 组件内只支持 嵌套。
   • 支持转义字符 “\” , 除了文本节点以外的其他节点都无法长按选中。

3. progress： 进度条

   • percent(float) — 百分比0-100
   • show-info(false) — 在进度条右侧显示百分比
   • stroke-width(6) — 进度条线宽
   • color(#09BB07) — 进度条颜色
   • activeColor(color) — 已选择的进度条颜色
   • backgroundColor(color) — 未选择的进度条颜色
   • active(false) — 进度条从左往右的动画

       percent="20" show-info />
       percent="40" stroke-width="12" />
       percent="60" color="pink" />
       percent="80" active />

表单组件

1. buton

   • size(default) — 按钮的大小(mini、default)
   • type(default) — 按钮的样式类型(primary、warn、default)
   • plain(false) — 按钮是否镂空，背景色透明
   • disabled(false) — 按钮是否禁用
   • loading(false) — 名称前是否带loading图标
   • form-type(string) — 用于 组件，点击分别会触发 submit/reset 事件(取值为submit、reset)
   • open-type(string) — 微信开放能力(取值为contact(客服)、share(触发用户转发))
   • hover-class(button-hover) — 当hover-class=”none”时没有点击效果注：button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
   • hover-start-time(20) — 按住后多久出现点击态，单位毫秒
   • hover-stay-time(70) — 手指松开后点击态保留时间，单位毫秒

       // item.wxml
       type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}"
       disabled="{{disabled}}" bindtap="default" hover-class="other-button-hover"> default 
       type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}"
               disabled="{{disabled}}" bindtap="primary"> primary 
       type="warn" size="{{warnSize}}" loading="{{loading}}" plain="{{plain}}"
               disabled="{{disabled}}" bindtap="warn"> warn 
       "setDisabled">点击设置以上按钮disabled属性
       "setPlain">点击设置以上按钮plain属性
       "setLoading">点击设置以上按钮loading属性
       type="contact">进入客服会话
   
       // item.wxss 
       /** 修改button默认的点击态样式类**/
       .button-hover {
       background-color: red;
       }
       /** 添加自定义button点击态样式类**/
       .other-button-hover {
       background-color: blue;
       }
   
       // item.js  
       var types = ['default', 'primary', 'warn']
       var pageObject = {
           data: {
               defaultSize: 'default',
               primarySize: 'default',
               warnSize: 'default',
               disabled: false,
               plain: false,
               loading: false
           },
           setDisabled: function (e) {
               this.setData({
               disabled: !this.data.disabled
               })
           },
           setPlain: function (e) {
               this.setData({
               plain: !this.data.plain
               })
           },
           setLoading: function (e) {
               this.setData({
               loading: !this.data.loading
               })
           }
       }
   
       for (var i = 0; i < types.length; ++i) {
           (function (type) {
               pageObject[type] = function (e) {
               var key = type + 'Size'
               var changedData = {}
               changedData[key] =
                   this.data[key] === 'default' ? 'mini' : 'default'
               this.setData(changedData)
               }
           })(types[i])
       }
   
       Page(pageObject)

2. checkbox
   
   • checkbox-group： 多项选择器，内部由多个checkbox组成。包含属性：bindchange(event) — 中选中项发生改变是触发 change 事件，detail = {value:[选中的checkbox的value的数组]}
   • value(string) — 标识，选中时触发的 change 事件，并携带 的 value
   • disabled(false) — 是否禁用
   • checked(false) — 设置默认是否选中
   • color(color) — checkbox的颜色，同css3

3. form

   • 将组件内的用户输入的 提交。
   • 当点击 表单中 formType 为 submit 的 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。
   • report-submit(boolean) — 是否返回formID用于发送模板消息(详见模板消息API)
   • bindsubmit(event) — 携带 form 中的数据触发 submit 事件，event.detail = {value : {‘name’: ‘value’} , formId: ”}
   • bindreset(event) — 表单重置时会触发 reset 事件

       // item.wxml
       <form bindsubmit="formSubmit" bindreset="formReset">
           <view class="section section_gap">
               <view class="section__title">switchview>
               <switch name="switch" />
           view>
           <view class="section section_gap">
               <view class="section__title">sliderview>
               <slider name="slider" show-value>slider>
           view>
           <view class="section">
               <view class="section__title">inputview>
               <input name="input" placeholder="please input here" />
           view>
           <view class="section section_gap">
               <view class="section__title">radioview>
               <radio-group name="radio-group">
               <label>
                   <radio value="radio1" />radio1label>
               <label>
                   <radio value="radio2" />radio2label>
               radio-group>
           view>
           <view class="section section_gap">
               <view class="section__title">checkboxview>
               <checkbox-group name="checkbox">
               <label>
                   <checkbox value="checkbox1" />checkbox1label>
               <label>
                   <checkbox value="checkbox2" />checkbox2label>
               checkbox-group>
           view>
           <view class="btn-area">
               <button formType="submit">Submitbutton>
               <button formType="reset">Resetbutton>
           view>
       form>
   
       // item.js
       Page({
           formSubmit: function (e) {
               console.log('form发生了submit事件，携带数据为：', e.detail.value)
           },
           formReset: function () {
               console.log('form发生了reset事件')
           }
       })

4. input
   
   • value
   • type — 可选(‘text’、’number’、’idvard’：身份证输入键盘、’dight’：带小数点的数字键盘)
   • password(false) — 是否是密码类型
   • placehoider
   • placeholder-style(string) — 指定 placeholder 的样式
   • placeholder-class(“input-placeholder” ) — 指定 placeholder 的样式类
   • disabled
   • maxlength(140) — 最大输入长度，设置为 -1 的时候不限制最大长度
   • cursor-spacing(0) — 指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
   • focus(false) — 自动聚焦，获取焦点
   • confirm-type(‘done’) — 设置键盘右下角按钮的文字(‘send’、’sreach’、’next’、’go’:前往、’done’)
   • confirm-hold(false) — 单击键盘右下按钮时，是否保持键盘不收起
   • bindinput(event) — 当键盘输入时，触发input事件，event.detail = {value: value}，处理函数可以直接 return 一个字符串，将替换输入框的内容。
   • bindfocus(event) — 输入框聚焦时触发，event.detail = {value: value}
   • bindblur(event) — 输入框失去焦点时触发，event.detail = {value: value}
   • bindconfirm(event) — 点击完成按钮时触发，event.detail = {value: value}
5. label
   
   • 用来改进表单组件的可用性，使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。
   • 目前可以绑定的控件有：, , , 。
   • for属性绑定控件id

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

   • 普通选择器：mode = selector
   • range([]) — mode为 selector 时，range 有效,值为Array / Object Array
   • range-key(string) — 当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
   • value(0) — number型 — value 的值表示表示选择了 range 中的第几个（下标从 0 开始）。
   • bindchange(event) — value 改变时触发 change 事件，event.detail = {value: value}
   • disabled
   • 时间选择器：mode = time
   • value(string) — 选中的时间，格式为：”hh:mm”
   • start(string) — 表示有效时间范围的开始，字符串格式为”hh:mm”
   • end(string) — 表示有效时间范围的结束，字符串格式为”hh:mm”
   • bindchange(event) — value 改变时触发 change 事件，event.detail = {value: value}
   • disabled
   • 日期选择器：mode = date
   • value(0) — 表示选中的日期，格式为”YYYY-MM-DD”
   • start(string) — 表示有效日期范围的开始，字符串格式为”YYYY-MM-DD”
   • end(string) — 表示有效日期范围的结束，字符串格式为”YYYY-MM-DD”
   • fields(day) — 有效值 year,month,day，表示选择器的粒度
   • bindchange(event) — value 改变时触发 change 事件，event.detail = {value: value}
   • disabled

       // item.wxml
       <view class="section">
       <view class="section__title">地区选择器view>
           <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
               <view class="picker">
               当前选择：{{array[index]}}
               view>
           picker>
       view>
       <view class="section">
           <view class="section__title">时间选择器view>
           <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
               <view class="picker">
               当前选择: {{time}}
               view>
           picker>
       view>
   
       <view class="section">
           <view class="section__title">日期选择器view>
           <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
               <view class="picker">
               当前选择: {{date}}
               view>
           picker>
       view>
   
       // item.js  
       Page({
           data: {
               array: ['美国', '中国', '巴西', '日本'],
               objectArray: [
               {
                   id: 0,
                   name: '美国'
               },
               {
                   id: 1,
                   name: '中国'
               },
               {
                   id: 2,
                   name: '巴西'
               },
               {
                   id: 3,
                   name: '日本'
               }
               ],
               index: 0,
               date: '2016-09-01',
               time: '12:01'
           },
           bindPickerChange: function(e) {
               console.log('picker发送选择改变，携带值为', e.detail.value)
               this.setData({
               index: e.detail.value
               })
           },
           bindDateChange: function(e) {
               this.setData({
               date: e.detail.value
               })
           },
           bindTimeChange: function(e) {
               this.setData({
               time: e.detail.value
               })
           }
       })

7. picker-view: 嵌入页面的滚动选择器

   • value(numberArray) — 数组中的数字依次表示 picker-view 内的 picker-view-colume 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。
   • indicator-style(string) — 设置选择器中间选中框的样式
   • indicator-class(string) — 设置选择器中间选中框的类名
   • bindchange(event) — 当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）
   • 注意：其中只可放置组件，其他节点不会显示。 picker-view-column组件仅可放置于中，其孩子节点的高度会自动设置成与picker-view的选中框的高度一致

       // item.wxml   
       <view>
           <view>{{year}}年{{month}}月{{day}}日view>
           <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
               <picker-view-column>
                   <view wx:for="{{years}}" style="line-height: 50px">{{item}}年view>
               picker-view-column>
               <picker-view-column>
                   <view wx:for="{{months}}" style="line-height: 50px">{{item}}月view>
               picker-view-column>
               <picker-view-column>
                   <view wx:for="{{days}}" style="line-height: 50px">{{item}}日view>
               picker-view-column>
           picker-view>
       view>
   
       // item.js  
       const date = new Date()
           const years = []
           const months = []
           const days = []
   
           for (let i = 1990; i <= date.getFullYear(); i++) {
           years.push(i)
           }
   
           for (let i = 1 ; i <= 12; i++) {
           months.push(i)
           }
   
           for (let i = 1 ; i <= 31; i++) {
           days.push(i)
           }
   
           Page({
           data: {
               years: years,
               year: date.getFullYear(),
               months: months,
               month: 2,
               days: days,
               day: 2,
               year: date.getFullYear(),
               value: [9999, 1, 1],
           },
           bindChange: function(e) {
               const val = e.detail.value
               this.setData({
               year: this.data.years[val[0]],
               month: this.data.months[val[1]],
               day: this.data.days[val[2]]
               })
           }
       })

8. radio： radio-group单项选择器，内部由多个组成。

   • bindchange(event) — 中的选中项发生变化时触发 change 事件，event.detail = {value: 选中项radio的value}
   • value(string) — 标识。当该 选中时， 的 change 事件会携带的value
   • checked(false)
   • disabled
   • color

       // item.wxml
       "radio-group" bindchange="radioChange">
           "radio" wx:for="{{items}}">
               value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
           
       
   
       // item.js
       Page({
           data: {
               items: [
                   {name: 'USA', value: '美国'},
                   {name: 'CHN', value: '中国', checked: 'true'},
                   {name: 'BRA', value: '巴西'},
                   {name: 'JPN', value: '日本'},
                   {name: 'ENG', value: '英国'},
                   {name: 'TUR', value: '法国'},
               ]
           },
           radioChange: function(e) {
               console.log('radio发生change事件，携带value值为：', e.detail.value)
           }
       })

9. slider:滑动选择器。
   
   • min(0) — 最小值
   • max(100) — 最大值
   • step(1) — 步幅，取值必须大于0且能被max-min整除
   • disabled
   • value(number) — 当前取值
   • color — 背景颜色，推荐使用backgroundColor
   • activeColor(#1aad19) — 以选择的颜色
   • backgroundColor(#e9e9e9) — 背景条的颜色
   • show-value(false) — 是否显示当前 value
   • bindchange(event) — 完成一次拖动后触发的事件，event.detail = {value: value}
10. switch:开关选择器
    
    • checked(false)
    • type(switch) — 样式，有效值：switch, checkbox
    • bindchange(event) — checked 改变时触发 change 事件，event.detail={ value:checked}
    • color — switch 的颜色
11. textarea: 多行输入框
    
    • value — 输入框的内容
    • placeholder
    • placeholder-style
    • placeholder-class
    • disabled
    • maxlength(140) — 输入的最大长度，值为-1时不限制
    • focus(false) — 自动获取焦点
    • bindfocus(event) — 输入框聚焦时触发，event.detail = {value: value}
    • bindblur(event) — 输入框失去焦点时触发，event.detail = {value: value}
    • bindlinechange(event) — 输入框行数变化时调用，event.detail = {height: 0, heightRpx: 0, lineCount: 0}
    • bindinput(eent) — 当键盘输入时，触发 input 事件，event.detail = {value: value}， bindinput 处理函数的返回值并不会反映到 textarea 上
    • bindconfirm(event) — 点击完成时， 触发 confirm 事件，event.detail = {value: value}

导航(navigator： 页面链接)

+ url(string) ---   应用内的跳转链接    
+ open-type(navigate) --- 跳转方式 
    - navigate  对应 wx.navigateTo 的功能    
    - redirect  对应 wx.redirectTo 的功能    
    - switchTab 对应 wx.switchTab 的功能 
    - reLaunch  对应 wx.reLaunch 的功能  
    - navigateBack  对应 wx.navigateBack 的功能 
+ delta(number) --- 当 open-type 为 'navigateBack' 时有效，表示回退的层数    
+ hover-class(navigator-hove) --- 指定点击时的样式类，当hover-class="none"时，没有点击态效果    
+ hover-start-time(50)  
+ hover-stay-time(600)  

媒体组件

1. audio: 音频
   
   • id
   • src
   • loop(false) — 是否循环播放
   • controls(true) — 是否显示默认控件
   • poster(path) — 默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效
   • name(未知音频) — 默认控件上的音频名字，如果 controls 属性值为 false 则设置 name 无效
   • author(未知作者) — 默认控件上的作者名字，如果 controls 属性值为 false 则设置 author 无效
   • binderror(event) — 当发生错误时触发 error 事件，detail = {errMsg: MediaError.code}
   • bindplay(event) — 当开始/继续播放时触发play事件
   • bindpause(event) — 当暂停播放时触发 pause 事件
   • bindtimeupdate(event) — 当播放进度改变时触发 timeupdate 事件，detail = {currentTime, duration}
   • bindended(event) — 当播放到末尾时触发 ended 事件
2. image: 图片
   
   • src
   • mode(‘scaleToFill’) — 图片裁剪、缩放的模式
   • binderror(event) — 当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: ‘something wrong’}
   • bindload(event) — 当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:’图片高度px’, width:’图片宽度px’}
3. video: 视频
   
   • src
   • duration — 规定视频时长
   • controls
   • danmu-list — 弹幕列表
   • danmu-btn(event) — 是否显示弹幕按钮，只在初始化时有效，不能动态变更
   • enable-danmu(false) — 是否展示弹幕，只在初始化时有效，不能动态变更
   • autoplay(false)
   • bindplay(event) — 当开始/继续播放时触发play事件
   • bindpause(event) — 当暂停播放时触发 pause 事件
   • bindended(event) — 当播放到末尾时触发 ended 事件
   • bindtimeupdate
   • objectFit(contain) — 当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖
   • poster
     

video标签认宽度300px、高度225px，设置宽高需要通过wxss设置width和height。

地图、画布、客服会话等下期继续。。。