H5常见问题及解决方案手册(1)，手机网站前端开发

<button @touchstart=“handleTouchstart()”>点击

开源解决方案中，也是既提供了  事件，又提供了 事件。如 vant 中的  组件

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

我们想象一种情景，同时需要点击和滑动的场景下。如果将  替换成  会怎样？

事件触发顺序: , , , 。

很容易想象，在我需要滑动时候，优先触发了的点击事件，是不是已经产生了冲突呢？

所以呢，在具有滚动的情况下，还是建议使用  处理。

在接下来的开源库中也做了如下处理。针对  和 ，截取了部分源码。

// 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;

}

主要目的就是，在使用  合成  事件时，保证其不在滚动的父元素之下。

解决方案二：使用 fastclick 库

使用  安装后使用

import FastClick from ‘fastclick’;

FastClick.attach(document.body, options);

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

按照我的惯例，只要涉及开源库，那么我们一定要去了解它实现的原理。主要是将现有的原生事件集合封装合成一个兼容性较强的事件集合。

fastclick源码 核心代码不长， 1000 行不到。有兴趣可以了解一下!

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

---

表现

Android 手机中，点击  框时，键盘弹出，将页面顶起来，导致页面样式错乱。

移开焦点时，键盘收起，键盘区域空白，未回落。

产生原因

我们在app 布局中会有个固定的底部。安卓一些版本中，输入弹窗出来，会将解压  和  定位的元素。导致可视区域变小，布局错乱。

原理与解决方案

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

// 记录原有的视口高度

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;

}

}

键盘不能回落问题出现在 iOS 12+ 和 wechat 6.7.4+ 中，而在微信 H5 开发中是比较常见的 Bug。

兼容原理，1.判断版本类型 2.更改滚动的可视区域

const isWechat = window.navigator.userAgent.match(/MicroMessenger/([d.]+)/i);

if (!isWechat) return;

const wechatVersion = wechatInfo[1];

const version = (navigator.appVersion).match(/OS (d+)(d+)?(d+)?/);

// 如果设备类型为iOS 12+ 和wechat 6.7.4+，恢复成原来的视口

if (+wechatVersion.replace(/https://blog.csdn.net/2401_84093899/article/details/g, ‘’) >= 674 && +version[1] >= 12) {

window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight));

}

，其中恢复成原来的视口

iPhone X系列安全区域适配问题

---

表现

头部刘海两侧区域或者底部区域，出现刘海遮挡文字，或者呈现黑底或白底空白区域。

产生原因

iPhone X 以及它以上的系列，都采用刘海屏设计和全面屏手势。头部、底部、侧边都需要做特殊处理。才能适配 iPhone X 的特殊情况。

解决方案

设置安全区域，填充危险区域，危险区域不做操作和内容展示。

危险区域指头部不规则区域，底部横条区域，左右触发区域。

 有 3 个值分别为：

• ：此值不影响初始布局视图端口，并且整个web页面都是可查看的。

• ：视图端口按比例缩放，以适合显示内嵌的最大矩形。

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

设置 viewport-fit 为 

增加适配层

使用  变量

/* 适配 iPhone X 顶部填充*/

@supports (top: env(safe-area-inset-top)){

body,

.header{

padding-top: constant(safe-area-inset-top, 40px);

padding-top: env(safe-area-inset-top, 40px);

padding-top: var(safe-area-inset-top, 40px);

}

}

/* 判断iPhoneX 将 footer 的 padding-bottom 填充到最底部 */

@supports (bottom: env(safe-area-inset-bottom)){

body,

.footer{

padding-bottom: constant(safe-area-inset-bottom, 20px);

padding-bottom: env(safe-area-inset-bottom, 20px);

padding-top: var(safe-area-inset-bottom, 20px);

}

}

, , ,  由四个定义了视口边缘内矩形的 , ,  和  的环境变量组成，这样可以安全地放入内容，而不会有被非矩形的显示切断的风险。对于矩形视口，例如普通的笔记本电脑显示器，其值等于零。对于非矩形显示器（如圆形表盘， 屏幕），在用户代理设置的四个值形成的矩形内，所有内容均可见。

其中  用法为 ，第一个参数为自定义的区域，第二个为备用值。

其中  用法为 ，作用是在  不生效的情况下，给出一个备用值。

 被  2017-2018 年为草稿阶段，是否已被标准化未知。而其他iOS 浏览器版本中是否有此函数未知，作为兼容处理而添加进去。

详情请查看文章末尾的参考资料。

兼容性

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

---

表现

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

解决方案

生成二维码

使用 QRCode 生成二维码

import QRCode from ‘qrcode’;

// 使用 async 生成图片

const options = {};

const url = window.location.href;

async url => {

try {

console.log(await QRCode.toDataURL(url, options))

} catch (err) {

console.error(err);

}

}

将  赋值给 图片  即可

生成图片

主要是使用  生成  画布

import html2canvas from ‘html2canvas’;

html2canvas(document.body).then(function(canvas) {

document.body.appendChild(canvas);

});

但是不单单在此处就完了，由于是  的原因。移动端生成出来的图片比较模糊。

我们使用一个新的  方法多倍生成，放入一倍容器里面，达到更加清晰的效果，通过超链接下载图片 下载文件简单实现，更完整的实现方式之后更新

const scaleSize = 2;

const newCanvas = 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 = widthh * scaleSize;

newCanvas.style.width = width + “px”;

newCanvas.style.height =width + “px”;

const context = newCanvas.getContext(“2d”);

context.scale(scaleSize, scaleSize);

