在安卓机子里面打开微信内网页时将无法自动播放音频。必须在得到用户手动允许(比如触摸屏幕,单击按钮等)的情况下,才能播放音频。基于这样的限制,我们可以针对性进行处理,让页面看起来像是可以自动播放的,基本的做法如下。
一、在页面上全局绑定点击事件。
只要用户随便点击页面,就触发音频播放
<!-- 页面最外层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()
}
})
}
},
网友评论