微信小程序开发文档 第31页

audio 音频。 属性名 类型 默认值 说明 id String   audio 组件的唯一标识符 src String   要播放音频的资源地址 loop Boolean false 是否循环播放 controls Boolean true 是否显示默认控件 poster String   默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效 name String 未知音频 默认控件上的音频名字，如果 controls 属性值为 false 则设置 name 无效 author String 未知作者 默认控件上的作者名字，如果 controls 属性值为 false 则设置 author 无效 binderror EventHandle   当发生错误时触发 error 事件，detail = {errMsg: MediaError.code} bindplay EventHandle   当开始/继续播放时触发play事件 bindpause EventHandle   当暂停播放时触发 pause 事件 bindtimeupdate EventHandle   当播放进度改变时触发 timeupdate 事件，detail = {currentTime, duration} bindended EventHandle   当播放到末尾时触发 ended 事件 MediaError.code 返回错误码 描述 MEDIA_ERR_ABORTED 获取资源被用户禁止 MEDIA_ERR_NETWORD 网络错误 MEDIA_ERR_DECODE 解码错误 MEDIA_ERR_SRC_NOT_SUPPOERTED 不合适资源 示例代码： <!-- audio.wxml --> <audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop></audio> <button type="primary" bindtap="audioPlay">播放</button> <button type="primary" bindtap="audioPause">暂停</button> <button type="primary" bindtap="audio14">设置当前播放时间为14秒</button> <button...

functional-page-navigator 基础库 2.9.0 开始支持，低版本需做兼容处理。 页面导航条配置节点，用于指定导航栏的一些属性。只能是 page-meta 组件内的第一个节点，需要配合它一同使用。 通过这个节点可以获得类似于调用 wx.setNavigationBarTitle wx.setNavigationBarColor 等接口调用的效果。 属性 类型 默认值 必填 说明 最低版本 title string 否 导航条标题 2.9.0 loading boolean false 否 是否在导航条显示 loading 加载提示 2.9.0 front-color string 否 导航条前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000 2.9.0 background-color string 否 导航条背景颜色值，有效值为十六进制颜色 2.9.0 color-animation-duration number 0 否 改变导航栏颜色时的动画时长，默认为 0 （即没有动画效果） 2.9.0 color-animation-timing-func number “linear” 否 改变导航栏颜色时的动画方式，支持 linear 、 easeIn 、 easeOut 和 easeInOut 2.9.0 示例代码 <page-meta> <navigation-bar title="{{nbTitle}}" loading="{{nbLoading}}" front-color="{{nbFrontColor}}" background-color="{{nbBackgroundColor}}" color-animation-duration="2000" color-animation-timing-func="easeIn" /> </page-meta> Page({ data: { nbFrontColor: '#000000', nbBackgroundColor: '#ffffff', }, onLoad() { this.setData({ nbTitle: '新标题', nbLoading: true, nbFrontColor: '#ffffff', nbBackgroundColor: '#000000', }) } })

navigator 基础库 1.0.0 开始支持，低版本需做兼容处理。 页面链接。 属性名 类型 默认值 说明 target String self 在哪个目标上发生跳转，默认当前小程序，可选值self/miniProgram url String   应用内的跳转链接 open-type String navigate 跳转方式 delta Number   当 open-type 为 ‘navigateBack’ 时有效，表示回退的层数 app-id String   当target=”miniProgram”时有效，要打开的小程序 appId path String   当target=”miniProgram”时有效，打开的页面路径，如果为空则打开首页 extra-data Object   当target=”miniProgram”时有效，需要传递给目标小程序的数据，目标小程序可在 App.onLaunch() ，App.onShow()  中获取到这份数据。 version version release 当target=”miniProgram”时有效，要打开的小程序版本，有效值 develop（开发版），trial（体验版），release（正式版），仅在当前小程序为开发版或体验版时此参数有效；如果当前小程序是正式版，则打开的小程序必定是正式版。 hover-class String navigator-hover 指定点击时的样式类，当hover-class="none"时，没有点击态效果 hover-stop-propagation Boolean false 指定是否阻止本节点的祖先节点出现点击态 hover-start-time Number 50 按住后多久出现点击态，单位毫秒 hover-stay-time Number 600 手指松开后点击态保留时间，单位毫秒 bindsuccess String 当target=”miniProgram”时有效，跳转小程序成功 bindfail String 当target=”miniProgram”时有效，跳转小程序失败 bindcomplete String 当target=”miniProgram”时有效，跳转小程序完成 open-type 有效值： 值 说明 最低版本 navigate 对应wx.navigateTo的功能   redirect 对应wx.redirectTo的功能   switchTab 对应wx.switchTab的功能   reLaunch 对应wx.reLaunch的功能 1.1.0 navigateBack 对应wx.navigateBack的功能 1.1.0 exit 退出小程序，target=”miniProgram”时生效 2.1.0 注：navigator-hover默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, <navigator/>的子节点背景色应为透明色 示例代码： /** wxss **/ /** 修改默认的navigator点击态 **/ .navigator-hover { color:blue; } /** 自定义其他点击态样式类 **/ .other-navigator-hover...