html2canvas(document.querySelector(‘.demo’), { canvas: newCanvas }).then(function(canvas) {

// 简单的通过超链接设置下载功能

document.querySelector(“.btn”).setAttribute(‘href’, canvas.toDataURL());

}

根据需要设置  大小

微信公众号分享问题

---

表现

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

解决方案

解决方法：添加一层蒙层，做分享引导。

因为页面内部点击分享按钮无法直接调用，而分享功能需要点击右上角更多来操作。

然后用户可能不知道通过右上角小标里面的功能分享。又想引导用户分享，这时应该怎么做呢？

技术无法实现的，从产品出发。

如果技术上实现复杂，或者直接不能实现。不要强行钻牛角尖哦，学会怼产品，也是程序员必备的能力之一。

H5 调用 SDK 相关解决方案

---

产生原因

在 Hybrid App 中使用 H5 是最常见的不过了，刚接触的，肯定会很生疏模糊。不知道 H5 和 Hybrid 是怎么交互的。怎样同时支持 iOS 和 Android 呢？现在来谈谈 Hybrid 技术要点，原生与 H5 的通信。

解决方案

文档见参考资料

SDK小组 提供方法

1. 注册方法 

bridge.register(‘enterApp’, function() {

broadcast.emit(‘ENTER_APP’)

})

1. 回调方法 

export const getSDKVersion = () => bridge.call(‘BLT.getSDKVersion’)

事件监听与触发法

const broadcast = {

on: function(name, fn, pluralable) {

this._on(name, fn, pluralable, false)

},

once: function(name, fn, pluralable) {

this._on(name, fn, pluralable, true)

},

_on: function(name, fn, pluralable, once) {

let eventData = broadcast.data

let fnObj = { fn: fn, once: once }

if (pluralable && Object.prototype.hasOwnProperty.call(eventData, ‘name’)) {

eventData[name].push(fnObj)

} else {

eventData[name] = [fnObj]

}

return this

},

emit: function(name, data, thisArg) {

let fn, fnList, i, len

thisArg = thisArg || null

fnList = broadcast.data[name] || []

for (i = 0, len = fnList.length; i < len; i++) {

fn = fnList[i].fn

fn.apply(thisArg, [data, name])

if (fnList[i].once) {

fnList.splice(i, 1)

i–

len–

}

}

return this

},

data: {}

}

export default broadcast

踩坑注意

方法调用前，一定要判断 SDK 是否提供该方法 如果 Android 提供该方法，iOS 上调用就会出现一个方法调用失败等弹窗。怎么解决呢？

提供一个判断是否 Android、iOS。根据设备进行判断

export const hasNativeMethod = (name) =>

return bridge.hasNativeMethod(‘BYJ.’ + name)

}

export const getSDKVersion = function() {

if (hasNativeMethod(‘getSDKVersion’)) {

bridge.call(‘BYJ.getSDKVersion’)

}

}

同一功能需要iOS，Android方法名相同，这样更好处理哦

H5 调试相关方案策略

---

表现

调试代码一般就是为了查看数据和定位 bug。分为两种场景，一种是开发和测试时调试，一种是生产环境上调试。

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

在 PC 端开发时，我们可以直接掉出控制台，使用浏览器提供的工具操作devtools或者查看日志。但是在 App 内部我们怎么做呢？

原理与解决方案

1.  控制台插件

使用方法也很简单

import Vconsole from ‘vconsole’

new Vconsole()

有兴趣看看它实现的基本原理，我们关注的点应该在 vsconsole 如何打印出我们所有 log 的 腾讯开源vconsole

上述方法仅用于开发和测试。生产环境中不允许出现，所以，使用时需要对环境进行判断。

import Vconsole from ‘vconsole’

if (process.env.NODE_ENV !== ‘production’) {

new Vconsole()

}

2. 代理 + spy-debugger

操作稍微有点麻烦，不过我会详细写出，大致分为 4 个步骤

1. 安装插件(全局安装)

sudo npm install spy-debugger -g

1. 手机与电脑置于同一 wifi 下，手机设置代理

设置手机的 HTTP 代理，代理 IP 地址设置为 PC 的 IP 地址，端口为的启动端口

spy-debugger 默认端口：9888

Android ：设置 - WLAN - 长按选中网络 - 修改网络 - 高级 - 代理设置 - 手动

IOS ：设置 - Wi-Fi - 选中网络, 点击感叹号, HTTP 代理手动

1. 手机打开浏览器或者 app 中 H5 页面

2. 打开桌面日志网站进行调试，点击 npm 控制台监听地址。查看抓包和 H5 页面结构

这种方式可以调试生成环境的页面，不需要修改代码，可以应付大多数调试需求

推荐阅读

H5 移动端调试全攻略

END

关注下方「前端开发博客」，回复 “电子书”

领取27本电子书

❤️ 看完两件事

---

如果你觉得这篇内容对你挺有启发，我想邀请你帮我两个小忙：

1. 点个「在看」，让更多的人也能看到这篇内容（喜欢不点在看，都是耍流氓 -_-）

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

分享一些简单的前端面试题以及学习路线给大家，狂戳这里即可免费领取

忙：

1. 点个「在看」，让更多的人也能看到这篇内容（喜欢不点在看，都是耍流氓 -_-）

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-alXnS3IT-1712103130352)]

[外链图片转存中…(img-VfRahPzK-1712103130352)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

[外链图片转存中…(img-ifv4cXXJ-1712103130353)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

分享一些简单的前端面试题以及学习路线给大家，狂戳这里即可免费领取

[外链图片转存中…(img-KAJkrxIn-1712103130353)]