前言：移動端微信H5活動項目進入提測階段眯搭，正好有時間寫個項目總結(jié)，避免下次再踩進這些坑业岁，半天爬不出來鳞仙，抓心撓肺還浪費時間。如果有哪位大俠覺得我這個坑正好幫你填上了笔时，還請高抬貴指點個贊棍好。給點贊的大俠們比個心，江湖路遠允耿，說不定以后還能幫你填坑呢是吧~~
關(guān)鍵詞：移動端微信h5頁面借笙，事件監(jiān)聽，發(fā)送短信倒計時较锡，禁止蒙層下層頁面滾動业稼，后添加元素加事件，安卓不刷新頁面加時間戳蚂蕴，ios300ms的延遲低散，ios點擊閃屏,做個滾輪~~......
正文：
一、事件監(jiān)聽--input propertychange
??前提：在項目中遇到了這樣一個很常見的問題：登錄時骡楼，輸入手機號熔号，一旦手機號的輸入有變動或者符合了某些規(guī)則，就執(zhí)行接下來的邏輯君编。
??這個監(jiān)聽事件在pc端一般是使用“on change”跨嘉，但是在移動端這個change事件不起作用的呀。上網(wǎng)查了下吃嘿，發(fā)現(xiàn)：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');
}
})
二亮瓷、發(fā)送短信倒計時
??前提：很多登錄注冊里面都有輸入手機號，然后發(fā)送短信驗證碼這一項降瞳，這個短信驗證碼會有倒計時嘱支，多少秒之后重新發(fā)送。現(xiàn)在要說的就是這么一個效果：
??我感覺我廢話連篇挣饥，為了給自己正名除师，直接看代碼吧：
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("重新發(fā)送" + num + "s");
num--;
}
setTimeout(function() {
setTime();
},1000)
}
??調(diào)用的時候，在你需要調(diào)用的地方加一個setTime()就好啦~~
三短荐、禁止蒙層下層頁面滾動
??前提：手機頁面會有很多彈框倚舀，有彈框就有半透明蒙層叹哭，往往會出現(xiàn)這樣一個問題，在半透明蒙層上來回滑動時痕貌，下層頁面也會滾動风罩，這樣就導(dǎo)致體驗非常的不好。
??解決辦法一：
??這個是我用在本次項目中的用法舵稠，因為彈框里面只是單純的點擊超升，關(guān)閉，輸入柱查，并沒有彈框里的滾動廓俭，所以，使用這種方法唉工。
$('.modal').bind("touchmove", function(e){
e.preventDefault()
}, false)
??解決辦法二：
??這個是我之前用在其他項目里的方法：
??打開蒙層時研乒，給body或者最大的div添加樣式：
`overflow: hidden;`
`height: 100%;`
??在某些機型下，你可能還需要給根節(jié)點添加樣式：
`overflow``:` `hidden``;`
??關(guān)閉蒙層時淋硝，移除以上樣式雹熬。
??優(yōu)點：簡單方便，只需添加css樣式谣膳，沒有復(fù)雜的邏輯竿报。
??缺點：我看網(wǎng)上有些博客寫到移動端會不兼容，但是我當(dāng)時用這種方法在公司的幾個測試機上試過了继谚，烈菌，都沒有出現(xiàn)問題，也可能是機型少的緣故花履。
四芽世、后添加元素加事件---delegate
??前提：我之前以為jquery的on綁定是萬能的，后來發(fā)現(xiàn)诡壁，面對ios9左右的版本济瓢，后添加上去的元素綁定點擊事件都很痛苦的樣子，妹卿，旺矾，明明寫了on click。在eventlistener里面卻是啥都沒有夺克。箕宙。。如果它能是人铺纽，我真的是不想說話扒吁，并向他扔巨大的一堆bug。。雕崩。
$('.stage').delegate("li","click",function(e){})
這里有兩個需要注意的點：
- 嚴格按照上面的格式寫，$('.stage')里面的li加了點擊事件融撞。
- ('.stage')也一定要是本來就存在于HTML里面的盼铁，要不然任你跳腳砸電腦，它依然沒有任何反應(yīng)尝偎。什么叫本來就存在與HTML頁面里面的饶火？就是說('.stage')不能是拼接后添加進去的元素，而是一開始搭建HTML結(jié)構(gòu)時就寫在里面的致扯》羟蓿看，像這樣：
<div class="price-result">
<div class="time"></div>
<div class="img">
<div class="condition2 hide">
<ul class="stage">
//這里面是放進來后加的li
</ul>
</div>
</div>
</div>
五抖僵、安卓不刷新頁面加時間戳
??前提：在安卓中鲤看，刷新當(dāng)前頁是不好使的，耍群，义桂，因為你就算刷爛了，他們也還是會自動把原來的緩存加載出來蹈垢，什么window.location.href直接等于當(dāng)前頁啊慷吊，reload()方法啊，通通不好使曹抬，最好用的一個就是溉瓶，加時間戳，讓他一時反應(yīng)不過來谤民，把這段時間后給的URL當(dāng)做一個新頁面來重新請求堰酿。
...
}else if(responseText.code === "9001"){
var url = 'XX/XX/.html';
window.location.href = url+'?time='+((new Date()).getTime());
}
??這里有一個補充的經(jīng)驗點數(shù)~~，因為最近這個項目已經(jīng)上線赖临，剛開始進行兌獎胞锰，竟然在線上暴露出了一個問題，當(dāng)時經(jīng)過反復(fù)測試都沒有發(fā)現(xiàn)兢榨，后來及時調(diào)整該頁面現(xiàn)在稱它為B頁面嗅榕，經(jīng)過調(diào)整測試后，沒有問題吵聪，上線凌那。但是，第二天吟逝，運營方又提了B頁面最開始的問題帽蝶，他發(fā)消息：iPhone 6 p，微信6.7.1 ,app進去正常块攒，微信進去還這樣励稳。注意是還佃乘，也就是這個手機之前出過這樣的問題，現(xiàn)在改了bug發(fā)版后又出現(xiàn)了驹尼，但是其他都沒有問題趣避，稍微提一下，這個B頁面更改的是ajax里拼接數(shù)據(jù)那一部分的新翎，也就是說程帕，只要更改bug后一個頁面走成功了，其他頁面都應(yīng)該是沒有問題了地啰。那現(xiàn)在經(jīng)過更改愁拭，這個安卓手機還是又出現(xiàn)問題了，那是什么原因亏吝？很簡單岭埠，這是緩存問題，解決方法顺呕，只要在進入這個頁面的時候枫攀，在URL上加上時間戳，那這個時間戳和上面的時間戳一樣嗎株茶？剛開始我加的一模一樣的時間戳来涨，后來被老大提醒，換成另一種方式的時間戳：
if (isLogin) {
window.location.href = getURL.ActivDomain + "/jackpot.html?v=20180802";
}
老大說启盛，這種寫法一般用在發(fā)版的時候蹦掐，v代表version。后面的日期一般是什么時候發(fā)僵闯，就寫的哪一天的日期卧抗。那為什么不按照newDate來寫了呢？因為newDate可能會更耗用戶的流量鳖粟。
六社裆、ios300ms的延遲
??前提：就是點擊的時候他并不能立即執(zhí)行或者出現(xiàn)你想要的效果，在ios9.2版本最為明顯向图，泳秀，，又是這個ios9.2榄攀，嗜傅，，你們要是想知道具體的檩赢，就詳情查看《ios的300ms點擊延時問題》(https://blog.csdn.net/xiaohai1232/article/details/60469938)吕嘀。
??后來翻了大部分博客，發(fā)現(xiàn)有說用css來解決的（單單加一個css能解決？我當(dāng)時不信偶房，后來因為懶趁曼，先試了這個，發(fā)現(xiàn)棕洋，嗯彰阴，事實證明，果真沒啥用拍冠。。簇抵。）庆杜，后來發(fā)現(xiàn)大部分博客都會推薦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;
八勃救、做個滾輪效果吧！
??前提：很多時候移動端的滾輪樣式要隨著設(shè)計來變化脱茉，讓我們做個滾輪吧~：
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)用
好不容易才整理出來剪芥，估計還有一些落下的，看看成果琴许，嗯税肪，還比較滿意，叉會腰吧，可把我牛逼壞了益兄，哈哈哈哈锻梳，整理不易，且看且珍惜净捅，珍惜的人點個喜歡吧疑枯，嘻嘻嘻。
