H5與APP混合開發遇到的問題總結

一如初衷發表於2018-03-14
H5APP

首先，這是我第一次在這個平臺上寫文章，如果有不好的地方，還請各位指點哦，謝謝。【PS：本人小白一枚】

背景

在公司參與一個原生APP和h5混合開發的專案，本人在專案中負責h5部分，現將專案中遇到的問題總結如下：

具體問題

問題1：頁面滾動條問題
問題描述

web頁面在PC瀏覽器上瀏覽時有滾動條；但是，在移動端瀏覽器開啟時，沒有滾動條

解決方法

將頁面的最外層(我一般在寫頁面時，會在body標籤內寫一個大容器，用於存放頁面的內容)設定overflow:auto/scroll;
並且不能設定height屬性的值(height:100%也不行)

  • 例子
<
body>
 <
div style="overflow:scroll/auto;
">
  //網頁內容 <
/div>
<
/body>
複製程式碼
問題2：touchstart 和 touchend 事件的使用
問題描述

引入touch.js檔案，使用touchstart和touchend事件實現互動效果時，在部分手機出現事件觸發失效的問題[例如：低版本的榮耀手機]

解決方法

方法1：”removeEventListener”和”addEventListener”一起使用

方法2：新增e.preventDefault();
阻止部分手機預設跳轉

法3：Jquery的on實現事件繫結

說明：法1與法2都是原生JS使用addEventListener實現事件監聽；並且dom元素使用touchstart和touchend事件時，需要結合事件繫結或者事件監聽一起使用，否則js部分會丟擲異常

程式碼
//法一：document.getElementById('list5').addEventListener('touchstart',callback, false);
document.getElementById('list5').removeEventListener('touchstart',callback, false);
document.getElementById('list5').addEventListener('touchend',callback, false);
document.getElementById('list5').removeEventListener('touchend',callback, false);
//法二：document.getElementById('list5').addEventListener('touchstart',function(e){ 
e.preventDefault();

  }, false);
document.getElementById('list5').addEventListener('touchend',function(e){ 
e.preventDefault();

  }, false);
複製程式碼
問題3：長按閃退的問題
情景還原

有一個XXX列表頁，長按列表頁的列表項時(觸控到文字)，在低版本手機中會出現閃退的情況

解決方法

js部分：在事件觸發時新增e.preventDefault();
，用於阻止預設行為

css部分：新增禁止文字文字複製的程式碼

程式碼
//js部分：e.preventDefault();
//css部分：-webkit-touch-callout: none;
 //解決閃退//禁止複製-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
複製程式碼
問題4: 移動端1px的問題
問題描述

由於不同的手機有不同的畫素密度,css中的1px並不等於移動裝置的1px。專案中使用js和rem做移動端的螢幕適配，所以產生0.5px的情況，導致低版本的手機展示不了0.5px的邊框。

解決方法

使用css解決1px的問題，並且給需要設定成1px的dom元素直接寫上：border-width:1px;

程式碼
//HTML部分：<
div class='class1'>
<
/div>
//css部分：.class1{ 
border: 1px solid #ccc;

  }//css部分/*移動端正常展示1px的問題 start*/%border-1px{ 
   display: block;
    position:absolute;
    left: 0;
    width: 100%;
    content: ' ';

  }.border-1px{ 
   position: relative;
    &
::after{ 
       @extend %border-1px;
        bottom: 0;
        border-top: 1px solid #ccc;
    
  }    &
::before{ 
       @extend %border-1px;
        top: 0;
        border-bottom: 1px solid #ccc;
    
  }
  }@media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){ 
   .border-1px{ 
       &
::after{ 
           -webkit-transform: scaleY(0.7);
            transform: scaleY(0.7);
        
  }    
  }
  }@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){ 
   .border-1px{ 
       &
::after{ 
           -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
        
  }    
  }
  }/*移動端正常展示1px的問題 end*/複製程式碼
問題5：js無法正確解析到url包含”=”號的引數值
問題描述

專案中，由於資料請求的引數值是從url地址中獲取的引數值，並且引數值包含”=”號，導致無法正確解析到引數值(ps:js使用”=”號分割url的引數)

解決方法

將url進行轉碼，再解碼【本專案中，APP端提供轉碼後的url地址，前端使用geturlparams外掛，獲得url地址的引數值】

程式碼
//解碼"="號dom.token = decodeURI($.query.get("token"));
//外掛//獲取無需解碼的值dom.msgid = $.query.get("msgid");
複製程式碼
geturlparams外掛地址

一個不錯的獲取url引數jquery外掛

問題6：原生js的事件監聽和jquery的事件繫結在ios中失效
問題描述

使用事件監聽或事件繫結時，由於父元素選擇body或document元素，導致在ios中事件觸發無效

解決方法

不使用body和document元素作為父級元素

問題7：ios中日期顯示為NaN
問題描述1

Date的日期格式，在ios中有相容性問題，ios的日期會顯示成：NaN

解決方法1

解決方法：在ios中支援”2017/12/26 19:36:00″，而不支援”2017-12-26 19:36:00″格式，後面一種格式，在ios中顯示Nan （Android中都可以顯示正常）

程式碼1
var time = "2017-12-26 19:36:00";
time = time.replace(/\-/g, "/");
//將時間格式的'-'轉成'/'形式，相容iOS複製程式碼
問題描述2 【20180709】

後臺提供的時間格式綴有“.0”，導致ios解析失敗，ios日期顯示：NaN問題

解決方法2

解決方法：去掉時間格式的”.0″字尾

程式碼2
var time = "2018-07-09 09:13:53.0";
//法一：time = time.substr(0,time.length-2);
  //解決時間後面綴有.0的情況【去掉.0】//法二：time = time.slice(0,time.indexOf("."));
  //本人使用此方法複製程式碼
問題8：click事件在ios中有問題
問題描述

click事件在ios點選觸發時，會選中事件委託的父級元素模組【即：由於事件冒泡，並且父級有預設樣式】，並且有一個透明層，例如

<
ul>
 <
li>
列表項1<
/li>
 <
li>
列表項2<
/li>
 <
li>
列表項3<
/li>
<
/ul>
複製程式碼

解析：例如ios使用者點選”列表項1″時，父層的ul會有一個透明的樣式

解決方法

新增e.stopPropagation();
//阻止冒泡

如果還是無法解決問題，可以修改成touch事件

問題9：[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See

20180904 新增

問題描述

最近在做微信公眾號，使用 JQuery WEUI 元件實現下拉重新整理功能，程式碼如下。但是觸發下拉事件時，瀏覽器的控制檯丟擲 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <
URL>
 這個錯誤

$(document.body).pullToRefresh(function(){ 
   //下拉重新整理的程式碼
  });
複製程式碼
解決方法

在css中加上這句 * {
touch-action: none;

} 就可以了。 但是，滑鼠可以滾動，在移動端就不能滾動了。哈哈哈，又踩坑了。

總結

以上是我在完成專案時，遇到的問題以及解決方法[PS：遇到問題時，通過搜尋，參考了很多大牛的方法解決問題的，再次表示感謝]，如果有寫的不足的地方，歡迎指出哦，謝謝啦。

來源：https://juejin.im/post/5aa8b00c51882555627cfa0e?utm_medium=fe&utm_source=weixinqun

相關文章