zoukankan      html  css  js  c++  java
  • 项目总结-微信公众平台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代替

  • 相关阅读:
    linux下svn自动启动
    linux下SVN从一台服务器迁移到另一台服务器
    linux下安装subvision
    Activiti 6.0 变化
    Nexus3将本地jar包添加到仓库
    2021年放假安排
    字典词典工具
    测试问题及心得(实时修改添加)
    外网主机远程连接内网主机
    自动化测试
  • 原文地址:https://www.cnblogs.com/violetye/p/4704547.html
Copyright © 2011-2022 走看看