資訊專欄INFORMATION COLUMN
摘要：最近在做一個英語答題項目項目需求是通過答題取的成績答題的題型是分為聽音選圖看圖選詞和填空題項目總共分為了個頁面開始頁答題頁和結(jié)束頁面答題頁關(guān)于每種題型我做了相應(yīng)的組件每次切換題目的時候顯示對應(yīng)的的組件要求聽音選圖的時候會自動播放音頻慣例下的
最近在做一個英語答題項目 , 項目需求是通過答題取的成績 , 答題的題型是分為 , 聽音選圖 , 看圖選詞 , 和填空題 . 項目總共分為了3個頁面 , 開始頁 ,答題頁 和結(jié)束頁面 ,答題頁關(guān)于每種題型 , 我做了相應(yīng)的組件 , 每次切換題目的時候 ,顯示對應(yīng)的的組件 , 要求聽音選圖的時候會自動播放音頻 .
慣例 , ios下的safari和微信內(nèi)置瀏覽器都不支持audio的自動播放 , 通常的解決方案都是通過document.addEventListener("WeixinJSBridgeReady",function(){audio.play()},false)來實現(xiàn)的自動播放 , 但是
WeixinJSBridgeReady
事件從頁面加載開始到結(jié)束只會加載一次 , 而且不能通過removeEventListener來移除 , 所以會有兩個問題:
1.從首頁面到答題頁面是路由切換的 , 但是處于開始頁面時候 , WeixinJSBridgeReady這個事件已經(jīng)加載完了 , 跳轉(zhuǎn)到答疑頁面的時候已經(jīng)無法監(jiān)聽到該事件了;
2.首頁就是答題頁面的時候,在題型組件切換的時候只會在第一次加載聽力題型的時候會自動播放 , 再次切換到這種題目的時候無法再次自動播放 .
經(jīng)過不斷的測試 , 發(fā)現(xiàn)ios下不支持的原因是 不支持動態(tài)創(chuàng)建的audio標(biāo)簽自動播放 , 包括頁面第一次加載 , 所以轉(zhuǎn)化了思路 ,把a(bǔ)udio標(biāo)簽放在頂層的App.vue里面 , 不隨著組件的切換創(chuàng)建和銷毀 , 然后在App.vue里面寫一個的方法 , 接受src和callback的參數(shù) , 在main.js掛在全局上, 每次切換的時候 ,調(diào)用該方法傳入對應(yīng)的src , 代碼如下:App.vue
(關(guān)于為什么用document.getElementById , 其實本來是準(zhǔn)備用$refs的 , 但是不知為何在app.vue中無法獲取 , 控制臺打印的$ref能看到有audio 了, 但是不可讀)
main.js
組件內(nèi):
這里要注意的兩點: 1.app.vue中的audio標(biāo)簽必須設(shè)置 controls , 然后通過css隱藏該audio ,否則無法播放 ;
2.在頁面加載的時候需要通過 監(jiān)聽 document.addEventListener("WeixinJSBridgeReady",function(){audio.load()},false) 讓audio.load()加載一次 ,否則后續(xù)也無法自動播放 ;
以上就是最近做項目時候的總結(jié)的一個方法 , 所有的測試均為個人測試 ,可能不具普適性 ,僅提供一種思路和解決方法 . 第一次寫文章 ,可能有很多沒寫清楚的地方 ,截圖內(nèi)也有項目的一些需求代碼 ,請忽視 .有錯誤的地方 還希望大佬們指正.
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107409.html
摘要：避免在頁面的主體布局中使用，要等其中的內(nèi)容完全下載之后才會顯示出來，顯示比布局慢。實現(xiàn)多行文本溢出顯示效果實現(xiàn)方法適用范圍因使用了的擴(kuò)展屬性，該方法適用于瀏覽器及移動端 在過去的一年很多人不滿于公司沒有福利、人際關(guān)系不好相處、沒有發(fā)展前途的境遇等等，想著在開年來換一份工作來重新開始自己，那么 你 準(zhǔn)備好了嗎？ 下面是本人整理的一份面試材料，本想自己用的，但是新年第一天 公司突然給了我個...
摘要：避免在頁面的主體布局中使用，要等其中的內(nèi)容完全下載之后才會顯示出來，顯示比布局慢。實現(xiàn)多行文本溢出顯示效果實現(xiàn)方法適用范圍因使用了的擴(kuò)展屬性，該方法適用于瀏覽器及移動端 在過去的一年很多人不滿于公司沒有福利、人際關(guān)系不好相處、沒有發(fā)展前途的境遇等等，想著在開年來換一份工作來重新開始自己，那么 你 準(zhǔn)備好了嗎？ 下面是本人整理的一份面試材料，本想自己用的，但是新年第一天 公司突然給了我個...
摘要：調(diào)起的注意事項年初，微信下全面封禁了，所以在微信下是調(diào)不起的，暫時是沒有什么辦法。所以安卓下調(diào)不起是一件十分正常的事情。表示的包名，比如，表示調(diào)起的安卓下判斷是否調(diào)起成功其實有一種方法可以判斷安卓下是否調(diào)起成功。 背景 在H5頁面或者app的webview中調(diào)起第三方app 核心 調(diào)起app是操作系統(tǒng)(iOS、Android)的機(jī)制，在h5頁面，我們可以做的不多。 在調(diào)起之前，h5頁面...
摘要：微信分享簽名錯誤單頁應(yīng)用模式下微信分享一直提示簽名錯誤按照微信官網(wǎng)文檔，已經(jīng)引入，正確的配置安全域名，后臺開發(fā)人員生成的簽名也通過微信簽名工具驗證，但是前端的自定義分享一直報簽名錯誤，沒有辦法自定義分享，如果確保了哪些基本配置沒有問題，并且 微信分享簽名錯誤invalid signature vue單頁應(yīng)用history模式下微信分享一直提示簽名錯誤invalid signature ...
閱讀 3746·2021-11-24 09:39
閱讀 3487·2019-08-30 15:56
閱讀 1381·2019-08-30 15:55
閱讀 1042·2019-08-30 15:53
閱讀 1932·2019-08-29 18:37
閱讀 3613·2019-08-29 18:32
閱讀 3141·2019-08-29 16:30
閱讀 2946·2019-08-29 15:14
