浅谈html5与APP混和开发设计遇到的难题总结

日期:2021-02-23 类型:科技新闻 

关键词:在线编辑图片,什么软件可以抠图,在线图片,p图软件电脑版,在线抠图

情况

在企业参加1个原生态APP和h5混和开发设计的新项目,自己在新项目中负责h5一部分,现将新项目中遇到的难题总结以下:

实际难题

难题1:网页页面翻转条难题

难题叙述

web网页页面在PC访问器上访问时有翻转条;可是,在挪动端访问器开启时,沒有翻转条

处理方式

将网页页面的最外层(我1般在写网页页面时,会在body标识内写1个大器皿,用于储放网页页面的內容)设定overflow:auto/scroll;而且不可以设定height特性的值(height:100%也不好)

事例

<body>
 <div style="overflow:scroll/auto;">
  //网页页面內容
 </div>
</body>

难题2:touchstart 和 touchend 恶性事件的应用

难题叙述

引进touch.js文档,应用touchstart和touchend恶性事件完成互动实际效果时,在一部分手机上出現恶性事件开启无效的难题[比如:低版本号的荣誉手机上]

处理方式

方式1:"removeEventListener"和"addEventListener"1起应用

方式2:加上e.preventDefault(); 阻拦一部分手机上默认设置自动跳转

法3:Jquery的on完成恶性事件关联

表明:法1与法2全是原生态JS应用addEventListener完成恶性事件监视;而且dom元素应用touchstart和touchend恶性事件时,必须融合恶性事件关联或恶性事件监视1起应用,不然js一部分会抛出出现异常

编码

//法1:
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);

//法2:
document.getElementById('list5').addEventListener('touchstart',function(e){
 e.preventDefault();
}, false);

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

难题3:长按闪退的难题

场景复原

有1个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⑴px{
    display: block;
    position:absolute;
    left: 0;
    width: 100%;
    content: ' ';
}
.border⑴px{
    position: relative;
    &::after{
        @extend %border⑴px;
        bottom: 0;
        border-top: 1px solid #ccc;
    }
    &::before{
        @extend %border⑴px;
        top: 0;
        border-bottom: 1px solid #ccc;
    }
}

@media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){
    .border⑴px{
        &::after{
            -webkit-transform: scaleY(0.7);
            transform: scaleY(0.7);
        }
    }
}

@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
    .border⑴px{
        &::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⑴2⑵6 19:36:00"文件格式,后边1种文件格式,在ios中显示信息Nan (Android中都可以以显示信息一切正常)

编码

var time = "2017⑴2⑵6 19:36:00";
time = time.replace(/\-/g, "/");//将時间文件格式的'-'转成'/'方式,适配iOS

难题8:click恶性事件在ios中有难题

难题叙述

click恶性事件在ios点一下开启时,会选定恶性事件授权委托的父级元素控制模块【即:因为恶性事件冒泡,而且父级有默认设置款式】,而且有1个全透明层,比如

<ul>
 <li>目录项1</li>
 <li>目录项2</li>
 <li>目录项3</li>
</ul>

分析:比如ios客户点一下"目录项1"时,父层的ul会有1个全透明的款式

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。