微信开发踩过的一些坑

总结一些，平时在微信端，遇到的一些问题，记下笔记，留下痕迹。持续更新ing

1、微信端开发,audio标签在苹果机上无法进行自动播放

问题： 在微信端开发H5的时候，audio标签在苹果机上无法进行自动播放

<audio id="music" autoplay="autoplay" loop="loop" crossOrigin="anonymous" style="display: none;">
	<source src="../../../images/activities/goldendeggs/bgMusic.mp3" type="audio/mpeg">
</audio>

这是我html上的代码，经过运行发现android机上能够良好的呈现并播放，但是在苹果机无法自动播放音乐。

解决方法1、

尝试使用js去注入一个路径，发现苹果机的音乐播放问题被解决了

Media.src = "./assets/sound/music.mp3"; 
Media.play();

解决方法2、

微信的WeixinJSBridgeReady事件。这个是微信自带提供的事件，测试发现，上面说的少部分的机子微信只要做微信ready后执行播放，就可以用代码实现自动播放功能了！具体代码请看下面：

var bgMusic = doc.querySelector('#music');
// 自动音乐播放兼容
function audioAutoPlay(){
  function play(){
    bgMusic.play();
    document.removeEventListener("touchstart", play, false);
  };
  bgMusic.play();
  document.addEventListener("WeixinJSBridgeReady", function () {
    play();
  }, false);
  document.addEventListener('YixinJSBridgeReady', function() {
    play();
  }, false);
  document.addEventListener("touchstart",play, false);
}
// 调用
audioAutoPlay();

总结下吧，关于音乐自动播放的问题，现在可以分为三种：

1-支持audio的autoplay，大部分安卓机子的自带浏览器和微信，大部分的IOS微信（无需特殊解决）

2-不支持audio的autoplay，部分的IOS微信（本文提供的解决方案）

3-不支持audio的autoplay，部分的安卓机子的自带浏览器（比如小米，开始模仿safari）和全部的ios safari（这种只能做用户触屏时就触发播放了）

animation如何设置每次直接间隔1s

在使用css做一些小的动画时，有些动画中我们需要上一个循环与下一个循环之间存在一定的时间间隔，这个时候的animation-delay和transition-delay 只会在第一次动画开始的时候生效，而在两个循环动画之间是不生效的，这时我们就需要用其他的方法来实现循环之间的时间间隔。

给动画的总时间设置一个时间，比如4秒，然后设置动画从75%开始，前面的3秒用作每次动画开始之前的延时，后面的1秒来做动画，

例如：

@keyframes move{
       /*  此处从75%开始 */
      75%{ transform: translateX(0px);}
      100%{ transform: translateX(100px);}

}