小程序web-view关闭后，页面音频没有关闭 - 前端修炼之路 - SegmentFault 思否

本人微信公众号：前端修炼之路，欢迎关注。

问题描述：

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

期待现象

期待关闭小程序之后，音频也停止。

通过查找文档，发现没有直接提供方法，网上找了一圈之后，尝试的方案也都无法实现。

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

所以我就利用了模拟的方式来实现，当前小程序页面onHide时，就将web-view的页面src属性清空。

后来经过测试发现，在ios平台下，需要制定一个url，在android平台下只需要清空。另外为了防止造成缓存，给url后面添加了一个随机的参数。

以下是代码片段。

<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>

注意：

以上代码是通过uni-app开发的。如果在微信开发者工具中编辑，需要符合微信小程序的语法。

2019年6月2日 更新

经过测试，发现以上代码并不是最好的选择。因为当用户隐藏小程序后，在最近使用的小程序中，该小程序会继续在后台保留一段时间。如果是替换web-view的url，会造成音乐继续播放。

另外一个问题就是，我以上代码判断了ios和andorid两个平台。其实现在想来并不需要。

综上所述，以上代码参考意义并不大，请使用监听hashchange 方式来判断。代码如下：

小程序中代码

  
    
  


Page({
    data: {
        showed: false
    },
    // 小程序在前台
    onShow: function(){
        this.setData({
            showed: true
        });
    },
    // 小程序在后台
    onHide: function() {
        this.setData({
            showed: false
        });
    }
})

web-view中代码

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
    }

总结

// wxml

    

// 微信中的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();
            }
        });
        
});