问题描述:
在 web-view
的 src 中,引入了一个 HTML5 页面,这个页面有个自动播放的音频。
在小程序中,点击右上角关闭小程序后,web-view
页面中的音频依然会播放。
期待现象
期待关闭小程序之后,音频也停止。
通过查找文档,发现没有直接提供方法,网上找了一圈之后,尝试的方案也都无法实现。
所以我这里想到的思路是,当用户关闭小程序时,应该销毁掉web-view
。可惜,目前没有这个接口。
所以我就利用了模拟的方式来实现,当前小程序页面 onHide
时,就将 web-view
的页面 src
属性清空。
后来经过测试发现,在 ios
平台下,需要制定一个 url,在 android
平台下只需要清空。另外为了防止造成缓存,给 url
后面添加了一个随机的参数。
以下是代码片段。
<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>