首先, 这是我第一次在这个平台上写文章, 如果有不好的地方, 还请各位指点哦, 谢谢 PS: 本人小白一枚
背景
在公司参与一个原生 APP 和 h5 混合开发的项目, 本人在项目中负责 h5 部分, 现将项目中遇到的问题总结如下:
具体问题
问题 1: 页面滚动条问题
问题描述
web 页面在 PC 浏览器上浏览时有滚动条; 但是, 在移动端浏览器打开时, 没有滚动条
解决方法
将页面的最外层 (我一般在写页面时, 会在 body 标签内写一个大容器, 用于存放页面的内容) 设置 overflow:auto/scroll; 并且不能设置 height 属性的值(height:100% 也不行)
例子
- <body>
- <div style="overflow:scroll/auto;">
- // 网页内容
- </div>
- </body>
问题 2:touchstart 和 touchend 事件的使用
问题描述
引入 touch.js 文件, 使用 touchstart 和 touchend 事件实现交互效果时, 在部分手机出现事件触发失效的问题[例如: 低版本的荣耀手机]
解决方法
方法 1:"removeEventListener" 和 "addEventListener" 一起使用
方法 2: 添加 e.preventDefault(); 阻止部分手机默认跳转
法 3:Jquery 的 on 实现事件绑定
说明: 法 1 与法 2 都是原生 JS 使用 addEventListener 实现事件监听; 并且 dom 元素使用 touchstart 和 touchend 事件时, 需要结合事件绑定或者事件监听一起使用, 否则 js 部分会抛出异常
代码
- // 法一:
- 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
问题描述
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 点击触发时, 会选中事件委托的父级元素模块即: 由于事件冒泡, 并且父级有默认样式, 并且有一个透明层, 例如
- <ul>
- <li > 列表项 1</li>
- <li > 列表项 2</li>
- <li > 列表项 3</li>
- </ul>
解析: 例如 ios 用户点击 "列表项 1" 时, 父层的 ul 会有一个透明的样式
解决方法
添加 e.stopPropagation(); // 阻止冒泡
如果还是无法解决问题, 可以修改成 touch 事件
总结
以上是我在完成项目时, 遇到的问题以及解决方法[PS: 遇到问题时, 通过搜索, 参考了很多大牛的方法解决问题的, 再次表示感谢], 如果有写的不足的地方, 欢迎指出哦, 谢谢啦
来源: https://juejin.im/post/5aa8b00c51882555627cfa0e