以下是小編通過(guò)整理后得到的在H5混合開(kāi)發(fā)的IOS項(xiàng)目中經(jīng)常遇到的坑：
1. ios系統(tǒng)手機(jī)無(wú)法自動(dòng)播放BGM
這個(gè)是蘋(píng)果系統(tǒng)限制，默認(rèn)不允許自動(dòng)播放音頻，往往需要點(diǎn)一下觸發(fā)play()事件才能播放。
那么我們?cè)陧?yè)面onload后觸發(fā)播放事件：
document.getElementById('music').play();
到這里一般都可以播放音樂(lè)了，如果還不行，很有可能是微信的限制。這時(shí)需要調(diào)用微信接口。
頁(yè)面先引入：
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
然后JS寫(xiě)入微信事件：
document.addEventListener("WeixinJSBridgeReady", function() {document.getElementById('music').play();}, false);
這樣利用微信接口調(diào)用play()事件，可以完美解決ios音頻無(wú)法autoplay的問(wèn)題。
2. ios系統(tǒng)搖一搖播放音效事件無(wú)效
在實(shí)現(xiàn)搖晃（引用了封裝好的shake.js）手機(jī)觸發(fā)某一音效這個(gè)需求時(shí)，發(fā)現(xiàn)在微信中，音效沒(méi)有被觸發(fā)。后面找到原因：在ios里并沒(méi)有把自定義搖晃事件shake當(dāng)成交互動(dòng)作。而要播放音效，需要用戶有交互動(dòng)作。沒(méi)有交互，音效就沒(méi)被加載，那么我們先加載音效，結(jié)合上面的微信接口：
document.addEventListener("WeixinJSBridgeReady", function () {shakeMusic.load();}, false);
load()過(guò)之后，再調(diào)用play()即可聽(tīng)到音效。
3. ios系統(tǒng)不支持動(dòng)畫(huà)暫停樣式（animation-play-state）
H5頁(yè)面一般都會(huì)有BGM，也會(huì)提供一個(gè)旋轉(zhuǎn)的音樂(lè)圖標(biāo)供用戶開(kāi)啟關(guān)閉音樂(lè)。我們希望當(dāng)用戶點(diǎn)擊音樂(lè)按鈕時(shí)圖標(biāo)停止旋轉(zhuǎn)，再點(diǎn)圖標(biāo)順著之前停止的位置繼續(xù)跑動(dòng)畫(huà)。animation-play-state是最簡(jiǎn)便的方式，然而，ios不支持。
目前的解決方案是：音樂(lè)圖標(biāo)負(fù)責(zé)跑動(dòng)畫(huà)，圖標(biāo)父級(jí)元素負(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 = falserunning()$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)畫(huà)改變，transform的值var siteWp = $('.music').css('transform')$('.music').css('transform', siteWp === 'none' ? siteImg : siteImg.concat('', siteWp))//由于父元素沒(méi)有動(dòng)畫(huà)，所以每次賦值的時(shí)候，需要將上次父元素的狀態(tài)加上$img.removeClass('musicRun')isPlaying = false}新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
