微信客户端打开网页，自动播放背景音乐，ios&andriod

需求：通过点击微信公众号中的按钮，跳转到一个活动网页，网页自动开始循环播放背景音乐。

环境：uni-app开发，适配iOS&andriod原生app及微信公众号网页。

开发流程：

• 1. 创建背景音乐播放上下文：本文未选择audio标签，而选择音频api，原因请自行对比。
• 2. 加载背景音乐播放地址
• 3. 调用播放

上代码：

<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>