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

wx.getBackgroundAudioManager() 基础库 1.2.0 开始支持，低版本需做兼容处理 获取全局唯一的背景音频管理器backgroundAudioManager backgroundAudioManager backgroundAudioManager 对象的属性列表： 属性 类型 说明 只读 duration Number 当前音频的长度（单位：s），只有在当前有合法的 src 时返回 是 currentTime Number 当前音频的播放位置（单位：s），只有在当前有合法的 src 时返回 是 paused Boolean 当前是是否暂停或停止状态，true 表示暂停或停止，false 表示正在播放 是 src String 音频的数据源，默认为空字符串，当设置了新的 src 时，会自动开始播放 ，目前支持的格式有 m4a, aac, mp3, wav 否 startTime Number 音频开始播放的位置（单位：s） 否 buffered Number 音频缓冲的时间点，仅保证当前播放时间点到此时间点内容已缓冲。 是 title String 音频标题，用于做原生音频播放器音频标题。原生音频播放器中的分享功能，分享出去的卡片标题，也将使用该值。 否 epname String 专辑名，原生音频播放器中的分享功能，分享出去的卡片简介，也将使用该值。 否 singer String 歌手名，原生音频播放器中的分享功能，分享出去的卡片简介，也将使用该值。 否 coverImgUrl String 封面图url，用于做原生音频播放器背景图。原生音频播放器中的分享功能，分享出去的卡片配图及背景也将使用该图。 否 webUrl String 页面链接，原生音频播放器中的分享功能，分享出去的卡片简介，也将使用该值。 否 backgroundAudioManager 对象的方法列表： 方法 参数 说明 play   播放 pause   暂停 stop   停止 seek position 跳转到指定位置，单位 s onCanplay callback 背景音频进入可以播放状态，但不保证后面可以流畅播放 onPlay callback 背景音频播放事件 onPause callback 背景音频暂停事件 onStop callback 背景音频停止事件 onEnded callback 背景音频自然播放结束事件 onTimeUpdate callback 背景音频播放进度更新事件 onPrev callback 用户在系统音乐播放面板点击上一曲事件（iOS only） onNext callback 用户在系统音乐播放面板点击下一曲事件（iOS only） onError callback 背景音频播放错误事件 onWaiting callback 音频加载中事件，当音频因为数据不足，需要停下来加载时会触发 errcode...

Object wx 小程序 API 全局对象，用于承载小程序能力相关 API。 Object wx.env 小程序环境变量对象 String wx.env.USER_DATA_PATH 文件系统中的用户目录路径 console 向调试面板中打印日志。console 是一个全局对象，可以直接访问。在微信客户端中，向 vConsole 中输出日志。 方法： console.debug() 向调试面板中打印 debug 日志 参数 any …args 日志内容，可以有任意多个。 console.error() 向调试面板中打印 error 日志 参数 any …args 日志内容，可以有任意多个。 console.group(string label) 在调试面板中创建一个新的分组。随后输出的内容都会被添加一个缩进，表示该内容属于当前分组。调用 console.groupEnd之后分组结束。 参数 string label 分组标记，可选。 注意 仅在工具中有效，在 vConsole 中为空函数实现。 console.groupEnd() 结束由 console.group 创建的分组 注意 仅在工具中有效，在 vConsole 中为空函数实现。 console.info() 向调试面板中打印 info 日志 参数 any …args 日志内容，可以有任意多个。 console.log() 向调试面板中打印 log 日志 参数 any …args 日志内容，可以有任意多个 console.warn() 向调试面板中打印 warn 日志 参数 any …args 日志内容，可以有任意多个。 number setTimeout(function callback, number delay, any rest) 设定一个定时器。在定时到期以后执行注册的回调函数 参数 function callback 回调函数 number delay 延迟的时间，函数的调用会在该延迟之后发生，单位 ms。 any rest param1, param2, …, paramN 等附加参数，它们会作为参数传递给回调函数。 返回值 number 定时器的编号。这个值可以传递给 clearTimeout 来取消该定时。 clearTimeout(number timeoutID) 取消由 setTimeout 设置的定时器。 参数 number timeoutID 要取消的定时器的 ID number setInterval(function callback, number delay, any rest) 设定一个定时器。按照指定的周期（以毫秒计）来执行注册的回调函数 参数...

