日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
微信H5頁(yè)面前端開(kāi)發(fā)，大多數(shù)人都會(huì)遇到的幾個(gè)兼容性坑

最近給公司微信公眾號(hào)，寫了微信h5業(yè)務(wù)頁(yè)面，總結(jié)分享一下前端開(kāi)發(fā)過(guò)程中的幾個(gè)兼容性坑，項(xiàng)目直接拿的公司頁(yè)面，所以下文涉及圖片都模糊處理了。

目前成都創(chuàng)新互聯(lián)已為1000+的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬空間、成都網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計(jì)、永昌網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

1、ios端兼容input光標(biāo)高度

問(wèn)題詳情描述：input輸入框光標(biāo)，在安卓手機(jī)上顯示沒(méi)有問(wèn)題，但是在蘋果手機(jī)上

當(dāng)點(diǎn)擊輸入的時(shí)候，光標(biāo)的高度和父盒子的高度一樣。例如下圖，左圖是正常所期待的輸入框光標(biāo)，右邊是ios的input光標(biāo)。

出現(xiàn)原因分析：通常我們習(xí)慣用height屬性設(shè)置行間的高度和line-height屬性設(shè)置行間的距離（行高），當(dāng)點(diǎn)擊輸入的時(shí)候，光標(biāo)的高度就自動(dòng)和父盒子的高度一樣了。（谷歌瀏覽器的設(shè)計(jì)原則，還有一種可能就是當(dāng)沒(méi)有內(nèi)容的時(shí)候光標(biāo)的高度等于input的line-height的值，當(dāng)有內(nèi)容時(shí)，光標(biāo)從input的頂端到文字的底部

解決辦法：高度height和行高line-height內(nèi)容用padding撐開(kāi)

例如：       

 
 
 
 
      
  
  
  
  1. .content{  
    2.   
  
  
  
  2.             float: left;  
    3.   
  
  
  
  3.             box-sizing: border-box;  
    4.   
  
  
  
  4.             height: 88px;  
    5.   
  
  
  
  5.             width: calc(100% - 240px);              .content-input{  
    6.   
  
  
  
  6.               display: block;  
    7.   
  
  
  
  7.               box-sizing: border-box;  
    8.   
  
  
  
  8.               width: 100%;  
    9.   
  
  
  
  9.               color: #333333;  
    10.   
  
  
  
  10.               font-size: 28px;  
    11.   
  
  
  
  11.               //line-height: 88px;  
    12.   
  
  
  
  12.               padding-top: 20px;  
    13.   
  
  
  
  13.               padding-bottom: 20px;  
    14.   
  
  
  
  14.             }  
    15.   
  
  
  
  15.            } 
    16.

2、ios端微信h5頁(yè)面上下滑動(dòng)時(shí)卡頓、頁(yè)面缺失

問(wèn)題詳情描述：在ios端，上下滑動(dòng)頁(yè)面時(shí)，如果頁(yè)面高度超出了一屏，就會(huì)出現(xiàn)明顯的卡頓，頁(yè)面有部分內(nèi)容顯示不全的情況，例如下圖，右圖是正常頁(yè)面，邊是ios上下滑動(dòng)后，卡頓導(dǎo)致如左圖下面部分丟失。

出現(xiàn)原因分析：

籠統(tǒng)說(shuō)微信瀏覽器的內(nèi)核，Android上面是使用自帶的WebKit內(nèi)核，iOS里面由于蘋果的原因，使用了自帶的Safari內(nèi)核，Safari對(duì)于overflow-scrolling用了原生控件來(lái)實(shí)現(xiàn)。對(duì)于有-webkit-overflow-scrolling的網(wǎng)頁(yè)，會(huì)創(chuàng)建一個(gè)UIScrollView，提供子layer給渲染模塊使用?！居写甲C】

解決辦法：只需要在公共樣式加入下面這行代碼

 
 
 
 
      
  
  
  
  1. *{  
    2.   
  
  
  
  2.   -webkit-overflow-scrolling: touch;  
    3.   
  
  
  
  3. } 
    4.

