需求：通过点击微信公众号中的按钮，跳转到一个活动网页，网页自动开始循环播放背景音乐。
环境：uni-app开发，适配iOS&andriod原生app及微信公众号网页。
开发流程：
上代码：
<script>
export default {
data: function() {
return {
music: null, // 背景音乐路径
audioplayer: uni.createInnerAudioContext(), // 播放器上下文innerAudioContext
isplaying: false // 标记播放状态，用来启动&暂停播放动画
}
},
onLoad({id}) {
// 处理音频播放上下文参数
this.audioplayer.autoplay = true
this.audioplayer.loop = true
this.audioplayer.onPlay(()=>{
this.isplaying = true
})
this.audioplayer.onPause(()=>{
this.isplaying = false
})
// 由于我们的活动是自由选择背景音乐，所以需要根据id获取背景音乐地址
this.loadMusic(id).then(music=>{
// 播放音乐，如果为app，直接调用播放即可
// #ifdef APP-PLUS
this.playMusic(music)
// #endif
// #ifdef H5
// 公众号开发，注入微信权限，或调用分享接口(此处内容请自行封装)
/*
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
appId: appid, // 必填，公众号的唯一标识
timestamp: timestamp, // 必填，生成签名的时间戳
nonceStr: noncestr, // 必填，生成签名的随机串
signature: sign, // 必填，签名
jsApiList:['updateAppMessageShareData','updateTimelineShareData'] // 必填，需要使用的JS接口列表，开发文档上有所有接口名称，根据需要自行选用。
});
wx.ready(function() {
this.playMusic(music)
});
*/
// 由于我们使用uni-app开发，统一在入口app.vue中转接到入口页面，在入口页面注入权限，已执行wx.ready()，重复注入不符合设计规范。
// 所以，我们在此页面中，调用了分享设置接口，在完成设置后执行播放。
// 以下两种方式都可以播放。
wx.updateAppMessageShareData({
title: title,
desc: desc,
link:link,
imgUrl: imgUrl,
success: ()=>{
this.playMusic(music)
}
})
wx.updateTimelineShareData({
title: title,
desc: desc,
link:link,
imgUrl: imgUrl,
success: ()=>{
this.playMusic(music)
}
})
// #endif
})
},
methods: {
playMusic(music) {
// 由于部分活动不需要配置背景音乐，music有可能为空
if (music) {
this.audioplayer.src = music
this.audioplayer.play()
}else {
this.audioplayer.destory()
this.audioplayer = null
}
},
loadMusic(id) {
// 此处执行网络请求后返回music
let music;
return new Promise(function(resolve, reject) {
...
resolve(music)
})
}
}
}
</script>