其他组件 出于性能考虑，weui-miniprogram 并没有对所有 WeUI 组件进行封装（如：flex布局组件），可以直接使用 WeUI 中定义的组件结构（参考 Demo）。 示例代码 在引入 weui.wxss 后，可以直接使用 weui-wxss 中定义的 class 自定义样式，以 flex 组件为例： <view class="page__hd"> <view class="page__title">Flex</view> <view class="page__desc">Flex布局</view> </view> <view class="page__bd page__bd_spacing"> <view class="weui-flex"> <view class="weui-flex__item"><view class="placeholder">weui</view></view> </view> <view class="weui-flex"> <view class="weui-flex__item"><view class="placeholder">weui</view></view> <view class="weui-flex__item"><view class="placeholder">weui</view></view> </view> <view class="weui-flex"> <view class="weui-flex__item"><view class="placeholder">weui</view></view> <view class="weui-flex__item"><view class="placeholder">weui</view></view> <view class="weui-flex__item"><view class="placeholder">weui</view></view> </view> <view class="weui-flex"> <view class="weui-flex__item"><view class="placeholder">weui</view></view> <view class="weui-flex__item"><view class="placeholder">weui</view></view> <view class="weui-flex__item"><view class="placeholder">weui</view></view> <view class="weui-flex__item"><view class="placeholder">weui</view></view> </view> <view class="weui-flex"> <view><view class="placeholder">weui</view></view> <view class="weui-flex__item"><view class="placeholder">weui</view></view> <view><view class="placeholder">weui</view></view> </view> </view> 渲染到页面上会得到以下结果： 其他组件可以参考库中提供的 Demo

Msg Msg组件提供操作确认页或操作成功或失败的标准的确认页的样式。 示例代码： { "usingComponents": { "mp-msg": "../components/msg/msg" }, "navigationBarTitleText": "UI组件库" } <view class="page"> <mp-msg type="success" title="操作成功"> <view slot="desc">内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现<navigator url="" class="weui-msg__link">文字链接</navigator></view> <view slot="extend"> <view>1. 说明1</view> <view>2. 说明2</view> </view> <view slot="handle"> <button class="weui-btn" type="primary">主要操作</button> <button class="weui-btn" type="default">辅助操作</button> </view> <view slot="footer"> <view class="weui-footer__links"> <navigator url="" class="weui-footer__link">底部链接文本</navigator> </view> <view class="weui-footer__text">Copyright © 2008-2016 weui.io</view> </view> </mp-msg>  </view> 属性列表 属性 类型 默认值 必填 说明 ext-class string 否 添加在组件内部结构的class，可用于修改组件内部的样式 type string 否 顶部图标的样式，和icon组件的type属性用法一样 size number 64 否 type不为空的时候有效，和icon组件的size属性用法一样 icon string 否 type为空的时候，icon的值是顶部图标的路径 title string 否 标题 desc string 否 描述内容，和desc的slot显示在相同的位置 Slot 名称 描述 desc 描述内容slot extend desc下面的说明区域的slot handle 操作按钮区域slot footer 底部slot

