日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
H5混合開發(fā)IOS中遇到的坑有哪些

這篇文章將為大家詳細(xì)講解有關(guān)H5混合開發(fā)IOS中遇到的坑有哪些，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)建站專注于企業(yè)營銷型網(wǎng)站、網(wǎng)站重做改版、永定網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5場景定制、商城開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為永定等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

1. ios系統(tǒng)手機(jī)無法自動播放BGM

這個是蘋果系統(tǒng)限制，默認(rèn)不允許自動播放音頻，往往需要點一下觸發(fā)play()事件才能播放。
那么我們在頁面onload后觸發(fā)播放事件：

document.getElementById('music').play();

到這里一般都可以播放音樂了，如果還不行，很有可能是微信的限制。這時需要調(diào)用微信接口。
頁面先引入：

然后JS寫入微信事件：
document.addEventListener("WeixinJSBridgeReady", function() {
document.getElementById('music').play();
}, false);
這樣利用微信接口調(diào)用play()事件，可以完美解決ios音頻無法autoplay的問題。
2. ios系統(tǒng)搖一搖播放音效事件無效
在實現(xiàn)搖晃（引用了封裝好的shake.js）手機(jī)觸發(fā)某一音效這個需求時，發(fā)現(xiàn)在微信中，音效沒有被觸發(fā)。后面找到原因：在ios里并沒有把自定義搖晃事件shake當(dāng)成交互動作。而要播放音效，需要用戶有交互動作。沒有交互，音效就沒被加載，那么我們先加載音效，結(jié)合上面的微信接口：
document.addEventListener("WeixinJSBridgeReady", function () {
shakeMusic.load();
}, false);
load()過之后，再調(diào)用play()即可聽到音效。
3. ios系統(tǒng)不支持動畫暫停樣式（animation-play-state）
H5頁面一般都會有BGM，也會提供一個旋轉(zhuǎn)的音樂圖標(biāo)供用戶開啟關(guān)閉音樂。我們希望當(dāng)用戶點擊音樂按鈕時圖標(biāo)停止旋轉(zhuǎn)，再點圖標(biāo)順著之前停止的位置繼續(xù)跑動畫。animation-play-state是最簡便的方式，然而，ios不支持。
目前的解決方案是：音樂圖標(biāo)負(fù)責(zé)跑動畫，圖標(biāo)父級元素負(fù)責(zé)記錄停止時的轉(zhuǎn)動值。
html



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)前元素的動畫改變，transform的值
var siteWp = $('.music').css('transform')
$('.music').css('transform', siteWp === 'none' ? siteImg : siteImg.concat('', siteWp))
//由于父元素沒有動畫，所以每次賦值的時候，需要將上次父元素的狀態(tài)加上
$img.removeClass('musicRun')
isPlaying = false
}
關(guān)于“H5混合開發(fā)IOS中遇到的坑有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
            
            
                                                            

                                                網(wǎng)站名稱：H5混合開發(fā)IOS中遇到的坑有哪些                                                

                                                鏈接地址：http://www.dlmjj.cn/article/gojehe.html