APP内嵌H5开发常见问题及解决方案详解-七爪网

担任前端工程师的角色，我在多个H5项目的开发过程中遭遇了不少兼容性的难题。这些问题既复杂又麻烦，严重阻碍了项目的推进，让人感到非常烦恼。现在，我将逐一阐述这些问题的具体情况以及相应的解决措施。

位置固定元素随页面滚动

-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */
-webkit-overflow-scrolling: auto; /* 当手指从触摸屏上移开，滚动会立即停止 */

.wrapper {
    -webkit-overflow-scrolling: touch;
}

这个问题让人挺头疼。在开发过程中，我们遇到一个问题，就是原本应该固定位置的元素却随着页面滚动。原因在于事件触发的对象是整个容器。在复杂的页面布局中，这种情况很常见，导致用户体验相当糟糕。要解决这个问题，我们需要找到事件的根本原因，查阅W3C文档是非常必要的。我们可以通过调整事件触发逻辑或修改样式来纠正这个定位错误。比如，可以重新设置元素父级容器的样式。

body {
    overflow-y: hidden;
}
.wrapper {
    overflow-y: auto;
}

不同操作系统和浏览器的表现各有不同。比如在Windows和Mac系统上常用的浏览器，在参与某些大型项目时，会发现即便是相同的固定定位元素，在不同系统中的显示效果也会出现区别，这就需要我们进行更多的测试工作。

1. touchstart ：手指放在一个DOM元素上。
2. touchmove ：手指拖曳一个DOM元素。
3. touchend ：手指从一个DOM元素上移开。

HTML页面缩放相关问题

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

页面缩放确实是个挺考验人的技术活。HTML自身具备放大和缩小的功能，在电脑浏览器里，我们还能随心所欲地调整缩放。元标签规范里也有相应的属性来处理这种情况，通常在移动设备上效果更为显著。举个例子，如果在制作手机端的H5页面时，这个属性没设置好，就可能造成页面显示不正常，或者用户操作起来不那么顺畅。

在手机端电商促销H5场景的实际开发中，由于未考虑页面缩放，导致部分商品图片出现了显示不全的情况。同时，还需准确判断用户是否通过双击操作触发缩放。务必仔细研读文档中的规范，以防陷入潜在问题。

Click单击的300ms延迟及穿透问题

App中存在一个相当棘手的遗留问题。点击操作在App中会带来300毫秒的延迟，不论是否需要双击缩放。下层元素会因上层元素被点击后消失而触发点击事件，即所谓的点击穿透，处理起来相当困难。例如，在电商类H5的App菜单点击等场景，就可能会遇到此类问题。

解决问题的关键在于以touch事件替换click事件，但随之而来的是新的挑战。尤其在滚动过程中，两者可能会出现矛盾。以新闻资讯H5页面为例，若滑动时先触发了点击事件，用户体验将大打折扣。因此，在滚动时，推荐继续采用click事件处理。利用库来处理也是一条不错的途径，这样可以有效解决click事件的延时和穿透问题。

软键盘顶起页面及不能回落

使用软键盘将页面顶起后，页面便无法恢复原状，这种情况在iOS12及后续版本以及微信H5开发中较为普遍。以某企业内部使用的办公审批H5应用为例，在iOS设备上填写表单时，键盘弹出导致页面上升，使用完毕后键盘却无法恢复到原位。解决这一问题的方法是监测页面高度的变化。

el.addEventListener("touchstart", () => { console.log("ok"); }, false);

在兼容性处理上，需要识别软件版本并调整滚动显示区域。这时，那四个设置视口边界的变量就变得重要了，它们确保内容能够完整显示，不会被截断。至于其他iOS浏览器的版本是否支持，目前尚不清楚，但为了兼容性考虑，先加入这部分代码总是没有错的。

页面生成图片或二维码的效率问题

在开发过程中，若需要生成页面图片或二维码，若将整个页面代码传输至后端，将极大消耗网络资源，使得整个流程变得极为缓慢。以教育直播H5平台为例，若想为课程生成分享二维码，若沿用传统方法，资源消耗之大甚至可能使服务器不堪重负。

有一种新型的多倍生成技术，将其置于容量为一倍的容器中，能更清晰地呈现效果。目前，用户可轻松通过超链接下载图片文件，未来还将提供更为完善的下载手段。经过多次测试与比较，这一新方法能有效减少网络性能的损耗。

提问环节

// If the target element is a child of a scrollable layer (using -webkit-overflow-scrolling: touch) and:
// 1) the user does a fling scroll on the scrollable layer
// 2) the user stops the fling scroll with another tap
// then the event.target of the last 'touchend' event will be the element that was under the user's finger
// when the fling scroll was started, causing FastClick to send a click event to that layer - unless a check
// is made to ensure that a parent layer was not scrolled before sending a synthetic click (issue #42).
this.updateScrollParent(targetElement);

项目开发中，前端工程师们是否遭遇过因兼容性问题而引发客户强烈不满的情况？欢迎点赞、转发，并在评论区积极参与讨论。

// Don't send a synthetic click event if the target element is contained within a parent layer that was scrolled
// and this tap is being used to stop the scrolling (usually initiated by a fling - issue #42).
scrollParent = targetElement.fastClickScrollParent;
if (scrollParent && scrollParent.fastClickLastScrollTop !== scrollParent.scrollTop) {
	return true;
}

相关文章

微信