浅谈html5与APP混合开发遇到的问题总结

2020-04-25 08:16:28易采站长站整理

解决方法

使用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点击触发时,会选中事件委托的父级元素模块【即:由于事件冒泡,并且父级有默认样式】,并且有一个透明层,例如