项目总结-微信公众平台Html5

独自开发了一个微信游戏及一宣传动画页面，在这记录下遇到的问题及解决方案。

1. 游戏中带有快速向下滑动页面的功能，但是移动端自带会有下滑效果，这样就会引起冲突。

    解决方案：

document.ontouchstart = function () {
    return false;
}

　　

2. 计算滚动条位置错误。起初是使用“left”参数来设定滚动条的位置，且值为百分比。在PC端，可以正常识别出滚动条的居左位置，然而在移动端不行。

    解决方案：

　 将“left”改为“margin-left”。

3. 若滑动次数过多，页面的动画效果会卡顿。

    解决方案：

　 每次滑动会添加添加一个新的<img>标签并加以动画效果，所以创建完新的后延迟一会儿再删除老的就可以了。但是千万不能一创建完新的就删除，这样在快速滑动时，会有动画断层，第一个正在运动的img还没执行完就被干掉了。

4. 向下滑动一定距离后才能认定为触发成功，但是时而有效时而无效，有时单点也会触发。

    解决方案：

　 在touchstart的时候重置下触点的结束位置的值。

        var touchTop = 0; //触点的起始位置
        var endTop = 0;  //触点的结束位置 
        var obj = document.getElementById('cups');
        obj.addEventListener('touchstart', function (event) {
            if (event.targetTouches.length == 1) {
                var touch = event.targetTouches[0];
                touchTop = touch.pageY;
                endTop = 0;
                }
            }
        }, false);
        obj.addEventListener('touchmove', function (event) {
            if (event.targetTouches.length == 1) {
                var touch = event.targetTouches[0];
                endTop = touch.pageY;
            }
        }, false);
        obj.addEventListener('touchend', function (event) {
            if ((endTop - touchTop) > 60) {
               ...
            }
        }, false);        

　　

5. Zepto中无法使用$(window).load()方法。

    解决方案：

$(window).on('load', function () {
    ...
});

　

6. Android机不能播放audio。

    解决方案：　

 <audio loop="loop" id="game1-audio" src="media/game1.mp3" data-ke-src="media/game1.mp3"></audio>

7. IOS机，使用FastClick插件后，点击select下拉列表时，触发焦点不正确，一直点击到其他Dom元素。

    临时解决方案：

　 不使用FastClick，会产生300毫秒的延时

8. 部分Android机不支持css3 animation中的alternate-reverse。　 

-moz-animation: tears 0.2s alternate-reverse a alinfinite linear;
-o-animation: tears 0.2s alternate-reverse infinite linear;
-webkit-animation: tears 0.2s alternate-reverse infinite linear;
animation: tears 0.2s alternate-reverse infinite linear;

　alternate-reverse:奇数次的动画循环迭代将按反方向播放，偶数次的动画循环迭代将按正常方向播放

   解决方案：

　重新再定义一个keyframes规则

9. IOS机，无法使用audio的API控制音频静音(audio.muted=true或audio.attr("muted","muted"))&调整音量(audio.volume =0;)。

    解决方案：

　 只能使用play()或pause()来替代静音

10. 部分IOS机，不支持localStorage

     解决方案：

　  用cookie代替