本人微信公衆號: 前端修煉之路,歡迎關注。
在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開發的。若是在微信開發者工具中編輯,須要符合微信小程序的語法。瀏覽器
通過測試,發現以上代碼並非最好的選擇。由於當用戶隱藏小程序後,在最近使用的小程序中,該小程序會繼續在後臺保留一段時間。若是是替換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 }
總結
onShow
和onHide
設置屬性showed
的值,來判斷用戶的小程序是在前臺仍是後臺。web-view
的src
動態修改hash
值,因此不會形成頁面刷新,相比直接修改src
會更好。web-view
所在的頁面中,監聽hashchange
事件,在事件中,判斷hash
屬性show
的true false
值,空值音樂的暫停與播放。原本覺得監聽hash
值的變化,已是能完美的解決這個問題了。可是通過測試以後,發現了嚴重的問題:安卓系統下,用戶點擊物理返回按鍵,會沒法退出小程序
這個問題形成的緣由是:每次修改hash
值時候,都會添加一條歷史瀏覽記錄。而用戶點擊返回按鈕時,就至關於點擊瀏覽器的返回按鈕。天然就是會返回屢次才能回到第一頁,而後才退出掉小程序。
這樣的話,用戶體驗就很是很差。我首先想到的是,調用wx.miniProgram.navigateBack
,直接返回。可是會報一個錯誤:
意思就是說,我當前的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值的變化了,直接使用微信提供的接口。很是好用。