Cells Cells是列表分组，常用于嵌套一组Cell或者Checkbox，注意，Checkbox-group和Cell组件都必须放在Cells组件下面，Cells效果如下图所示。 引入组件 在 page.json 中引入组件 { "usingComponents": { "mp-cell": "../../components/cell/cell", "mp-cells": "../../components/cells/cells" } } 示例代码 <!--WXML示例代码--> <mp-cells ext-class="my-cells" title="带说明的列表项"> <mp-cell value="标题文字" footer="说明文字"></mp-cell> <mp-cell> <view>标题文字（使用slot）</view> <view slot="footer">说明文字</view> </mp-cell> </mp-cells> // page.js示例代码 Page({ }); 属性列表 属性 类型 默认值 必填 说明 ext-class string 否 添加在组件内部结构的class，可用于修改组件内部的样式 title string 否 Cells的标题 footer string 否 Cells底部的文字 Slot 名称 描述 默认 内容slot

FormPage 表单页面，规定了标准表单的顶部的标题和底部的按钮提示等区域的规范 代码引入 在 page.json 中引入组件 { "usingComponents": { "mp-form-page": "../../components/form-page/form-page", "mp-form": "../../components/form/form" } } 示例代码 <!--WXML示例代码--> <mp-form-page title="表单结构" subtitle="展示表单页面的信息结构样式, 分别由头部区域/控件区域/提示区域/操作区域和底部信息区域组成。"> <mp-form id="form" rules="{{rules}}" models="{{formData}}"> </mp-form> <checkbox-group slot="tips" bindchange="bindAgreeChange"> <label class="weui-agree" for="weuiAgree"> <view class="weui-agree__text"> <checkbox class="weui-agree__checkbox" id="weuiAgree" value="agree" checked="{{isAgree}}" /> <view class="weui-agree__checkbox-icon"> <icon class="weui-agree__checkbox-icon-check" type="success_no_circle" size="9" wx:if="{{isAgree}}"></icon> </view> 阅读并同意<navigator url="" class="weui-agree__link">《相关条款》</navigator> </view> </label> </checkbox-group> <view slot="button"> <button class="weui-btn" type="primary" bindtap="submitForm">确定</button> </view> </mp-form-page> 效果展示 属性列表 属性 类型 默认值 必填 说明 title string 否 标题 subtitle boolean 否 副标题 Slot 名称 描述 title 标题区域slot和title属性互斥 tips 底部确认按钮前面的提示区域 button 底部提交按钮区域 suffixtips 提交按钮下面的提示区域 footer 页脚的内容区域

Badge徽章 出现在按钮、图标附近的数字或者状态标记。 示例代码： { "usingComponents": { "mp-cells": "../components/cells/cells", "mp-cell": "../components/cell/cell", "mp-badge": "../components/badge/badge" } } Gallery画廊 用于多张图片展示，类似原生的wx.previewImage的展示。 示例代码： { "usingComponents": { "mp-gallery": "../components/gallery/gallery" } } Loading加载 加载数据时的 loading 效果 示例代码： { "usingComponents": { "mp-loading": "../components/loading/loading" }, "navigationBarTitleText": "UI组件库" } Icon 图标 代码引入 在 page.json 中引入组件 { "usingComponents": { "mp-icon": "../../components/icon/icon" } } 示例代码 <!--WXML示例代码--> <mp-icon type="field" icon="add" color="black" size="{{25}}"></mp-icon> <mp-icon icon="add" color="black" size="{{25}}"></mp-icon> 效果展示 属性列表 属性 类型 默认值 说明 extClass string 组件类名 type string outline Icon类型，可选值 outline（描边），field（填充） icon string Icon名字 size number 20 Icon的大小，单位 px color string black Icon的颜色，默认黑色 Icon 列表  

