Problem Description:
In web-viewthe src, the introduction of an HTML5 page that has a autoplay audio.
In the applet, click on the upper right corner to close the applet, web-viewthe page will still play audio.
Expect phenomenon
After looking forward to the closure of small programs, audio stops.
By looking documents, we found no direct method to provide, after the Internet to find a circle, try the program also can not be achieved.
So I think the idea here is that when the user closes the small programs, should be destroyed out web-view. Unfortunately, there is no this interface.
So I use the analog way to achieve the current applet page onHide, the will web-viewof the page srcattribute empty.
Later, after tests found iosunder the platform, the need to develop a url, at androidonly needs to be emptied under the platform. To prevent cache Further, to urllater add a random parameter.
The following is the code fragment.
<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 (wx.getSystemInfoSync().platform == "ios") {
this.webUrl = 'https://demo.com/weixin/index.html?redirect=true';
}else{
// android系统下只能给空值
this.webUrl = ';'
}
},
onBackPress(){
},
methods: {
}
}
</script>
<style>
</style>
note:
This code is by uni-app development. If you edit in micro-letters developer tools, the need to conform to the syntax of small micro-channel program.
Updated June 2, 2019
After testing, we found that the above code is not the best choice. Because when the user hides a small program, recently used the applet, the applet will remain for some time in the background. If you are replacing web-viewthe url, it will cause the music continues to play.
Another problem is that my code above judgment ios and andorid two platforms. In fact, you do not need to think about.
In summary, the above code reference significance, please use the monitor hashchangeway to judge. code show as below:
Applet code
<view class="page-body">
<view class="page-section page-section-gap">
<web-view src="https://demo.com/weixin/index.html#show={{showed}}"></web-view>
</view>
</view>
Page({
data: {
showed: false
},
// 小程序在前台
onShow: function(){
this.setData({
showed: true
});
},
// 小程序在后台
onHide: function() {
this.setData({
showed: false
});
}
})
web-view code
window.addEventListener("hashchange", () => {
var globalAudio = document.getElementById("player"); //获取audio HTMLDOM
const hashData = parseURL(window.location.hash.slice(1));
if (hashData.show) {
const isShow = hashData.show === 'true';
if (isShow) { //切到前台
if (globalAudio.paused) {
globalAudio.play();
}
} else { //切到后台
if (globalAudio.play) {
globalAudio.pause();
}
}
}
}, false);
function parseURL(e) {
var t, n, r, i = e, s = {};
t = i.split("&"),
r = null,
n = null;
for (var o in t) {
var u = t[o].indexOf("=");
u !== -1 && (r = t[o].substr(0, u),
n = t[o].substr(u + 1),
s[r] = n)
}
return s
}
** to sum up**
- By
onShowandonHidesetting attributeshowedvalues to determine the user applet in the foreground or background. - Because it is for
web-viewthesrcdynamic modification ofhashvalues, so it will not cause a page refresh, compared to directly modify thesrcbetter. - Then
web-viewthe page is located, monitorhashchangeevents in the event, to determinehashthe propertiesshowof thetrue falsepause and play value, null music.
Updated June 6, 2019
Originally thought monitor hashchanges in value, is already perfect solution to this problem. But after tests found serious problems: under the Andrew system, the user clicks on the physical back button, the applet will not quit
The reason for this result is that: each modification of hashthe value that they will add a browsing history. And when the user clicks the back button, equivalent to click your browser's Back button. Nature is several times to return back to the first page, and then it exits out the applet.
In this case, the user experience is very bad. My first thought is to call wx.miniProgram.navigateBack, direct return. However, an error will be reported:
His point is that my current web-viewis the first page, can not be returned.
Finally by reading the documentation micro letter, I found onPageStateChangethat listening to events. Analyzing small micro-channel can be program is in the foreground. The very beginning, I tested this interface, the time when the micro-channel client does not have to upgrade, so I always thought that this interface can not be used yet.
In fact, this interface is completely used. But we need to micro-channel version 7.0.3.
In this case, you can optimize the code very less.
// wxml
<view>
<web-view src="https://demo.com/weixin/index.html"></web-view>
</view>
// 微信中的js
Page({
})
// web-view页面中的js
wx.ready(function() {
var globalAudio = document.getElementById("player"); //获取audio HTMLDOM
WeixinJSBridge.on('onPageStateChange', function(res) {
// 注意：res.active返回的是字符串类型的true和false
if(res.active == 'true'){
globalAudio.play();
}else{
globalAudio.pause();
}
});
});
Mainly, not using the hash value change listener, and direct micro-channel using the interface provided. very useful.
Reproduced in: https: //www.jianshu.com/p/fb8a7250900d