editor 基础库 2.7.0 开始支持，低版本需做兼容处理。 富文本编辑器，可以对图片、文字进行编辑。 编辑器导出内容支持带标签的 html和纯文本的 text，编辑器内部采用 delta 格式进行存储。 通过setContents接口设置内容时，解析插入的 html 可能会由于一些非法标签导致解析错误，建议开发者在小程序内使用时通过 delta 进行插入。 富文本组件内部引入了一些基本的样式使得内容可以正确的展示，开发时可以进行覆盖。需要注意的是，在其它组件或环境中使用富文本组件导出的html时，需要额外引入 这段样式，并维护<ql-container><ql-editor></ql-editor></ql-container>的结构。 图片控件仅初始化时设置有效。 相关 api：EditorContext 属性 类型 默认值 必填 说明 最低版本 read-only boolean false 否 设置编辑器为只读 2.7.0 placeholder string 否 提示信息 2.7.0 show-img-size boolean false 否 点击图片时显示图片大小控件 2.7.0 show-img-toolbar boolean false 否 点击图片时显示工具栏控件 2.7.0 show-img-resize boolean false 否 点击图片时显示修改尺寸控件 2.7.0 bindready eventhandle 否 编辑器初始化完成时触发 2.7.0 bindfocus eventhandle 否 编辑器聚焦时触发，event.detail = {html, text, delta} 2.7.0 bindblur eventhandle 否 编辑器失去焦点时触发，detail = {html, text, delta} 2.7.0 bindinput eventhandle 否 编辑器内容改变时触发，detail = {html, text, delta} 2.7.0 bindstatuschange eventhandle 否 通过 Context 方法改变编辑器内样式时触发，返回选区已设置的样式 2.7.0 编辑器内支持部分 HTML 标签和内联样式，不支持class和id 支持的标签 不满足的标签会被忽略，<div>会被转行为<p>储存。 类型 节点 行内元素 <span> <strong> <b> <ins> <em> <i> <u> <a> <del> <s> <sub> <sup> <img> 块级元素 <p> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <ol> <ul> <li>...

switch 开关选择器。 属性名 类型 默认值 说明 checked Boolean false 是否选中 disabled Boolean false 是否禁用 type String switch 样式，有效值：switch, checkbox bindchange EventHandle   checked 改变时触发change事件，event.detail={ value} color String  #04BE02 switch的颜色，同css的color <view class="body-view"> <switch checked bindchange="switch1Change"/> <switch bindchange="switch2Change"/> </view> page({ switch1Checked: function (e){ console.log('switch1 发生 change 事件，携带值为', e.detail.value) }, switch2Change: function (e){ console.log('switch2 发生 change 事件，携带值为', e.detail.value) } })

slider 滑动选择器。 属性名 类型 默认值 说明 最低版本 min Number 0 最小值 max Number 100 最大值 step Number 1 步长，取值必须大于 0，并且可被(max – min)整除 disabled Boolean false 是否禁用 value Number 0 当前取值 color Color #e9e9e9 背景条的颜色（请使用 backgroundColor） selected-color Color #1aad19 已选择的颜色（请使用 activeColor） activeColor Color #1aad19 已选择的颜色 backgroundColor Color #e9e9e9 背景条的颜色 show-value Boolean false 是否显示当前 value bindchange EventHandle 完成一次拖动后触发的事件，event.detail = {value: value} bindchanging EventHandle 拖动过程中触发的事件，event.detail = {value: value} 1.7.0 示例代码： <view class="section section_gap"> <text class="section__title">设置left/right icon</text> <view class="body-view"> <slider bindchange="slider1change" left-icon="cancel" right-icon="success_no_circle"/> </view> </view> <view class="section section_gap"> <text class="section__title">设置step</text> <view class="body-view"> <slider bindchange="slider2change" step="5"/> </view> </view> <view class="section section_gap"> <text class="section__title">显示当前value</text> <view class="body-view"> <slider bindchange="slider3change" show-value/> </view> </view> <view class="section section_gap"> <text class="section__title">设置最小/最大值</text> <view class="body-view"> <slider bindchange="slider4change" min="50" max="200" show-value/> </view> </view> var...

