移动端H5常见问题以及解决方案

移动端H5常见问题以及解决方案

问题

下面列举了我遇到的一些常规问题,如有遇到其他问题的请在评论区补充,之后我也会实践加以补充,感谢!

以下解决方案,均经过我测试成功,健康安全,请放下食用.由于篇幅问题,某些非核心的解决方案的实现细节暂未谈论,需要的自行研究.

1.iOS滑动不流畅
表现

上下滑动页面会产生卡顿,手指离开页面,页面立即停止运动.整体表现就是滑动不流畅,没有滑动惯性.

产生原因
为什么在iOS的webview中滑动不流畅,它是如何定义的?*

最终我在safari文档里面寻找到了答案(文档链接参考资料项),原来在iOS5.0以及之后的版本,滑动有定义两个值auto和touch,默认值为auto.
-webkit-overflow-scrolling:touch; 当手指从触摸屏上移开,会保持一段时间的滚动.
-webkit-overflow-scrolling:auto; 当手指从触摸屏上移开,滚动会立即停止.

解决方案一

1. 在滚动容器上增加滚动touch方法,将-webkit-overflow-scrolling值设置为touch
2. 设置滚动条隐藏:.container :: webkit-scrolling-scrollbar {display:none}
3. 注意:可能会导致使用postion:fixed、固定定位的元素,随着页面一起滚动

解决方案二

1. 设置外部overflow为hidden,设置内容元素overflow为auto.内部元素body即产生滚动,超出部分隐藏
2. body{overflow-y:hidden} .wrapper{overflow-y:auto}

两者结合使用更加

2.iOS上拉边界下拉出现白色空白

表现

手指按住 屏幕下拉,屏幕顶部会多出一块白色区域.手指按住屏幕上拉,底部多出一块白色区域.

产生原因
在iOS中,手指按住屏幕上下拖动,会触发touchmove事件.这个事件触发的对象时整个webview容器.容器自然会被拖动,剩下的部分会成空白

解决方案一
监听事件禁止滑动
移动端触摸事件有三个,分别定义为:

1. touchstart:手指放在一个dom元素上
2. touchmove:手指拖拽一个dom元素
3. touchend:手指从一个dom元素上移开
   显然我们需要控制的是touchmove事件,由此我在w3c文档中找到了这样一段话

Note that rate at which the user agent sends touchmove events is implementation-definend,and may depend on hardware capabilities and other implementation

if the perventDefault method is called on the first touchmove event of an active touch point,it should pervent any default action caused by any touchmove event associatited width same active touch point,such as scrolling.

touchmove事件的熟读是可以实现定义的,取决于硬件性功能和其他实现细节
preventDefalut方法,阻止同一触点上所有默认行为,比如滚动

由此,我们找到解决方案,通过监听touchmove,让需要滑动的地方滑动,不需要滑动的地方禁止滑动

值得注意的是我们要过滤掉具有滚动容器的元素

实现如下:

document.body.addEventListener('touchmove',(e)=>{
if(e._isScroller) return;
//阻止默认事件
e.preventDefault();
},{
passive:false}
)

解决方案二
滚动妥协填充空白,装饰城其他功能
在很多时候,我们可以不去解决这个问题,换一个思路,根据场景,我们可以将下拉作为一个功能性操作.
比如:下拉后刷新页面

3.页面方法或者缩小不确定性行为
表现
双击或者双支张开手指页面元素,页面会放大或缩小
产生原因
HTML本身会产生放大或缩小的行为,比如在PC浏览器上,可以自动控制页面的放大缩小.但是在移动端,我们是不需要这个行为.所以,我们需要禁止该不确定性行为,来提升用户体验
原理以及解决方案
HTML meta元标签中有个viewport属性,用来控制页面缩放,一般用于移动端.
移动端常规写法

<meta name="viewport" conent="width=device-width,inital-scale=1.0">
因此我们可以设置maximum-scale、minimum-scale与user-scalable=no用来避免这个问题

4.click点击事件延迟与穿透

表现

1. 监听元素click事件,点击元素触发时间延迟约300ms.
2. 点击蒙层,蒙层消失后,下层元素点击触发

产生原因
1.为什么会产生click延时?

iOS中的safari,为了实现双击缩放操作,在单击300ms之后,如果未进行第二次点击,则执行click单击操作.也就是说来判断用户行为是否双击产生的.但是在app中,无论是否需要双击缩放这种行为,click单击都会生成300ms延迟

2.为什么会产生click点击穿透?

双层元素叠加时,上上层元素上绑定touch事件,下层元素绑定click事件.由于click发生在touch之后,点击上层元素,元素消失,下层元素会触发click事件,由此生成了点击穿透的效果

原理以及解决方案

前面已经介绍了,移动设备不仅支持点击,还支持几个触摸事件.那么我们现在基础思路就是同touch事件代替click事件