But，這個(gè)屬性是有bug的，比如如果你的頁(yè)面中有設(shè)置了絕對(duì)定位的節(jié)點(diǎn)，那么該節(jié)點(diǎn)的顯示會(huì)錯(cuò)亂，當(dāng)然還有會(huì)有其他的一些bug。

拓展知識(shí)： -webkit-overflow-scrolling:touch是什么？

MDN上是這樣定義的：

-webkit-overflow-scrolling 屬性控制元素在移動(dòng)設(shè)備上是否使用滾動(dòng)回彈效果.

auto: 使用普通滾動(dòng), 當(dāng)手指從觸摸屏上移開(kāi)，滾動(dòng)會(huì)立即停止。

touch: 使用具有回彈效果的滾動(dòng), 當(dāng)手指從觸摸屏上移開(kāi)，內(nèi)容會(huì)繼續(xù)保持一段時(shí)間的滾動(dòng)效果。繼續(xù)滾動(dòng)的速度和持續(xù)的時(shí)間和滾動(dòng)手勢(shì)的強(qiáng)烈程度成正比。同時(shí)也會(huì)創(chuàng)建一個(gè)新的堆棧上下文。

3、ios鍵盤喚起，鍵盤收起以后頁(yè)面不歸位

問(wèn)題詳情描述：

 輸入內(nèi)容，軟鍵盤彈出，頁(yè)面內(nèi)容整體上移，但是鍵盤收起，頁(yè)面內(nèi)容不下滑

出現(xiàn)原因分析：

固定定位的元素 在元素內(nèi) input 框聚焦的時(shí)候 彈出的軟鍵盤占位 失去焦點(diǎn)的時(shí)候軟鍵盤消失 但是還是占位的 導(dǎo)致input框不能再次輸入 在失去焦點(diǎn)的時(shí)候給一個(gè)事件

