H5混合開發IOS中遇到的坑

1. ios系統手機無法自動**bgm

這個是蘋果系統限制，預設不允許自動**音訊，往往需要點一下觸發play()事件才能**。

那麼我們在頁面onload後觸發**事件：

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

到這裡一般都可以****了，如果還不行，很有可能是微信的限制。這時需要呼叫微信介面。

頁面先引入：

然後js寫入微信事件：

document.addeventlistener("weixinjsbridgeready", function() , false);

這樣利用微信介面呼叫play()事件，可以完美解決ios音訊無法autoplay的問題。

2. ios系統搖一搖**音效事件無效

在實現搖晃（引用了封裝好的shake.js）手機觸發某一音效這個需求時，發現在微信中，音效沒有被觸發。後面找到原因：在ios裡並沒有把自定義搖晃事件shake當成互動動作。而要**音效，需要使用者有互動動作。沒有互動，音效就沒被載入，那麼我們先載入音效，結合上面的微信介面：

documentwww.cppcns.com.addeventlistener("weixinjsbridgeready", function () , false);

load()過之後，再呼叫play()即可聽到音效。

3. ios系統不支援動畫暫停樣式（animation-play-state）

h5頁面一般都會有bgm，也會提供乙個旋轉的**圖示供使用者開啟關閉**。我們希望當使用者點選**按鈕時圖示停止旋轉，再點圖示順著之前停止的位置繼續跑動畫。animation-play-state是最簡便的方式，然而，ios不支援。

目前的解決方案是：**圖示負責跑動畫，圖示父級元素負責記錄停止時的轉動值。

html

sass

.music

}.musicrun

@-webkit-keyframes music

100%

}@keyframes music

100% }js

var $img = $('.musicimg')

var music = document.getelementbyid('music');

var isplaying = false

running()

$img.on('click', function() )

function running()

function paused()

本文標題: h5混合開發ios中遇到的坑

本文位址: