前言：移動(dòng)端微信H5活動(dòng)項(xiàng)目進(jìn)入提測(cè)階段，正好有時(shí)間寫個(gè)項(xiàng)目總結(jié)，避免下次再踩進(jìn)這些坑，半天爬不出來(lái)，抓心撓肺還浪費(fèi)時(shí)間。如果有哪位大俠覺得我這個(gè)坑正好幫你填上了，還請(qǐng)高抬貴指點(diǎn)個(gè)贊。給點(diǎn)贊的大俠們比個(gè)心，江湖路遠(yuǎn)，說(shuō)不定以后還能幫你填坑呢是吧~~

關(guān)鍵詞：移動(dòng)端微信h5頁(yè)面，事件監(jiān)聽，發(fā)送短信倒計(jì)時(shí)，禁止蒙層下層頁(yè)面滾動(dòng)，后添加元素加事件，安卓不刷新頁(yè)面加時(shí)間戳，ios300ms的延遲，ios點(diǎn)擊閃屏,做個(gè)滾輪~~......

正文：
一、事件監(jiān)聽--input propertychange
??前提：在項(xiàng)目中遇到了這樣一個(gè)很常見的問題：登錄時(shí)，輸入手機(jī)號(hào)，一旦手機(jī)號(hào)的輸入有變動(dòng)或者符合了某些規(guī)則，就執(zhí)行接下來(lái)的邏輯。
??這個(gè)監(jiān)聽事件在pc端一般是使用“on change”，但是在移動(dòng)端這個(gè)change事件不起作用的呀。上網(wǎng)查了下，發(fā)現(xiàn)：input 和 propertychange 一起用。為什么一起用，其實(shí)就像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');
        }
    })

二、發(fā)送短信倒計(jì)時(shí)
??前提：很多登錄注冊(cè)里面都有輸入手機(jī)號(hào)，然后發(fā)送短信驗(yàn)證碼這一項(xiàng)，這個(gè)短信驗(yàn)證碼會(huì)有倒計(jì)時(shí)，多少秒之后重新發(fā)送?，F(xiàn)在要說(shuō)的就是這么一個(gè)效果：
??我感覺我廢話連篇，為了給自己正名，直接看代碼吧：

    var num = 60;
    function setTime() {
        if (num < 0) {
            $('.code').html("獲取驗(yàn)證碼");
            num = 60;
            //如果，此時(shí)的input里不是空，那么換成彩色的。
            if($('.input').val() != ''){
                $('.code').removeClass('gray-code').addClass('color-code');
            }
            return false;
        } else {
            $('.code').html("重新發(fā)送" + num + "s");
            num--;
        }
        setTimeout(function() {
            setTime();
        },1000)
    }

??調(diào)用的時(shí)候，在你需要調(diào)用的地方加一個(gè)setTime()就好啦~~
三、禁止蒙層下層頁(yè)面滾動(dòng)
??前提：手機(jī)頁(yè)面會(huì)有很多彈框，有彈框就有半透明蒙層，往往會(huì)出現(xiàn)這樣一個(gè)問題，在半透明蒙層上來(lái)回滑動(dòng)時(shí)，下層頁(yè)面也會(huì)滾動(dòng)，這樣就導(dǎo)致體驗(yàn)非常的不好。
??解決辦法一：
??這個(gè)是我用在本次項(xiàng)目中的用法，因?yàn)閺椏蚶锩嬷皇菃渭兊狞c(diǎn)擊，關(guān)閉，輸入，并沒有彈框里的滾動(dòng)，所以，使用這種方法。

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

??解決辦法二：
??這個(gè)是我之前用在其他項(xiàng)目里的方法：
??打開蒙層時(shí)，給body或者最大的div添加樣式：

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

??在某些機(jī)型下，你可能還需要給根節(jié)點(diǎn)添加樣式：

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

??關(guān)閉蒙層時(shí)，移除以上樣式。
??優(yōu)點(diǎn)：簡(jiǎn)單方便，只需添加css樣式，沒有復(fù)雜的邏輯。
??缺點(diǎn)：我看網(wǎng)上有些博客寫到移動(dòng)端會(huì)不兼容，但是我當(dāng)時(shí)用這種方法在公司的幾個(gè)測(cè)試機(jī)上試過了，，都沒有出現(xiàn)問題，也可能是機(jī)型少的緣故。
四、后添加元素加事件---delegate
??前提：我之前以為jquery的on綁定是萬(wàn)能的，后來(lái)發(fā)現(xiàn)，面對(duì)ios9左右的版本，后添加上去的元素綁定點(diǎn)擊事件都很痛苦的樣子，，，明明寫了on click。在eventlistener里面卻是啥都沒有。。。如果它能是人，我真的是不想說(shuō)話，并向他扔巨大的一堆bug。。。

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

這里有兩個(gè)需要注意的點(diǎn)：

• 嚴(yán)格按照上面的格式寫，$('.stage')里面的li加了點(diǎn)擊事件。
• ('.stage')也一定要是本來(lái)就存在于HTML里面的，要不然任你跳腳砸電腦，它依然沒有任何反應(yīng)。什么叫本來(lái)就存在與HTML頁(yè)面里面的？就是說(shuō)('.stage')不能是拼接后添加進(jìn)去的元素，而是一開始搭建HTML結(jié)構(gòu)時(shí)就寫在里面的。看，像這樣：

