欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

淺談html5與APP混合開(kāi)發(fā)遇到的問(wèn)題總結(jié)

  發(fā)布時(shí)間：2018-03-20 14:59:19   作者：一如初衷   我要評(píng)論
這篇文章主要介紹了淺談html5與APP混合開(kāi)發(fā)遇到的問(wèn)題總結(jié)的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

背景

在公司參與一個(gè)原生APP和h5混合開(kāi)發(fā)的項(xiàng)目，本人在項(xiàng)目中負(fù)責(zé)h5部分，現(xiàn)將項(xiàng)目中遇到的問(wèn)題總結(jié)如下：

具體問(wèn)題

問(wèn)題1：頁(yè)面滾動(dòng)條問(wèn)題

問(wèn)題描述

web頁(yè)面在PC瀏覽器上瀏覽時(shí)有滾動(dòng)條；但是，在移動(dòng)端瀏覽器打開(kāi)時(shí)，沒(méi)有滾動(dòng)條

解決方法

將頁(yè)面的最外層(我一般在寫(xiě)頁(yè)面時(shí)，會(huì)在body標(biāo)簽內(nèi)寫(xiě)一個(gè)大容器，用于存放頁(yè)面的內(nèi)容)設(shè)置overflow:auto/scroll;并且不能設(shè)置height屬性的值(height:100%也不行)

例子

<body>
 <div style="overflow:scroll/auto;">
  //網(wǎng)頁(yè)內(nèi)容
 </div>
</body>

問(wèn)題2：touchstart 和 touchend 事件的使用

問(wèn)題描述

引入touch.js文件，使用touchstart和touchend事件實(shí)現(xiàn)交互效果時(shí)，在部分手機(jī)出現(xiàn)事件觸發(fā)失效的問(wèn)題[例如：低版本的榮耀手機(jī)]

解決方法

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

方法2：添加e.preventDefault(); 阻止部分手機(jī)默認(rèn)跳轉(zhuǎn)

法3：Jquery的on實(shí)現(xiàn)事件綁定

說(shuō)明：法1與法2都是原生JS使用addEventListener實(shí)現(xiàn)事件監(jiān)聽(tīng)；并且dom元素使用touchstart和touchend事件時(shí)，需要結(jié)合事件綁定或者事件監(jiān)聽(tīng)一起使用，否則js部分會(huì)拋出異常

代碼

//法一：
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);

問(wèn)題3：長(zhǎng)按閃退的問(wèn)題

情景還原

有一個(gè)XXX列表頁(yè)，長(zhǎng)按列表頁(yè)的列表項(xiàng)時(shí)(觸摸到文字)，在低版本手機(jī)中會(huì)出現(xiàn)閃退的情況

解決方法

js部分：在事件觸發(fā)時(shí)添加e.preventDefault();，用于阻止默認(rèn)行為

css部分：添加禁止文本文本復(fù)制的代碼

代碼

//js部分：
e.preventDefault();

//css部分：
-webkit-touch-callout: none; //解決閃退
//禁止復(fù)制
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;

問(wèn)題4: 移動(dòng)端1px的問(wèn)題

問(wèn)題描述

由于不同的手機(jī)有不同的像素密度,css中的1px并不等于移動(dòng)設(shè)備的1px。項(xiàng)目中使用js和rem做移動(dòng)端的屏幕適配，所以產(chǎn)生0.5px的情況，導(dǎo)致低版本的手機(jī)展示不了0.5px的邊框。

解決方法

使用css解決1px的問(wèn)題，并且給需要設(shè)置成1px的dom元素直接寫(xiě)上：border-width:1px;

代碼

//HTML部分：
<div class='class1'></div>

//css部分：
.class1{
 border: 1px solid #ccc;
}

//css部分
/*移動(dòng)端正常展示1px的問(wèn)題 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);
        }
    }
}
/*移動(dòng)端正常展示1px的問(wèn)題 end*/

問(wèn)題5：js無(wú)法正確解析到url包含"="號(hào)的參數(shù)值

