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

07-12

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

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

具體問題

問題1：頁面滾動條問題

問題描述

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

解決方法

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

例子

<body> <div stylex="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");

問題6：原生js的事件監聽和jquery的事件綁定在ios中失效

問題描述

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

解決方法

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

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

問題描述

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

解決方法

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

代碼

var time = "2017-12-26 19:36:00"; time = time.replace(/-/g, "/");//將時間格式的-轉成/形式，兼容iOS

問題8：click事件在ios中有問題

問題描述

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

<ul> <li>列表項1</li> <li>列表項2</li> <li>列表項3</li> </ul>

解析：例如ios用戶點擊"列表項1"時，父層的ul會有一個透明的樣式

解決方法

添加e.stopPropagation(); //阻止冒泡
如果還是無法解決問題，可以修改成touch事件
作者：一如初衷
鏈接：https://juejin.im/post/5aa8b00c51882555627cfa0e