<div class="price-result">
    <div class="time"></div>
    <div class="img">
        <div class="condition2 hide">
            <ul  class="stage">
                 //這里面是放進(jìn)來(lái)后加的li
            </ul>
        </div> 
    </div>
</div>

五、安卓不刷新頁(yè)面加時(shí)間戳
??前提：在安卓中，刷新當(dāng)前頁(yè)是不好使的，，，因?yàn)槟憔退闼€了，他們也還是會(huì)自動(dòng)把原來(lái)的緩存加載出來(lái)，什么window.location.href直接等于當(dāng)前頁(yè)啊，reload()方法啊，通通不好使，最好用的一個(gè)就是，加時(shí)間戳，讓他一時(shí)反應(yīng)不過來(lái)，把這段時(shí)間后給的URL當(dāng)做一個(gè)新頁(yè)面來(lái)重新請(qǐng)求。

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

??這里有一個(gè)補(bǔ)充的經(jīng)驗(yàn)點(diǎn)數(shù)~~，因?yàn)樽罱@個(gè)項(xiàng)目已經(jīng)上線，剛開始進(jìn)行兌獎(jiǎng)，竟然在線上暴露出了一個(gè)問題，當(dāng)時(shí)經(jīng)過反復(fù)測(cè)試都沒有發(fā)現(xiàn)，后來(lái)及時(shí)調(diào)整該頁(yè)面現(xiàn)在稱它為B頁(yè)面，經(jīng)過調(diào)整測(cè)試后，沒有問題，上線。但是，第二天，運(yùn)營(yíng)方又提了B頁(yè)面最開始的問題，他發(fā)消息：iPhone 6 p，微信6.7.1 ,app進(jìn)去正常，微信進(jìn)去還這樣。注意是還，也就是這個(gè)手機(jī)之前出過這樣的問題，現(xiàn)在改了bug發(fā)版后又出現(xiàn)了，但是其他都沒有問題，稍微提一下，這個(gè)B頁(yè)面更改的是ajax里拼接數(shù)據(jù)那一部分的，也就是說(shuō)，只要更改bug后一個(gè)頁(yè)面走成功了，其他頁(yè)面都應(yīng)該是沒有問題了。那現(xiàn)在經(jīng)過更改，這個(gè)安卓手機(jī)還是又出現(xiàn)問題了，那是什么原因？很簡(jiǎn)單，這是緩存問題，解決方法，只要在進(jìn)入這個(gè)頁(yè)面的時(shí)候，在URL上加上時(shí)間戳，那這個(gè)時(shí)間戳和上面的時(shí)間戳一樣嗎？剛開始我加的一模一樣的時(shí)間戳，后來(lái)被老大提醒，換成另一種方式的時(shí)間戳：

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

老大說(shuō)，這種寫法一般用在發(fā)版的時(shí)候，v代表version。后面的日期一般是什么時(shí)候發(fā)，就寫的哪一天的日期。那為什么不按照newDate來(lái)寫了呢？因?yàn)閚ewDate可能會(huì)更耗用戶的流量。
六、ios300ms的延遲
??前提：就是點(diǎn)擊的時(shí)候他并不能立即執(zhí)行或者出現(xiàn)你想要的效果，在ios9.2版本最為明顯，，，又是這個(gè)ios9.2，，，你們要是想知道具體的，就詳情查看《ios的300ms點(diǎn)擊延時(shí)問題》(https://blog.csdn.net/xiaohai1232/article/details/60469938)。
??后來(lái)翻了大部分博客，發(fā)現(xiàn)有說(shuō)用css來(lái)解決的（單單加一個(gè)css能解決？我當(dāng)時(shí)不信，后來(lái)因?yàn)閼校仍嚵诉@個(gè)，發(fā)現(xiàn)，嗯，事實(shí)證明，果真沒啥用。。。），后來(lái)發(fā)現(xiàn)大部分博客都會(huì)推薦fastclick這個(gè)插件，嗯吶，肯定就好使唄。
??接下來(lái)，無(wú)非就是安裝，下載或者npm都行，引入js,使用js :

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

七、ios點(diǎn)擊閃屏
??前提：嗯，你猜對(duì)了，還是這個(gè)ios9左右在這作妖，，，也不算是閃屏了，就是點(diǎn)擊的時(shí)候，有時(shí)候會(huì)有一片陰影，，像個(gè)鋪在最底下背景板的蒙層一樣，難看極了。。。

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

八、做個(gè)滾輪效果吧！
??前提：很多時(shí)候移動(dòng)端的滾輪樣式要隨著設(shè)計(jì)來(lái)變化，讓我們做個(gè)滾輪吧~：

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'));//調(diào)用

好不容易才整理出來(lái)，估計(jì)還有一些落下的，看看成果，嗯，還比較滿意，叉會(huì)腰吧，可把我牛逼壞了，哈哈哈哈，整理不易，且看且珍惜，珍惜的人點(diǎn)個(gè)喜歡吧，嘻嘻嘻。