移動端H5制作安卓和IOS的坑 持續更新...

移動端H5制作安卓和IOS的坑 持續更新...

前言：最近參加公司的H5頁面創意競賽，又遇到不少頁面在不同系統上的坑。踩坑之余，覺得很多之前遇到的知識點都忘了，索性開一篇博文，把這些坑都統一歸納起來，持續收集更新，於己利人，拋磚引玉。

1. ios系統手機無法自動播放BGM

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

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

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

<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);

這樣利用微信接口調用play()事件，可以完美解決ios音頻無法autoplay的問題。

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

在實現搖晃（引用了封裝好的shake.js）手機觸發某一音效這個需求時，發現在微信中，音效沒有被觸發。后面找到原因：在ios里並沒有把自定義搖晃事件shake當成交互動作。而要播放音效，需要用戶有交互動作。沒有交互，音效就沒被加載，那么我們先加載音效，結合上面的微信接口：

document.addEventListener("WeixinJSBridgeReady", function () {
  shakeMusic.load();
}, false);

load()過之后，再調用play()即可聽到音效。

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

H5頁面一般都會有BGM，也會提供一個旋轉的音樂圖標供用戶開啟關閉音樂。我們希望當用戶點擊音樂按鈕時圖標停止旋轉，再點圖標順着之前停止的位置繼續跑動畫。animation-play-state是最簡便的方式，然而，ios不支持。

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

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') //獲取當前元素的動畫改變，transform的值
    var siteWp = $('.music').css('transform')
    $('.music').css('transform', siteWp === 'none' ? siteImg : siteImg.concat('', siteWp))
    //由於父元素沒有動畫，所以每次賦值的時候，需要將上次父元素的狀態加上
    $img.removeClass('musicRun')
    isPlaying = false
  }

4.安卓微信打開頁面時動畫靜止

H5頁面動畫很重要。當我布好了動畫樣式，用安卓微信打開發現頁面靜止不動，動畫沒有生效。新進入頁面沒效果，刷新一下就恢復。

最直接了當的解決方案：把動畫提取出來，例如提到一個running樣式中，然后在頁面load完了再把這個 動畫值賦上去。

window.onload = function() {
  $('.index').addClass('running')
};