解決辦法：

 
 
 
 
      
  
  
  
  1.   
    2.   
  
  
  
  2.   投·被保險(xiǎn)人姓名
  
  •      
  •      
  •             placeholder="請(qǐng)輸入姓名"  
  •             v-model="peopleList.name"  
  •            @focus="changefocus()"  
  •            @blur.prevent="changeBlur()"/>    
    •   
  •  
    •    
     
 
 
 
        
  
  
  
    1. changeBlur(){  
      2.   
  
  
  
    2.       let u = navigator.userAgent, app = navigator.appVersion;  
      3.   
  
  
  
    3.       let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);  
      4.   
  
  
  
    4.       if(isIOS){  
      5.   
  
  
  
    5.         setTimeout(() => {  
      6.   
  
  
  
    6.           const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0  
      7.   
  
  
  
    7.           window.scrollTo(0, Math.max(scrollHeight - 1, 0))  
      8.   
  
  
  
    8.           }, 200)  
      9.   
  
  
  
    9.       }  
      10.   
  
  
  
    10.     } 
      11.

    拓展知識(shí)： position: fixed的元素在ios里，收起鍵盤的時(shí)候會(huì)被頂上去，特別是第三方鍵盤

    4、安卓彈出的鍵盤遮蓋文本框

    問(wèn)題詳情描述：

    安卓微信H5彈出軟鍵盤后擋住input輸入框，如下左圖是期待喚起鍵盤的時(shí)候樣子，右邊是實(shí)際喚起鍵盤的樣子

    出現(xiàn)原因分析：待補(bǔ)充

    解決辦法：給input和textarea標(biāo)簽添加focus事件，如下，先判斷是不是安卓手機(jī)下的操作，當(dāng)然，可以不用判斷機(jī)型，Document 對(duì)象屬性和方法，setTimeout延時(shí)0.5秒，因?yàn)檎{(diào)用安卓鍵盤有一點(diǎn)遲鈍，導(dǎo)致如果不延時(shí)處理的話，滾動(dòng)就失效了 

     
 
 
 
        
  
  
  
    1. changefocus(){  
      2.   
  
  
  
    2.      let u = navigator.userAgent, app = navigator.appVersion;  
      3.   
  
  
  
    3.      let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;  
      4.   
  
  
  
    4.      if(isAndroid){  
      5.   
  
  
  
    5.        setTimeout(function() {  
      6.   
  
  
  
    6.         document.activeElement.scrollIntoViewIfNeeded();  
      7.   
  
  
  
    7.         document.activeElement.scrollIntoView();  
      8.   
  
  
  
    8.        }, 500);         
      9.   
  
  
  
    9.      }  
      10.   
  
  
  
    10.    }, 
      11.

    拓展知識(shí)：

    Element.scrollIntoView()方法讓當(dāng)前的元素滾動(dòng)到瀏覽器窗口的可視區(qū)域內(nèi)。而Element.scrollIntoViewIfNeeded()方法也是用來(lái)將不在瀏覽器窗口的可見(jiàn)區(qū)域內(nèi)的元素滾動(dòng)到瀏覽器窗口的可見(jiàn)區(qū)域。但如果該元素已經(jīng)在瀏覽器窗口的可見(jiàn)區(qū)域內(nèi)，則不會(huì)發(fā)生滾動(dòng)

    5、Vue中路由使用hash模式，開(kāi)發(fā)微信H5頁(yè)面分享時(shí)在安卓上設(shè)置分享成功，但是ios的分享異常

    問(wèn)題詳情描述：

    ios當(dāng)前頁(yè)面分享給好友，點(diǎn)擊進(jìn)來(lái)是正常，如果二次分享，則跳轉(zhuǎn)到首頁(yè)；使用vue router跳轉(zhuǎn)到第二個(gè)頁(yè)面后在分享時(shí)，分享設(shè)置失敗；以上安卓分享都是正常

    出現(xiàn)原因分析：jssdk是后端進(jìn)行簽署，前端校驗(yàn)，但是有時(shí)跨域，ios是分享以后會(huì)自動(dòng)帶上 from=singlemessage&isappinstalled=0 以及其他參數(shù)，分享朋友圈參數(shù)還不一樣，貌似系統(tǒng)不一樣參數(shù)也不一樣，但是每次獲取url并不能獲取后面這些參數(shù)

    解決辦法：

    (1)可以使用改頁(yè)面this.$router.push跳轉(zhuǎn)，為window.location.href去跳轉(zhuǎn)，而不使用路由跳轉(zhuǎn)，這樣可以使地址欄的地址與當(dāng)前頁(yè)的地址一樣，可以分享成功（適合分享的頁(yè)面不多的情況下，作為一個(gè)單單頁(yè)運(yùn)用，這樣刷新頁(yè)面跳轉(zhuǎn)，還是..）

    （2）把入口地址保存在本地，等需要獲取簽名的時(shí)候 取出來(lái)，注意：sessionStorage.setItem(‘href’,href); 只在剛進(jìn)入單應(yīng)用的時(shí)候保存！【該方法未驗(yàn)證】

    題外話：

    如果能用小程序?qū)懙捻?yè)面，盡量上小程序吧，H5開(kāi)發(fā)在微信開(kāi)發(fā)者工具里看頁(yè)面效果可能看不出問(wèn)題，因?yàn)椴荒軉酒疖涙I盤。避免頻繁線上發(fā)布，可以用花生殼或者idcfengye，做內(nèi)網(wǎng)穿透，搭建一個(gè)可以通過(guò)域名訪問(wèn)的開(kāi)發(fā)環(huán)境的h5頁(yè)面，在手機(jī)上看看效果，對(duì)了微信內(nèi)置瀏覽器緩存機(jī)制。會(huì)導(dǎo)致剛提交的代碼（特別是js）效果要半個(gè)小時(shí)左右才生效。

    最后：

    微信H5頁(yè)面其實(shí)很多知識(shí)，登陸授權(quán)，jssdk授權(quán)，這里就只做了分享，當(dāng)然還有上傳圖片、微信支付等功能，都可能會(huì)遇到坑，以上幾個(gè)坑也是比較常遇到的，如果有更好的解決方案的話，歡迎在留言區(qū)分享


    當(dāng)前文章：微信H5頁(yè)面前端開(kāi)發(fā)，大多數(shù)人都會(huì)遇到的幾個(gè)兼容性坑
    文章源于：http://www.5511xx.com/article/cdegesg.html