小程序web-view关闭后,页面音频没有关闭攻略教程_小程序指南教程

问题描述:在web-view的src中,引入了一个HTML5页面,这个页面有个自动播放的音频。在小程序中,点击右上角关闭小程序后,web-view页面中的音频依然会播放。期待现象期待关闭小程序之后,音频也停止。通过查找文档,发现没有直接提供方法,网上找了一圈之后,尝试的方案也都无法实现。所以我这里想到的思路是,当用户关闭小程序时,应该销毁掉web-view。

小程序web-view关闭后,页面音频没有关闭攻略教程

问题描述:

在web-view的src中,引入了一个HTML5页面,这个页面有个自动播放的音频。在小程序中,点击右上角关闭小程序后,web-view页面中的音频依然会播放。

小程序web-view关闭后,页面音频没有关闭攻略教程_小程序指南教程

期待现象

期待关闭小程序之后,音频也停止。通过查找文档,发现没有直接提供方法,网上找了一圈之后,尝试的方案也都无法实现。

所以我这里想到的思路是,当用户关闭小程序时,应该销毁掉web-view。可惜,目前没有这个接口。

所以我就利用了模拟的方式来实现,当前小程序页面onHide时,就将web-view的页面src属性清空。后来经过测试发现,在ios平台下,需要制定一个url,在android平台下只需要清空。另外为了防止造成缓存,给url后面添加了一个随机的参数。

以下是代码片段。

<span type="button" data-toggle="tooltip" data-placement="top" data-clipboard-text="

export default {
data() {
return {
webUrl: ‘https://demo.com/weixin/index.html’
}
},
onLoad() {
},
onHide(){
// webview关闭后,刷新url。否则会造成音乐在后台继续播放的bug
if (uni.getSystemInfoSync().platform == "ios") {
this.webUrl = ‘https://demo.com/weixin/index.html?redirect=true’;
}else{
// android系统下只能给空值
this.webUrl = ‘;’
}
},
onBackPress(){
},
methods: {

}
}

” title=”” data-original-title=”复制”>

<template>
    <view>
         <web-view :src="webUrl"></web-view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                webUrl: 'https://demo.com/weixin/index.html'
            }
        },
        onLoad() {
        },
        onHide(){
            // webview关闭后,刷新url。否则会造成音乐在后台继续播放的bug
            if (uni.getSystemInfoSync().platform == "ios") {
                this.webUrl = 'https://demo.com/weixin/index.html?redirect=true';
            }else{
                // android系统下只能给空值
                this.webUrl = ';'
            }
        },
        onBackPress(){
        },
        methods: {
            
        }
    }
</script>

<style>
</style>
海计划公众号
(0)
上一篇 2020/03/30 07:15
下一篇 2020/03/30 07:15

您可能感兴趣的内容