将click事件替换成touchstart不仅解决了click事件都延迟问题,还解决了穿透问题.因为穿透问题是在touch和click混用时产生的.

在原生中使用
el.addEventListener("touchstart",()=>{
console.log("ok")
},false)

在vue中使用
<button @touchstart="handTouchstart()">点击</button>

那么,是否可以将click事件全部替换成touchstart呢?为什么开源框架还会给出click事件呢

我们想象一种情景,同时需要点击和滑动的场景下.如果将click替换成touchstart会怎么样?

事件触发顺序:touchstart,touchmove,touchend,click.

很容易想象,在我需要touchmove滑动的时候,优先触发了touchstart的点击事件,是不是已经产生了冲突.
所以,在具有滚动的情况下,还是建议使用click处理

解决方案二:使用fastclick库
使用npm/yarn安装后使用
import FastClick from ‘fastclick’
同样,使用fastclick库后,click延迟和穿透的问题都没了

5.软键盘将页面顶起来、收起来未回落问题

表现

1. Android手机中,点击input框时,键盘弹出,将页面顶起来,定制页面样式错乱.
2. 移开焦点,键盘收起,键盘区域空白,未回落

产生原因
我们在app布局中会有个空白的底部.安卓一些版本中,输入弹窗出来,会将absolute和fixed定义的元素.导致可视区域变小,布局错乱.

解决方案

1. 软键盘将页面顶起来的解决方案,主要是通过监听页面高度变化,强制恢复成弹出前的高度

//记录原有的视口高度
const originalHeight = document.body.clientHeight  || document.documentElement.clientHeight

window.onresize = function(){
var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
if(resizeHeight < originalHeight>){
	const container = document.getElementById("container");
	//例如 container.style.height = originalHeight;
}
}

2. 键盘不能不会落问题 在iOS12+和wechat6.7.4+中,而在微信H5开发中是比较常见的Bug.
3. 兼容原理:判断版本类型,更改滚动的可视区域

6.页面生成为图片和二维码

表现
在工作中有需要将页面生成图片或者二维码的需求.可能我们第一想到的,交给后端来生成更加简单,但是这样,我们需要将页面代码全部传给后端,网络性能消耗太大.

解决方案

1. 生成二维码
   使用ORCode生成二维码

import QRcode from 'qrcode';
使用async生成图片
cosnt options = {};
const url = window.location.href;
async url =>
try {
console.log(await QRCode.toDataURL(url,options))} catch(err){
console.log(err);
将await QRCode.toDataURL(url,options)赋值给图片url即可

2. 生成图片
   主要是使用htmlToCanvas生成canvas画布

import html2canvas from 'html2canvas';
HTMLcanvas(document.body).then(function(canvas){
document.body.appendChild(canvas);
});
但是不单单此处就完了,由于canvas的原因,移动端生成出来的图片比较模糊
我们使用一个新的canvas方法多倍生成,放入一杯容器里面,达到更加清晰的效果,通过超链接下载图片,下载文件简单实现,更完整的实现方法之后更新

const scaleSize = 2;
const neewCanvas = document.createElement("canvas")
const target = document.querySelector('div');
const width = parseInt(window.getComputedStyle(target).width);
const height parseInt(window.getComputedStyle(target).height);
newCanvas.width = width* scaleSize;
newCanvas.height= height*scaleSize;
newCanvas.width = width + 'px'
newCanvas.style.height = height+'px'
const context = newCanvas.getContext('2d")
context.scale(scaleSize,scaleSzie);
html2canvas(document.querySelector('.demo),{canvas:newCanvas}).then(function(canvas){
//简单的通过超链接设置下载功能
document.querySelector("btn").setAttribute('href',canvas.toDataUrl()}
}
// 根据需要设置scaleSize大小

** 7.微信公众号分享**

表现
在微信公众号H5开发中,页面内部点击分享按钮调用SDK,方法不生效

解决方法

1. 加一层蒙层,做分享引导
   因为页面内部点击分享按钮无法直接调用,二分享功能需要点击右上角更多来操作.
   然后用户可能不知道通过右上角

8.H5调试相关方案策略

表现
调试代码一般就是为了查看数据和定位bug,分为两种常见,一种是开发和测试时调试,一种是生成环境上调试.

为什么有生产环境上调试呢,有些时候测试环境没法复现这个bug,测试环境和生产环境不一致,此时就需要紧急生产调试.

在pc端开发时,我们直接调出控制台,使用浏览器提供的工具操作devtools或者查看日志.但是在App内部我们怎么做呢?

原理与解决方案

1. vconsole控制台插件

使用很简单
import vconsole from vconsole'
new Vconsole()

上述方法仅用于开发和测试,生产环境中不允许出现,所以,使用时需要对环境进行判断
import Vconsole from 'vconsole'
if(process.env.NODE_ENV !=='production'){
new Vconsole()
}