移动端微信H5活动项目总结

前言：移动端微信H5活动项目进入提测阶段，正好有时间写个项目总结，避免下次再踩进这些坑，半天爬不出来，抓心挠肺还浪费时间。如果有哪位大侠觉得我这个坑正好帮你填上了，还请高抬贵指点个赞。给点赞的大侠们比个心，江湖路远，说不定以后还能帮你填坑呢是吧~~

关键词：移动端微信h5页面，事件监听，发送短信倒计时，禁止蒙层下层页面滚动，后添加元素加事件，安卓不刷新页面加时间戳，ios300ms的延迟，ios点击闪屏,做个滚轮~~......

正文：
一、事件监听--input propertychange
  前提：在项目中遇到了这样一个很常见的问题：登录时，输入手机号，一旦手机号的输入有变动或者符合了某些规则，就执行接下来的逻辑。
  这个监听事件在pc端一般是使用“on change”，但是在移动端这个change事件不起作用的呀。上网查了下，发现：input 和 propertychange 一起用。为什么一起用，其实就像pc里面浏览器的兼容性。代码如下：

$('.input').on('input propertychange', function(e){
        var input= $('.input').val();
        if(input!= ''){
            $('.code').removeClass('gray-code').addClass('color-code');
        }else{
            $('.code').removeClass('color-code').addClass('gray-code');
        }
    })

二、发送短信倒计时
  前提：很多登录注册里面都有输入手机号，然后发送短信验证码这一项，这个短信验证码会有倒计时，多少秒之后重新发送。现在要说的就是这么一个效果：
  我感觉我废话连篇，为了给自己正名，直接看代码吧：

    var num = 60;
    function setTime() {
        if (num < 0) {
            $('.code').html("获取验证码");
            num = 60;
            //如果，此时的input里不是空，那么换成彩色的。
            if($('.input').val() != ''){
                $('.code').removeClass('gray-code').addClass('color-code');
            }
            return false;
        } else {
            $('.code').html("重新发送" + num + "s");
            num--;
        }
        setTimeout(function() {
            setTime();
        },1000)
    }

  调用的时候，在你需要调用的地方加一个setTime()就好啦~~
三、禁止蒙层下层页面滚动
  前提：手机页面会有很多弹框，有弹框就有半透明蒙层，往往会出现这样一个问题，在半透明蒙层上来回滑动时，下层页面也会滚动，这样就导致体验非常的不好。
  解决办法一：
  这个是我用在本次项目中的用法，因为弹框里面只是单纯的点击，关闭，输入，并没有弹框里的滚动，所以，使用这种方法。

$('.modal').bind("touchmove", function(e){
        e.preventDefault()
    }, false)

  解决办法二：
  这个是我之前用在其他项目里的方法：
  打开蒙层时，给body或者最大的div添加样式：

`overflow: hidden;`
`height: 100%;`

  在某些机型下，你可能还需要给根节点添加样式：

`overflow``:` `hidden``;`

  关闭蒙层时，移除以上样式。
  优点：简单方便，只需添加css样式，没有复杂的逻辑。
  缺点：我看网上有些博客写到移动端会不兼容，但是我当时用这种方法在公司的几个测试机上试过了，，都没有出现问题，也可能是机型少的缘故。
四、后添加元素加事件---delegate
  前提：我之前以为jquery的on绑定是万能的，后来发现，面对ios9左右的版本，后添加上去的元素绑定点击事件都很痛苦的样子，，，明明写了on click。在eventlistener里面却是啥都没有。。。如果它能是人，我真的是不想说话，并向他扔巨大的一堆bug。。。

$('.stage').delegate("li","click",function(e){})

这里有两个需要注意的点：

• 严格按照上面的格式写，$('.stage')里面的li加了点击事件。
• ('.stage')也一定要是本来就存在于HTML里面的，要不然任你跳脚砸电脑，它依然没有任何反应。什么叫本来就存在与HTML页面里面的？就是说('.stage')不能是拼接后添加进去的元素，而是一开始搭建HTML结构时就写在里面的。看，像这样：

<div class="price-result">
    <div class="time"></div>
    <div class="img">
        <div class="condition2 hide">
            <ul  class="stage">
                 //这里面是放进来后加的li
            </ul>
        </div> 
    </div>
</div>

