文章目录
- 前情提要
-
- BackgroundAudioManager
- API：wx.setNavigationBarTitle()
- 搭建静态资源服务器
- 小程序项目
-
- app.json
- app.wxss
- pages/music/music.json
- pages/music/music.wxml
- pages/music/music.wxss
- pages/music/music.js
- 相关链接
前情提要
BackgroundAudioManager
BackgroundAudioManager，是全局唯一的背景音频管理器。小程序切入后台，如果音频处于播放状态，可以继续播放。但是后台状态不能通过调用API操纵音频的播放状态。
从微信客户端6.7.2版本开始，如果需要小程序切后台后继续播放音频，需要在全局配置文件 app.json 中配置 requiredBackgroundModes 属性，如："requiredBackgroundModes": ["audio"]。
BackgroundAudioManager实例，可以通过 wx.getBackgroundAudioManager() 获取。BackgroundAudioManager实例具有如下属性和方法：
title，音频标题，必填。src，音频的数据源，默认值是空字符串，非必填。但是，只有设置了src时，音频才会自动播放。play()，播放音乐。pause()，暂停音乐。onPlay(function callback)，监听背景音频播放事件。onPause(function callback)，监听背景音频暂停事件。onStop(function callback)，监听背景音频停止事件。onEnded(function callback)，监听背景音频自然播放结束事件。
API：wx.setNavigationBarTitle()
wx.setNavigationBarTitle(Object object)，用来动态设置当前页面导航栏的标题。该API接收一个对象作为参数，该对象包含如下属性：
title，标题文本，必填。success，接口调用成功后的回调fail，接口调用失败后的回调。complete，接口调用完成（不论成功or失败）后的回调。
搭建静态资源服务器
- 全局安装serve：
npm install -g serve - 在任何你想的地方新建文件夹：
resources。resources下新建文件夹：images，用于存放静态图片资源；resources下新建文件夹：videos，用于存放视频文件；resources下新建文件夹：audios，用于存放音频文件。 - 启动服务器：
serve resources。
小程序项目
代码涉及的主要文件有：
- app.json
- app.wxss
- pages/music/music.json
- pages/music/music.wxml
- pages/music/music.wxss
- pages/music/music.js
app.json
{
"pages": [
"pages/music/music",
"pages/index/index"
],
"window": {
"navigationBarBackgroundColor": "#0149af",
"navigationBarTitleText": "首页",
"navigationBarTextStyle": "white"
},
"requiredBackgroundModes": ["audio"],
"style": "v2",
"sitemapLocation": "sitemap.json"
}
app.wxss
page{
height: 100%;
}
pages/music/music.json
{
"usingComponents": {
},
"navigationBarBackgroundColor": "#2f434e",
"navigationBarTitleText": "我的音乐"
}
pages/music/music.wxml
<view class="music-container">
<view class="music-name">{
{music.name}}</view>
<view class="music-author">{
{music.author}}</view发布者：admin，转转请注明出处：http://www.yc00.com/web/1754990263a5224573.html
评论列表（0条）