美文网首页
uniapp里面处理Android微信内网页音频不能自动播放的问

uniapp里面处理Android微信内网页音频不能自动播放的问

作者: 周星星的学习笔记 | 来源:发表于2022-03-24 13:46 被阅读0次

在安卓机子里面打开微信内网页时将无法自动播放音频。必须在得到用户手动允许(比如触摸屏幕,单击按钮等)的情况下,才能播放音频。基于这样的限制,我们可以针对性进行处理,让页面看起来像是可以自动播放的,基本的做法如下。

一、在页面上全局绑定点击事件。

只要用户随便点击页面,就触发音频播放

<!-- 页面最外层view -->
<view
    class="page-wrap"
    @click="playBgMusic"
  >
...
</view>
export default {
  data() {
    return {
        //标记是否触发了播放背景音乐
        isStartPlayBgMusic: false,
        ...
    }
  },
  methods: {
    //播放背景音乐
    playBgMusic() {
      //判断当前背景音乐有没有正在播放中
      if (this.isStartPlayBgMusic) {
        return
      }
      //播放音乐(自己封装的播放音频方法)
      this.$refs.musicBtn.playAudio()
      this.isStartPlayBgMusic = true
    },
     ...
  }
}

一、iOS微信内音频播放是可以自动播放的,与安卓处理方式进行区分

1. onLoad里面进行处理

onLoad(args) {
    ...
    //如果是微信浏览器环境下(分享配置初始化)
    this.$sys.initWeixinShareConfig(
      {
        title: this.shareInfo.title || this.activityDetail.title,
        desc: this.shareInfo.brief || this.activityDetail.brief,
        linkUrl: this.shareInfo.link_url || '',
        imageUrl: this.shareInfo.indexpic
          ? getImageUrl(this.shareInfo.indexpic, 100, 100)
          : getImageUrl(this.activityDetail.indexpic, 100, 100)
      },
      () => {
        //回调里面判断是否是ios机型
        const system = uni.getSystemInfoSync()
        if (system.platform == 'ios') {
           //如果是ios机型可以直接播放音乐,无需用户手动点击页面触发
          this.playBgMusic()
        }
      }
    )
    ...
}

2. 微信分享配置初始化公共方法

  async initWeixinShareConfig(options = {}, func = null) {
    if (!checkIsWechatBrowser()) {
      return
    }
    //当前的页面链接
    let linkUrl = window.location.href.split('#')[0]
    //获取配置信息
    const res = await APP.$api.getwxjsConfig({
      url: encodeURIComponent(linkUrl)
    })
    if (res) {
      //配置
      jweixin.config({
        debug: res.debug ? true : false,
        appId: res.appId,
        timestamp: res.timestamp,
        nonceStr: res.nonceStr,
        signature: res.signature,
        jsApiList: res.jsApiList
      })
      //分享
      jweixin.ready(() => {
        //配置分享数据
        let shareData = {
          title: options.title || '',
          desc: options.desc || '',
          link: options.linkUrl || linkUrl,
          imgUrl: options.imageUrl || '',
          success(response) {}
        }
        //分享给朋友接口
        jweixin.updateAppMessageShareData(shareData)
        //分享到朋友圈接口
        jweixin.updateTimelineShareData(shareData)
        //需不需要回调
        if (func) {
          func()
        }
      })
    }
  },

相关文章

网友评论

      本文标题:uniapp里面处理Android微信内网页音频不能自动播放的问

      本文链接:https://www.haomeiwen.com/subject/lqwkjrtx.html