小程序添加背景音乐，避开了深坑，记录实现方法

例如：https://域名/文件名.mp3

注意：为了防止切换页面，歌曲重头播放。

将这段代码写在App.vue

onShow: function() {
	//关键代码
	wx.playBackgroundAudio({
		dataUrl: '音乐文件地址',
		title: '歌曲名称',
		coverImgUrl: '封面图'
	})
}

1.切换的图片view

<image @tap="playMusic" v-if="isPlay" src="/static/music_on.png"></image>
<image @tap="playMusic" v-if="!isPlay" src="/static/music_off.png"></image>

注意：

playMusic为点击的事件
isPlay判断是否是播放状态，修改当前的图片，声明在data中

2.事件介绍

playMusic () {
	if (this.isPlay) {
		wx.pauseBackgroundAudio()//暂停
	} else {
		wx.playBackgroundAudio({
			dataUrl: '音乐文件地址',
		});//播放
	}
	// 修改播放状态，用于切换图片
	this.isPlay = !this.isPlay
}

3.在当前页面检测歌曲的播放状态，用于改变播放的图片

var that = this
wx.getBackgroundAudioPlayerState({
	success (res) {
		if(res.status === 1){
			that.isPlay = true
		}else{
			that.isPlay = false
		}
	}
})