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

時間 2019-11-05

標籤 h5 app 混合開發遇到問題總結简体版

原文原文鏈接

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

背景

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

具體問題

問題1：頁面滾動條問題

問題描述

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

解決方法

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

例子

<body>
	<div style="overflow:scroll/auto;">
		//網頁內容
	</div>
</body>
複製代碼

問題2：touchstart 和 touchend 事件的使用

問題描述

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

解決方法

方法1："removeEventListener"和"addEventListener"一塊兒使用web

方法2：添加e.preventDefault(); 阻止部分手機默認跳轉瀏覽器

法3：Jquery的on實現事件綁定緩存

說明：法1與法2都是原生JS使用addEventListener實現事件監聽；而且dom元素使用touchstart和touchend事件時，須要結合事件綁定或者事件監聽一塊兒使用，不然js部分會拋出異常bash

代碼

//法一：
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事件

20180904 新增

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

問題描述

最近在作微信公衆號，使用 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; } 就能夠了。可是，鼠標能夠滾動，在移動端就不能滾動了。哈哈哈，又踩坑了。

20190416 新增

問題描述

移動端rem佈局，雪碧圖的定位問題

解決方法

使用 百分比(%) 的方式實現的。

計算原理：sprite 寬爲 W，高爲 H，icon 寬爲 w，高爲 h，icon 在 sprite 中的座標爲 (x,y)，獲得百分座標爲 (m,n)：

計算公式：m = x/(W-w)*100%； n = y/(H-h)*100%

雪碧圖在線生成工具：www.toptal.com/developers/…

‘rem佈局，雪碧圖定位問題’的參考連接：

www.jb51.net/css/620142.…

www.jianshu.com/p/d3b19968a…

問題描述

點擊瀏覽器/移動端的返回按鈕，頁面沒刷新的問題

解決方法

// 點擊瀏覽器返回按鈕，頁面沒刷新的問題 window.addEventListener('pageshow', function (event) {

location.reload();
	//event.persisted屬性爲true時，表示當前文檔是從往返緩存中獲取
  	/* if (event.persisted) location.reload(); */
	 /* if (event.persisted){
		 location.reload();
	 }else{
		 location.reload();
	 } */
 });
複製代碼

總結

以上是我在完成項目時，遇到的問題以及解決方法[PS：遇到問題時，經過搜索，參考了不少大牛的方法解決問題的，再次表示感謝]，若是有寫的不足的地方，歡迎指出哦，謝謝啦。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。