app混合开发模式,前端混合app开发
背景
公司参与了一个native APP和h5的混合开发项目，我负责项目的h5部分。现将项目中遇到的问题总结如下：
具体问题
问题1：页面滚动条问题
问题描述
在PC浏览器上浏览时网页有滚动条；但是，当移动浏览器打开时，没有滚动条
解决办法
设置溢出：auto/scroll到页面最外层(我写页面的时候一般会在body标签里写一个大容器来存放页面的内容)；并且不能设置height属性的值(甚至高度：100%)。
例子
body div style= overflow:scroll/auto；//Web content /div/body问题2：touchstart 和 touchend 事件的使用
问题描述
当引入touch.js文件，使用touchstart和touchend事件实现交互效果时，部分手机存在事件触发失败的问题【比如HONOR的下版本】。
解决办法
方法1:“remove event listener”和“addEventListener”一起使用。
方法二：添加e . prevent default()；防止部分手机默认跳转。
方法3: jQuery的on实现事件绑定
说明：方法1和方法2都是原生JS，使用addEventListener实现事件监控；而且当dom元素使用touchstart和touchend事件时，需要配合事件绑定或事件监控一起使用，否则js会抛出异常。
密码
//方法1:document . getelementbyid( list 5 )。AddEventListener (touchstart ，callback，false)；document.getElementById(list5 )。removeEventListener( touch start ，callback，false)；document.getElementById(list5 )。addEventListener(touchend ，callback，false)；document.getElementById(list5 )。removeEventListener(touchend ，callback，false)；//方法2:document . getelementbyid( list 5 )。AddEventListener (touchstart ，函数(e){ e . prevent default())；}，假)；document.getElementById(list5 )。addEventListener(touchend ，函数(e){ e . prevent default()；}，假)；问题3：长按闪退的问题
场景还原
有一个XXX列表页面。当你按住列表页面上的列表项(触摸文本)时，它会在较低版本的手机中闪退。
解决办法
Js部分：事件触发时添加e . prevent default()；以防止默认行为。
Css部分：添加禁止文本复制的代码。
密码
//js部分：e . prevent default()；//css部分：-webkit-touch-callout:无；//解决闪回//禁止复制-moz-user-select:none；-khtml-user-select:无；用户选择：无；问题4: 移动端1px的问题
问题描述
因为不同手机每英寸像素不同，css中的1px不等于移动设备中的1px。项目中使用js和rem进行移动端的屏幕适配，所以产生了0.5px的情况，导致了手机低版本无法显示0.5px边框。
解决办法
用css解决1px问题，直接把：border-width:1px写到需要设置为1px的dom元素中；
密码
//HTML part:div class= 1 /div//CSS part: class 1 { border:1 px solid # CCC；}//css部分/*移动端正常显示1px问题start */% border-1px { display:block；位置：绝对；左：0；宽度：100%；内容：“”；}.border-1px{ position:相对；*在{ @ extend % border-1px；之后；底部：0；border-top:1px solid # CCC；}:在{ @ extend % border-1px；之前；top:0；边框-底部：1px纯色# ccc} } @ media(-WebKit-min-device-pixel-ratio:1.5)，(min-device-pixel-ratio:1.5){。border-1px {:after {-WebKit-transform:scaleY(0.7)；变换：scaleY(0.7)；} } } @ media(-WebKit-min-device-pixel-ratio:2)，(min-device-pixel-ratio:2){。border-1px {:after {-WebKit-transform:scaleY(0.5)；变换：scaleY(0.5)；}}}/*移动终端正常显示1px问题结束*/问题5：js无法正确解析到url包含"="号的参数值
问题描述
在项目中，由于数据请求的参数值是从url地址中获取的，并且参数值中含有=符号，所以无法正确解析为参数值(ps:js使用=符号来划分url的参数)
解决办法
对url进行转码，然后解码【本项目中，APP提供转码后的url地址，前端使用geturlparams插件获取url地址的参数值】
密码
//解码DOM。token=decoduri ($。带有“=”号的query . get( token )；//plugin//获取不需要解码的值DOM . msgid=$ . query . Get( msgid )；问题6：原生js的事件监听和jquery的事件绑定在ios中失效
问题描述
当使用事件监控或事件绑定时，事件触发在ios中无效，因为父元素选择了body或document元素。
解决办法
不要使用body和document元素作为父元素。
问题7：ios中日期显示为NaN
问题描述
Date的日期格式在ios中存在兼容性问题，ios的日期会显示为：NaN
解决办法
解决方案：ios中支持 2017/12/26 19:36:00 ，但不支持 2017-12/26 19: 36: 00 格式。后一种格式在ios中显示NAN(安卓可以正常显示)
密码
var time= 2017-12-26 19:36:00 ；time=time.replace(/\-/g，/)；//将时间格式的-转换为/形式，兼容iOS问题8：click事件在ios中有问题
问题描述
当ios click触发click事件时，会选择事件委托的父元素模块[即事件冒泡，父元素有默认样式]，有一个透明层，比如
Ul列表项1/li li列表项2/li li列表项3/li/ul分析：例如，当一个ios用户点击‘列表项1’时，父层的ul会有一个透明样式。
这就是本文的全部内容。希望对大家的学习和支持有帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。