問(wèn)題描述

項(xiàng)目中，由于數(shù)據(jù)請(qǐng)求的參數(shù)值是從url地址中獲取的參數(shù)值，并且參數(shù)值包含"="號(hào)，導(dǎo)致無(wú)法正確解析到參數(shù)值(ps:js使用"="號(hào)分割url的參數(shù))

解決方法

將url進(jìn)行轉(zhuǎn)碼，再解碼【本項(xiàng)目中，APP端提供轉(zhuǎn)碼后的url地址，前端使用geturlparams插件，獲得url地址的參數(shù)值】

代碼

//解碼"="號(hào)
dom.token = decodeURI($.query.get("token"));//插件
//獲取無(wú)需解碼的值
dom.msgid = $.query.get("msgid");

問(wèn)題6：原生js的事件監(jiān)聽(tīng)和jquery的事件綁定在ios中失效

問(wèn)題描述

使用事件監(jiān)聽(tīng)或事件綁定時(shí)，由于父元素選擇body或document元素，導(dǎo)致在ios中事件觸發(fā)無(wú)效

解決方法

不使用body和document元素作為父級(jí)元素

問(wèn)題7：ios中日期顯示為NaN

問(wèn)題描述

Date的日期格式，在ios中有兼容性問(wèn)題，ios的日期會(huì)顯示成：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, "/");//將時(shí)間格式的'-'轉(zhuǎn)成'/'形式，兼容iOS

問(wèn)題8：click事件在ios中有問(wèn)題

問(wèn)題描述

click事件在ios點(diǎn)擊觸發(fā)時(shí)，會(huì)選中事件委托的父級(jí)元素模塊【即：由于事件冒泡，并且父級(jí)有默認(rèn)樣式】，并且有一個(gè)透明層，例如

<ul>
 <li>列表項(xiàng)1</li>
 <li>列表項(xiàng)2</li>
 <li>列表項(xiàng)3</li>
</ul>

解析：例如ios用戶(hù)點(diǎn)擊"列表項(xiàng)1"時(shí)，父層的ul會(huì)有一個(gè)透明的樣式

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • Html5 APP中監(jiān)聽(tīng)返回事件處理的方法示例

    這篇文章主要介紹了Html5 APP中監(jiān)聽(tīng)返回事件處理的方法示例的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-03-15

  • 使用html5新特性輕松監(jiān)聽(tīng)任何App自帶返回鍵的示例

    這篇文章主要介紹了使用html5新特性輕松監(jiān)聽(tīng)任何App自帶返回鍵的示例的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-03-13

  • HTML5頁(yè)面中嘗試調(diào)起APP功能

    這篇文章主要介紹了HTML5頁(yè)面中嘗試調(diào)起APP功能,需要的朋友可以參考下
    2017-09-12

  • HTML5 Plus 實(shí)現(xiàn)手機(jī)APP拍照或相冊(cè)選擇圖片上傳功能

    這篇文章主要為大家詳細(xì)介紹了HTML5 Plus的Camera、GalleryIO、Storage和Uploader，實(shí)現(xiàn)手機(jī)APP拍照或相冊(cè)選擇圖片上傳功能的相關(guān)資料，感興趣的小伙伴們可以參考一下
    2016-07-13

  • HTML5打開(kāi)本地app應(yīng)用的方法

    這篇文章主要介紹了HTML5打開(kāi)本地app應(yīng)用的方法，如果你的手機(jī)上安裝有支付寶，那么在訪(fǎng)問(wèn)支付寶手機(jī)網(wǎng)頁(yè)時(shí)就會(huì)自動(dòng)打開(kāi)支付寶app，否則在頁(yè)面上會(huì)提示你進(jìn)行下載app，這是
    2016-03-31

  • html5調(diào)用app分享功能示例（WebViewJavascriptBridge）

    這篇文章主要介紹了html5調(diào)用app分享功能示例（WebViewJavascriptBridge）的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-03-21

最新評(píng)論