微信小程序单选框radio radio-group 单项选择器，内部由多个<radio/>组成。 属性名 类型 默认值 说明 bindchange EventHandle   <radio-group/>中的选中项发生变化时触发change事件，event.detail = {value: 选中项radio的value} radio ​ 单选项目 属性名 类型 默认值 说明 value String   <radio/>标识。当该<radio/>选中时，<radio-group/> 的change 事件会携带<radio/>的value checked Boolean false 当前是否选中 disabled Boolean false 是否禁用 color Color   radio的颜色，同css的color <radio-group class="radio-group" bindchange="radioChange"> <label class="radio" wx:for="{{items}}"> <radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}} </label> </radio-group> 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) } })

picker-view 嵌入页面的滚动选择器 属性名 类型 说明 最低版本 value NumberArray 数组中的数字依次表示 picker-view 内的 picker-view-colume 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。   indicator-style String 设置选择器中间选中框的样式   indicator-class String 设置选择器中间选中框的类名 1.1.0 bindchange EventHandle 当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）   注意：其中只可放置<picker-view-column/>组件，其他节点不会显示。 picker-view-column 仅可放置于<picker-view />中，其孩子节点的高度会自动设置成与picker-view的选中框的高度一致。 示例代码： <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> 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) }...

基础库 1.0.0 开始支持，低版本需做兼容处理。 从底部弹起的滚动选择器。 属性 类型 默认值 必填 说明 最低版本 header-text string 否 选择器的标题，仅安卓可用 2.11.0 mode string selector 否 选择器类型 1.0.0 disabled boolean false 否 是否禁用 1.0.0 bindcancel eventhandle 否 取消选择时触发 1.9.90 mode 的合法值 值 说明 最低版本 selector 普通选择器 multiSelector 多列选择器 time 时间选择器 date 日期选择器 region 省市区选择器 除了上述通用的属性，对于不同的mode，picker拥有不同的属性。 普通选择器：mode = selector 属性名 类型 默认值 说明 最低版本 range array/object array [] mode 为 selector 或 multiSelector 时，range 有效 range-key string 当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 value number 0 表示选择了 range 中的第几个（下标从 0 开始） bindchange eventhandle value 改变时触发 change 事件，event.detail = {value} 多列选择器：mode = multiSelector 属性名 类型 默认值 说明 最低版本 range array/object array [] mode 为 selector 或 multiSelector 时，range 有效 range-key string 当 range...

label 用来改进表单组件的可用性，使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。 for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。 目前可以绑定的控件有：<button/>, <checkbox/>, <radio/>, <switch/>。 属性名 类型 说明 for String 绑定控件的id 示例代码： <view class="section section_gap"> <view class="section__title">表单组件在label内</view> <checkbox-group class="group" bindchange="checkboxChange"> <view class="label-1" wx:for-items="{{checkboxItems}}"> <label> <checkbox hidden value="{{item.name}}" checked="{{item.checked}}"></checkbox> <view class="label-1__icon"> <view class="label-1__icon-checked" style="opacity:{{item.checked ? 1: 0}}"></view> </view> <text class="label-1__text">{{item.value}}</text> </label> </view> </checkbox-group> </view> <view class="section section_gap"> <view class="section__title">label用for标识表单组件</view> <radio-group class="group" bindchange="radioChange"> <view class="label-2" wx:for-items="{{radioItems}}"> <radio id="{{item.name}}" hidden value="{{item.name}}" checked="{{item.checked}}"></radio> <view class="label-2__icon"> <view class="label-2__icon-checked" style="opacity:{{item.checked ? 1: 0}}"></view> </view> <label class="label-2__text" for="{{item.name}}"><text>{{item.name}}</text></label> </view> </radio-group> </view> Page({ data: { checkboxItems: [ {name: 'USA', value: '美国'}, {name: 'CHN', value: '中国', checked: 'true'}, {name: 'BRA', value: '巴西'}, {name: 'JPN', value: '日本', checked: 'true'}, {name: 'ENG', value: '英国'}, {name: 'TUR', value: '法国'}, ], radioItems: [ {name: 'USA', value: '美国'}, {name: 'CHN', value: '中国',...