五、安卓不刷新页面加时间戳
  前提：在安卓中，刷新当前页是不好使的，，，因为你就算刷烂了，他们也还是会自动把原来的缓存加载出来，什么window.location.href直接等于当前页啊，reload()方法啊，通通不好使，最好用的一个就是，加时间戳，让他一时反应不过来，把这段时间后给的URL当做一个新页面来重新请求。

...
}else if(responseText.code === "9001"){
   var url = 'XX/XX/.html';
   window.location.href = url+'?time='+((new Date()).getTime());
}

  这里有一个补充的经验点数~~，因为最近这个项目已经上线，刚开始进行兑奖，竟然在线上暴露出了一个问题，当时经过反复测试都没有发现，后来及时调整该页面现在称它为B页面，经过调整测试后，没有问题，上线。但是，第二天，运营方又提了B页面最开始的问题，他发消息：iPhone 6 p，微信6.7.1 ,app进去正常，微信进去还这样。注意是还，也就是这个手机之前出过这样的问题，现在改了bug发版后又出现了，但是其他都没有问题，稍微提一下，这个B页面更改的是ajax里拼接数据那一部分的，也就是说，只要更改bug后一个页面走成功了，其他页面都应该是没有问题了。那现在经过更改，这个安卓手机还是又出现问题了，那是什么原因？很简单，这是缓存问题，解决方法，只要在进入这个页面的时候，在URL上加上时间戳，那这个时间戳和上面的时间戳一样吗？刚开始我加的一模一样的时间戳，后来被老大提醒，换成另一种方式的时间戳：

if (isLogin) {
    window.location.href = getURL.ActivDomain + "/jackpot.html?v=20180802";
} 

老大说，这种写法一般用在发版的时候，v代表version。后面的日期一般是什么时候发，就写的哪一天的日期。那为什么不按照newDate来写了呢？因为newDate可能会更耗用户的流量。
六、ios300ms的延迟
  前提：就是点击的时候他并不能立即执行或者出现你想要的效果，在ios9.2版本最为明显，，，又是这个ios9.2，，，你们要是想知道具体的，就详情查看《ios的300ms点击延时问题》(https://blog.csdn.net/xiaohai1232/article/details/60469938)。
  后来翻了大部分博客，发现有说用css来解决的（单单加一个css能解决？我当时不信，后来因为懒，先试了这个，发现，嗯，事实证明，果真没啥用。。。），后来发现大部分博客都会推荐fastclick这个插件，嗯呐，肯定就好使呗。
  接下来，无非就是安装，下载或者npm都行，引入js,使用js :

$(function(){
  fastclick.attach(document.body);
  .....
})

七、ios点击闪屏
  前提：嗯，你猜对了，还是这个ios9左右在这作妖，，，也不算是闪屏了，就是点击的时候，有时候会有一片阴影，，像个铺在最底下背景板的蒙层一样，难看极了。。。

-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color:transparent;

八、做个滚轮效果吧！
  前提：很多时候移动端的滚轮样式要随着设计来变化，让我们做个滚轮吧~：

var ulScroll = {
        step:undefined,
        totalHeight:undefined,
        scrollHeight:undefined,
        init:function(obj){
            this.getSpanHeight(obj);
            this.bindEvents(obj);
        },
        getSpanHeight:function(obj){
            var scrollHeight = obj.height();
            var len = obj.siblings('ul').children().length;
            var totalHeight = parseInt(len * 0.8 * parseFloat($('html').css('font-size')));
            var per = (totalHeight - scrollHeight) / len;
            /*obj.children().height(per);*/
            this.step = per;
            this.totalHeight = totalHeight - scrollHeight;
            this.scrollHeight = scrollHeight - $(obj).find('span').height();
        },
        bindEvents:function(obj){
            var that = this;
            obj.siblings('ul').scroll(function(){
                var target = obj.siblings('ul');
                var scrollTop = target.scrollTop();
                var top = scrollTop * that.scrollHeight / that.totalHeight ;
                obj.children().css({
                    top: top +'px'
                })
            })
        }
    }
ulScroll.init($('.scroll'));//调用

好不容易才整理出来，估计还有一些落下的，看看成果，嗯，还比较满意，叉会腰吧，可把我牛逼坏了，哈哈哈哈，整理不易，且看且珍惜，珍惜的人点个喜欢吧，嘻嘻嘻。