H5调用SDK相关问题及解决方案H5调试相关方案与策略

H5调用SDK相关问题及解决方案

H5调试相关方案和策略

移动H5相关基础技术概述

原则与实践

前两篇文章详细讨论了1px问题和响应式布局问题，并给出了原理和解决方案。

为防止丢失，点赞收藏后跳转到快捷频道：**1px**[1]频道和响应式布局[2]频道

接下来，我们来看看其他问题的原理和解决方法。

以下解决方案均经本人测试成功，健康安全。请把它们放下来吃。由于篇幅原因，一些非核心方案的实现细节暂未讨论，需要自己研究。

iOS 滑动不流畅

表现

上下滑动页面会导致卡顿，手指离开页面，页面立即停止移动。整体表现是滑动不顺畅，没有滑动惯性。

原因

为什么在 iOS 中滑动不流畅，它是如何定义的？

最终我在文档中找到了答案（文档链接在参考资料部分）。

原来在iOS 5.0 及以后的版本中，为滑动定义了两个值，默认值为 .

解决方案

1.在滚动容器上添加滚动触摸方法

将值设置为

设置滚动条隐藏：

可能会导致定位固定的元素随页面滚动

2.设置

将外部设置为 ，将内容元素设置为 。如果内部元素超出主体，则发生滚动，超出主体的部分被隐藏。

两者结合效果更佳！

iOS上拉边框下拉出现白色空白

表现

用手指按住屏幕往下拉，屏幕顶部会出现一个白色区域。将手指按住屏幕并向上拉，底部会有一个额外的白色区域。

原因

在 iOS 中，在屏幕上上下拖动手指会触发一个事件。这个事件触发的对象是整个容器，容器自然会被拖拽，其余的都是空白。

解决方案

1. 监听事件禁止滑动

共有三个移动触摸事件，定义为

显然我们需要控制的是事件，所以我在W3C文档中找到了这段话

请注意，用户代理发送的速率是 – ，并且可能 on 和 other 。

如果 是在一个接触点的第一个事件上，它就可以通过任何具有相同接触点的事件，例如 。

事件的速度由实现定义，取决于硬件功能和其他实现细节

防止在同一接触点上的所有默认行为（例如滚动）的方法。

由此，我们找到了解决方案，通过监控，让需要滑动的地方滑动，不需要滑动的地方禁止滑动。

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

实现如下：

2. 滚动折衷填补空白，装饰其他功能

在很多情况下，我们无法解决这个问题h5页面不能上下滑动，改变我们的思维方式。根据场景，我们可以使用下拉菜单作为功能操作。

例如：下拉后刷新页面

页面放大或缩小不确定行为

表现

双击或捏合页面元素，页面将放大或缩小。

原因

HTML 本身会产生放大或缩小行为。例如，在 PC 浏览器上，您可以自由控制页面的放大或缩小。但是在移动设备上，我们不需要这种行为。因此，我们需要禁止这种不确定的行为，以改善用户体验。

原则和解决方案

HTML元标记标准中有一个属性，用来控制页面的缩放，一般用在移动端。如下图MDN所示

移动端常规书写

所以我们可以设置，并使用来避免这个问题

点击点击事件延迟和穿透

表现

侦听元素事件，然后单击元素以触发大约 10 秒的延迟。

点击遮罩层，遮罩层消失后，底层元素点击触发。

原因

为什么会有点击延迟？

在iOS中，为了实现双击缩放操作，在点击300ms后，如果没有进行第二次点击，则进行点击操作。也就是说，判断用户行为是否是由双击引起的。但是，在应用程序中，无论是否需要双击缩放行为，单击都有 300 毫秒的延迟。

为什么点击点击通过？

当两层元素叠加时，事件绑定到上层元素，事件绑定到下层元素。由于发生在后面，当点击上层元素时，该元素消失，下层元素会触发一个事件，从而产生点击穿透的效果。

原则和解决方案

解决方案一：将click替换为

如前所述，移动设备不仅支持点击，还支持多个触摸事件。所以我们现在的基本思路是用事件来代替事件。