vtabs 纵向选项卡组件，需与 <vtabs-content> 组件结合使用。 属性列表 属性 类型 默认值 必填 说明 vtabs Array [] 是 数据项格式为 {title} active-tab Number 0 否 激活 tab 索引 tab-bar-class String 否 选项卡样式 active-class String 否 选中项样式 tab-line-color String #ff0000 否 选中项侧划线颜色 tab-inactive-text-color String #000000 否 未选中项字体颜色 tab-active-text-color String #ff0000 否 选中项字体颜色 tab-inactive-bg-color String #eeeeee 否 未选中项背景色 tab-active-bg-color String #ffffff 否 选中项背景色 animation Boolean true 否 是否开启动画 bindtabclick eventhandle 否 点击 tab 时触发，e.detail={index} bindchange eventhandle 否 内容区域滚动导致 tab 变化时触发, e.detail={index} vtabs-content 纵向选项卡内容。 属性 类型 默认值 必填 说明 tab-index Number 0 是 vtabs 数据索引（从0开始）

row/col 组件 按照栅格化布局思路，再加上响应式布局的特性，提供了 row/col 两个基础布局组件，用来帮助开发者快速适配多屏应用。 核心概念是将整个屏幕宽度分为 24 单位，每个单位的大小，由当前屏幕尺寸决定的。例如 375px 的屏幕宽度，那么 1 unit = 375/24 px. 使用方法 npm 安装 npm i @miniprogram-component-plus/col --save npm i @miniprogram-component-plus/row --save 开发者工具构建 npm，勾选“使用 npm 模块”，参考 npm 支持 页面 json 文件中加入 usingComponents 字段 { "usingComponents": { "mp-col": "@miniprogram-component-plus/col", "mp-row": "@miniprogram-component-plus/row" } } 在页面中使用组件 <view class="page__desc">三列均分布局</view> <view> <mp-row> <mp-col span="{{8}}"> <view> <view class="col"> </view> </view> </mp-col> <mp-col span="{{8}}"> <view> <view class="col"> </view> </view> </mp-col> <mp-col span="{{8}}"> <view> <view class="col"> </view> </view> </mp-col> </mp-row> </view> row 组件属性 默认无 col 组件属性 属性 类型 默认值 必填 说明 span number 24 否 当前 col 所占屏幕宽度的份数 offset number 0 否 距 row 左侧偏移margin 距离 push number 0 否 距左侧偏移的单位距离 pull number 0 否 距右侧偏移的单位距离 xs number, Object<span,offset, push, pull> 否 当屏幕 < 768px 时，对应显示的网格规则。例如 xs="2" 或 xs="{ "span":...

video-swiper 视频滑动切换组件，可实现类似微视无限视频列表效果。 使用说明 video-list 的长度应当不低于 3 个，当滚动到首项或者尾项后，会进入循环。通过 setData 更改 video-list，会直接追加到之前的视频源中。可监听 bindchange 事件获取当前滚动到那一个视频，activeId 为视频源的唯一 id。 属性列表 属性 类型 默认值 必填 说明 duration number 500 否 滑动动画时长 easing-function string default 否 切换缓动动画类型 loop boolean true 否 是否循环播放 video-list Array VideoSwiperItem [] true 视频源 bindchange eventhandle 否 滑动切换完成时触发, e.detail={activeId} bindplay eventhandle 否 开始/继续播放时触发, e.detail={activeId} bindpause eventhandle 否 暂停播放时触发, e.detail={activeId} bindended eventhandle 否 播放到末尾时触发, e.detail={activeId} bindtimeupdate eventhandle 否 播放进度变化时触发，event.detail = {currentTime, duration, activeId} bindwaiting eventhandle 否 视频出现缓冲时触发, e.detail={activeId} binderror eventhandle 否 视频播放出错时触发, e.detail={activeId} bindprogress eventhandle 否 加载进度变化时触发，只支持一段加载。event.detail={buffered, activeId} bindloadedmetadata eventhandle 否 视频元数据加载完成时触发。event.detail={width, height, duration, activeId} VideoSwiperItem 属性列表 属性 说明 id 每个视频源的唯一 id url 视频播放地址 objectFit 当视频大小与 video 容器大小不一致时，视频的表现形式 objectFit 的合法值 属性 说明 contain 包含 fill 填充 cover 覆盖 easing-function 的合法值 属性 说明 default 默认缓动函数...