小程序web-view關閉後,頁面音頻沒有關閉

本人微信公衆號: 前端修煉之路,歡迎關注。

問題描述:

web-view的src中,引入了一個HTML5頁面,這個頁面有個自動播放的音頻。
在小程序中,點擊右上角關閉小程序後,web-view頁面中的音頻依然會播放。html

期待現象

期待關閉小程序以後,音頻也中止。前端

經過查找文檔,發現沒有直接提供方法,網上找了一圈以後,嘗試的方案也都沒法實現。android

因此我這裏想到的思路是,當用戶關閉小程序時,應該銷燬掉web-view。惋惜,目前沒有這個接口。ios

因此我就利用了模擬的方式來實現,當前小程序頁面onHide時,就將web-view的頁面src屬性清空。web

後來通過測試發現,在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 (wx.getSystemInfoSync().platform == "ios") {
                this.webUrl = 'https://demo.com/weixin/index.html?redirect=true';
            }else{
                // android系統下只能給空值
                this.webUrl = ';'
            }
        },
        onBackPress(){
        },
        methods: {
            
        }
    }
</script>

<style>
</style>
注意:

以上代碼是經過uni-app開發的。若是在微信開發者工具中編輯,須要符合微信小程序的語法。瀏覽器


2019年6月2日 更新

通過測試,發現以上代碼並非最好的選擇。由於當用戶隱藏小程序後,在最近使用的小程序中,該小程序會繼續在後臺保留一段時間。若是是替換web-view的url,會形成音樂繼續播放。緩存

另一個問題就是,我以上代碼判斷了ios和andorid兩個平臺。其實如今想來並不須要。微信

綜上所述,以上代碼參考意義並不大,請使用監聽hashchange 方式來判斷。代碼以下:

小程序中代碼

<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中代碼

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
    }

總結

  • 經過onShowonHide設置屬性showed的值,來判斷用戶的小程序是在前臺仍是後臺。
  • 由於是給web-viewsrc動態修改hash值,因此不會形成頁面刷新,相比直接修改src會更好。
  • 而後在web-view所在的頁面中,監聽hashchange事件,在事件中,判斷hash屬性showtrue false值,空值音樂的暫停與播放。

2019年6月6日 更新

原本覺得監聽hash值的變化,已是能完美的解決這個問題了。可是通過測試以後,發現了嚴重的問題:安卓系統下,用戶點擊物理返回按鍵,會沒法退出小程序

這個問題形成的緣由是:每次修改hash值時候,都會添加一條歷史瀏覽記錄。而用戶點擊返回按鈕時,就至關於點擊瀏覽器的返回按鈕。天然就是會返回屢次才能回到第一頁,而後才退出掉小程序。

這樣的話,用戶體驗就很是很差。我首先想到的是,調用wx.miniProgram.navigateBack,直接返回。可是會報一個錯誤:

clipboard.png

意思就是說,我當前的web-view是第一頁,不能再返回了。

最後仍是經過閱讀微信文檔,發現了onPageStateChange這個監聽事件。能夠判斷微信小程序是否在前臺。我最開始的時候,測試過這個接口,當時當時微信客戶端沒有升級,因此我一直覺得這個接口是不能用的呢。

其實這個接口是徹底能夠用的。只不過須要微信版本在7.0.3

這樣的話,就能夠將代碼優化得很是少了。

// 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();
            }
        });
        
});

主要就是,再也不採用監聽hash值的變化了,直接使用微信提供的接口。很是好用。

相關文章
相關標籤/搜索