資訊專欄INFORMATION COLUMN
摘要：之前在做小程序的時(shí)候遇到一個(gè)問題小程序中有一個(gè)頁面，這個(gè)頁面中用嵌套了一個(gè)頁面，這個(gè)頁面中有背景音樂，背景音樂播放的情況下，點(diǎn)擊小程序右上角退出的小圓圈背景音樂仍然播放。
之前在做小程序的時(shí)候遇到一個(gè)問題：小程序中有一個(gè)webview頁面，這個(gè)頁面中用iframe嵌套了一個(gè)H5頁面，這個(gè)H5頁面中有背景音樂，背景音樂播放的情況下，點(diǎn)擊小程序右上角退出的小圓圈背景音樂仍然播放。
預(yù)期效果：點(diǎn)擊小程序退出后背景音樂停止播放，再次打開小程序后背景音樂繼續(xù)播放，如果用戶停止了音樂，退出再次打開時(shí)背景音樂仍然是停止?fàn)顟B(tài)
思路過程：因?yàn)镠5頁面是嵌套的，音樂在H5頁面中，無法通過小程序的生命周期去控制音樂的播放狀態(tài)，所以如何能在H5頁面中監(jiān)聽頁面的顯隱藏狀態(tài)去控制音樂
visibilitychange：瀏覽器標(biāo)簽頁被隱藏或顯示的時(shí)候會觸發(fā)
適用場景：
瀏覽器標(biāo)簽頁切換時(shí)觸發(fā)
微信環(huán)境下切成浮窗狀態(tài)觸發(fā)
小程序嵌套頁面，小程序切換頁面或進(jìn)入后臺觸發(fā)
其他頁面顯隱切換時(shí)觸發(fā)
解決方案：
let statusBeforeHide = true; // 記錄頁面切換到后臺時(shí)音樂的播放狀態(tài)，如果用戶進(jìn)行了音樂關(guān)閉操作，則將該狀態(tài)置為false
// document.hidden boolean 頁面當(dāng)前是否不可見
let hiddenProperty = ("hidden" in document) ? "hidden"
: ("webkitHidden" in document) ? "webkitHidden"
: ("mozHidden" in document) ? "mozHidden" : null;
if (hiddenProperty) {
let visibilityChangeEvent = hiddenProperty.replace(/hidden/i, "visibilitychange");
let onVisibilityChange = () => {
console.log("visibilityChange");
changePlay();
};
document.addEventListener(visibilityChangeEvent, onVisibilityChange);
} else {
console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
}
// 更改音樂播放狀態(tài)
function changePlay() {
if (document[hiddenProperty]) {
// 頁面隱藏
if (statusBeforeHide) {
music.pause(); // 偽代碼，音樂暫停，但不改變statusBeforeHide
}
} else {
// 頁面顯示
if (statusBeforeHide) {
music.play() // 偽代碼，如果statusBeforeHide是true,音樂繼續(xù)播放
}
}
}
拓展：
1.可在頁面后臺運(yùn)行時(shí)清掉一些定時(shí)器，頁面顯示時(shí)再重新設(shè)置定時(shí)器，節(jié)省性能
作者：易企秀——sunny
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/106520.html
摘要：之前在做小程序的時(shí)候遇到一個(gè)問題小程序中有一個(gè)頁面，這個(gè)頁面中用嵌套了一個(gè)頁面，這個(gè)頁面中有背景音樂，背景音樂播放的情況下，點(diǎn)擊小程序右上角退出的小圓圈背景音樂仍然播放。 之前在做小程序的時(shí)候遇到一個(gè)問題：小程序中有一個(gè)webview頁面，這個(gè)頁面中用iframe嵌套了一個(gè)H5頁面，這個(gè)H5頁面中有背景音樂，背景音樂播放的情況下，點(diǎn)擊小程序右上角退出的小圓圈背景音樂仍然播放。 預(yù)期效果...
摘要：定義文檔資源的名稱二域名解析在瀏覽器輸入網(wǎng)址后，首先要經(jīng)過域名解析，因?yàn)闉g覽器并不能直接通過域名找到對應(yīng)的服務(wù)器，而是要通過地址。什么是域名解析協(xié)議提供通過域名查找地址，或逆向從地址反查域名的服務(wù)。 前言 打開瀏覽器從輸入網(wǎng)址到網(wǎng)頁呈現(xiàn)在大家面前，背后到底發(fā)生了什么？經(jīng)歷怎么樣的一個(gè)過程？先給大家來張總體流程圖，具體步驟請看下文分解！本文首發(fā)地址為GitHub博客,寫文章不易，請多多支...
摘要：定義文檔資源的名稱二域名解析在瀏覽器輸入網(wǎng)址后，首先要經(jīng)過域名解析，因?yàn)闉g覽器并不能直接通過域名找到對應(yīng)的服務(wù)器，而是要通過地址。什么是域名解析協(xié)議提供通過域名查找地址，或逆向從地址反查域名的服務(wù)。 前言 打開瀏覽器從輸入網(wǎng)址到網(wǎng)頁呈現(xiàn)在大家面前，背后到底發(fā)生了什么？經(jīng)歷怎么樣的一個(gè)過程？先給大家來張總體流程圖，具體步驟請看下文分解！本文首發(fā)地址為GitHub博客,寫文章不易，請多多支...
摘要：對微信小程序進(jìn)行全局配置，決定頁面文件的路徑窗口表現(xiàn)設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間設(shè)置多等。 微信小程序知識總結(jié)及案例集錦 微信小程序的發(fā)展會和微信公眾號一樣，在某個(gè)時(shí)間點(diǎn)爆發(fā) 學(xué)習(xí)路徑 微信小程序最好的教程肯定是官方的文檔啦，點(diǎn)擊這里直達(dá) 微信官方文檔 認(rèn)真跟著文檔看一遍，相信有vue前端經(jīng)驗(yàn)的看下應(yīng)該就能上手了，然后安裝 微信小程序開發(fā)者工具 新建一個(gè)quick start項(xiàng)目，了解代碼結(jié)構(gòu)，...
閱讀 3694·2021-09-07 09:59
閱讀 745·2019-08-29 15:12
閱讀 833·2019-08-29 11:14
閱讀 1336·2019-08-26 13:27
閱讀 2699·2019-08-26 10:38
閱讀 3168·2019-08-23 18:07
閱讀 1304·2019-08-23 14:40
閱讀 1948·2019-08-23 12:38
