好久没有做小程序，今天看到一个需求，要做一个页面，需要带背景音乐。我看了官方文档，觉得这方面写的很好，但是没有示例，所以就想写一篇相关文章记录一下，也可以帮到其他人。
需求分析
实现一个带有背景音乐的界面，进入页面音乐会自动播放，当然，以为可以控制音乐的开始，暂停。
用到的知识
- 小程序背景音乐接口
- css动画
效果图
实现
wxml
<view class='music {{on? "on": ""}}'><image src='../../images/music.png' style='width: 60rpx;height: 60rpx;' bindtap='stop'></image>
</view>
js
Page({data: {imgUrls: ['../../images/20190121204431.png','../../images/20190121204408.png','../../images/20190121204435.png','../../images/20190121204440.png'],image: '../../images/ewm.png',on: true // 控制音乐的状态，以及图标是否旋转},// 放在onReady函数中，使在进入页面后，音乐就自动开始onReady () {// 获取BackgroundAudioManager 实例this.back = wx.getBackgroundAudioManager() // 对实例进行设置this.back.src = "http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46"this.back.title = 'Tassel' // 标题为必选项this.back.play() // 开始播放},// 已经有好心人帮忙给出了修改，在下面给出stop() { // 点击音乐图标后出发的操作this.setData({on: !this.data.on})if (this.data.on) { // 这里有点不明白，如果不重新加链接，音乐不会播放； 希望知道的人能分享告诉我this.back.src = "http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46"this.back.title = 'Tassel'this.back.play()} else {this.back.stop()}}
})// 修改后代, 感谢hope xustop() { this.back.pause(); // 点击音乐图标后出发的操作this.setData({ on: !this.data.on })if (this.data.on) { this.back.play() }else{this.back.pause()}}css的主要代码
.music{display: inline-block;width: 60rpx;height: 60rpx;position: fixed;top: 40rpx;right: 40rpx;z-index: 9999;
}.on{animation:rotating 2.5s linear infinite;
} // css动画，控制图标一直旋转@keyframes rotating{
from{transform:rotate(0)}
to{transform:rotate(360deg)}
}
到这里，小程序背景音乐的功能就实现了，希望能对大家产生一定帮助。