替换它不仅解决了延迟事件的问题，还解决了穿透问题。因为混合时会产生穿透问题。

在本地使用

在 vue 中使用

在开源解决方案中，还提供了事件。比如vant中的组件

那么，是否可以用所有事件替换事件？为什么开源框架仍然会给出事件？

让我们想象一个需要同时点击和滑动的情况。如果换成 怎么办？

事件触发顺序： , , , .

不难想象，当我需要滑动时，最先触发的点击事件发生了冲突？

因此，在滚动的情况下，建议使用处理。

下面的处理也在下一个开源库中进行。对于和，截取了部分源代码。

主要目的是确保在使用合成事件时，它不在滚动的父元素下。

解决方案二：使用库

安装后使用

同样，使用库后，延迟和穿透问题都没有了

根据我的实践，只要涉及到一个开源库，那么我们就必须了解它的实现原理。主要是把已有的原生事件集合封装成更兼容的事件集合。

源码 [3] 核心代码不长h5页面不能上下滑动，不到1000行。有兴趣了解一下！

软键盘将页面向上推，但不向后推

表现

在手机上，当点击框时，键盘弹起，页面上推，导致页面样式混乱。

移开焦点时，键盘缩回，键盘区域为空白，不回退。

原因

我们将在应用程序布局中有一个固定的底部。在某些版本的中，输入弹窗会解压并定位元素。导致可见区域变小，布局混乱。

原则和解决方案

软键盘上推页面的解决方案主要是通过监听页面的高度变化，强制恢复到弹出前的高度。

兼容原则，1.判断版本类型2.改变滚动的可见区域

，恢复到原始视口

X系列安全区适配问题

表现

头部刘海的侧面或底部，有刘海遮挡文字，或黑底或白底的空白区域。

原因

X及其以上系列均采用刘海屏设计和全面屏手势。头部、底部和侧面都需要特殊处理。以适应 X 的特殊情况。

解决方案

设置安全区域，填写危险区域，不要在危险区域进行操作和内容展示。

危险区域是指头部的不规则区域，底部的单杠区域，左右触发区域。

具体操作如下： 设置标签为，获取所有区域填充。判断设备是否属于X，在底部添加适配层

有3个值：

：该值不影响初始布局视口，整个网页都是可见的。

：视口被缩放以适合内联显示的最大矩形。

：视口被缩放以填充设备显示。强烈建议使用变量，以确保重要内容不会出现在显示之外。

设置-适合

添加适配层

使用变量

, , , 由四个环境变量组成，它们定义了视口边缘内的矩形， , 和 , 以便可以安全地放入内容而不会被非矩形显示器截断。对于矩形视口，例如普通的笔记本电脑显示器，该值等于 0。对于非矩形的显示器（例如圆形表盘、屏幕），在由用户代理设置的四个值形成的矩形内，一切都是可见的。

用法是，第一个参数是自定义区域，第二个是替代值。

用法是该函数是在不生效时给一个替代值。

它是在2017-2018年起草的，是否已经标准化尚不清楚。其他iOS浏览器版本是否存在此功能未知，作为兼容进程添加。

有关详细信息，请参阅文章末尾的参考资料。

兼容性

页面生成为图片和二维码问题

表现

在工作中，需要为页面生成图片或二维码。可能我们第一时间想到的，交给后端去生成比较容易。但是这样一来，我们需要把所有的页面代码都传给后端，这样会消耗太多的网络性能。

解决方案

生成二维码

使用生成二维码

只需将其分配给图像

生成图像

主要使用生成的画布

但它并不止于此，因为是的。移动端生成的图片比较模糊。

我们使用一种新的方法生成多次，并放入一个双容器中，以达到更清晰的效果。通过超链接下载图片和下载文件很简单，后面会更新更完整的实现。

根据需要设置大小

文章来源:https://new.qq.com/omn/20211215/20211215A04OYY00.html

------本页内容已结束，喜欢请分享------

感谢您的来访，获取更多精彩文章请收藏本站。