您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)H5混合開發(fā)IOS中遇到的坑有哪些,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
1. ios系統(tǒng)手機(jī)無法自動(dòng)播放BGM
這個(gè)是蘋果系統(tǒng)限制,默認(rèn)不允許自動(dòng)播放音頻,往往需要點(diǎn)一下觸發(fā)play()事件才能播放。
那么我們在頁面onload后觸發(fā)播放事件:
document.getElementById('music').play();
到這里一般都可以播放音樂了,如果還不行,很有可能是微信的限制。這時(shí)需要調(diào)用微信接口。
頁面先引入:
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
然后JS寫入微信事件:
document.addEventListener("WeixinJSBridgeReady", function() { document.getElementById('music').play(); }, false);
這樣利用微信接口調(diào)用play()事件,可以完美解決ios音頻無法autoplay的問題。
2. ios系統(tǒng)搖一搖播放音效事件無效
在實(shí)現(xiàn)搖晃(引用了封裝好的shake.js)手機(jī)觸發(fā)某一音效這個(gè)需求時(shí),發(fā)現(xiàn)在微信中,音效沒有被觸發(fā)。后面找到原因:在ios里并沒有把自定義搖晃事件shake當(dāng)成交互動(dòng)作。而要播放音效,需要用戶有交互動(dòng)作。沒有交互,音效就沒被加載,那么我們先加載音效,結(jié)合上面的微信接口:
document.addEventListener("WeixinJSBridgeReady", function () { shakeMusic.load(); }, false);
load()過之后,再調(diào)用play()即可聽到音效。
3. ios系統(tǒng)不支持動(dòng)畫暫停樣式(animation-play-state)
H5頁面一般都會(huì)有BGM,也會(huì)提供一個(gè)旋轉(zhuǎn)的音樂圖標(biāo)供用戶開啟關(guān)閉音樂。我們希望當(dāng)用戶點(diǎn)擊音樂按鈕時(shí)圖標(biāo)停止旋轉(zhuǎn),再點(diǎn)圖標(biāo)順著之前停止的位置繼續(xù)跑動(dòng)畫。animation-play-state是最簡便的方式,然而,ios不支持。
目前的解決方案是:音樂圖標(biāo)負(fù)責(zé)跑動(dòng)畫,圖標(biāo)父級元素負(fù)責(zé)記錄停止時(shí)的轉(zhuǎn)動(dòng)值。
html
<div class="music"> <img class="musicImg" src="/images/music.png"> </div>
sass
.music { position: absolute; width: rem(64px); height: rem(64px); top: rem(66px); left: rem(15px); z-index: 1000; img { width: 100%; } } .musicRun { -webkit-animation: music 2.5s infinite linear 0.5s; animation: music 2.5s infinite linear 0.5s; } @-webkit-keyframes music { 0% {} 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes music { 0% {} 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
JS
var $img = $('.musicImg') var music = document.getElementById('music'); var isPlaying = false running() $img.on('click', function() { !isPlaying ? running() : paused() }) function running() { music.play(); $img.addClass('musicRun') isPlaying = true } function paused() { music.pause(); var siteImg = $img.css('transform') //獲取當(dāng)前元素的動(dòng)畫改變,transform的值 var siteWp = $('.music').css('transform') $('.music').css('transform', siteWp === 'none' ? siteImg : siteImg.concat('', siteWp)) //由于父元素沒有動(dòng)畫,所以每次賦值的時(shí)候,需要將上次父元素的狀態(tài)加上 $img.removeClass('musicRun') isPlaying = false }
關(guān)于“H5混合開發(fā)IOS中遇到的坑有哪些”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯(cuò),請把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。