H5页⾯常见开发问题总结
摘要
最近在开发H5，就在开发过程中发现H5存在着⼀些坑，所以就总结⼀下在开发过程中遇到的坑以及解决办法，本⽂会持续的更新，同时也欢迎⼤家⼀起评论分享H5开发中遇到的坑、解决办法等。
常见的通⽤的H5开发问题
·⾃定义分享缩略图失效
问题现象：⾃定义分享时，需要更换新的缩略图，但是在更换上新缩略图后，分享链接给朋友时，缩略图显⽰失效。具体问题如下图所⽰：
解决⽅案：经过debugger对⽐新旧两张缩略图的信息发现，当缩略图的⼤⼩太⼩时，⽆法获取到正常的缩略图地址url。调研了解到⾃定义分享时，缩略图⼤⼩需要10K以上，调整图⽚⼤⼩信息即可解决问题。
IOS端-H5开发问题
· 输⼊法隐藏页⾯留⽩
问题现象：iOS端软键盘失去焦点（隐藏）后，页⾯不会回弹，页⾯下⽅会留下输⼊法块的⽩⾊块。
暴⼒解决⽅案：软键盘收起（隐藏）后，滚动⼀下页⾯，页⾯中的留⽩块块就会消失。所以只要在输⼊完毕后实现⼀下‘滚动’的操作就可以解决问题。
React(React Hook)暴⼒开发解决⽅案：（代码实现部分）
// 输⼊键盘隐藏回弹
useEffect(() => {
document.addEventListener('focusout', function(e) {
let u = navigator.userAgent;
let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isiOS) {
window.scrollTo(0, 0);
}
})
},[])
*注：这个ios软键盘收起留⽩解决⽅案适应性不全（只适合表单中仅有⼀个input输⼊框且为单页⾯），表单中拥有多个input输⼊框时，切换input时也会触发scrollTo⽅法，造成input回弹闪烁异常问题。
问题现象: 存在多个input输⼊框且页⾯可以滚动时，切换输⼊框产⽣回弹闪烁，影响⽤户体验；同时iOS中依旧存在软键盘收起留⽩问题。
终极解决⽅案: 经过调研了解到版本6.7.4以上会出现该问题。⾸先判断当前的设备以及当前
版本号；其次当软键盘收起时，设置setTimeout⽅法，模拟软键盘弹起；最后获取当前滚动⾼度位置，软键盘收起滚动回当前滚动⾼度减1的位置即可。
React(React Hook)终极开发解决⽅案：（代码实现部分）
useEffect(() => {
// 软键盘收起事件处理
const onFocusout = () => {
let u = navigator.userAgent;
let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
let wechatInfo = u.match(/MicroMessenger\/([\d\.]+)/i); // WeChat
let wechatVersion = wechatInfo[1];
if (isiOS && wechatVersion >= '6.7.4') {
setTimeout(() => {
const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
window.scrollTo(0, Math.max(scrollHeight - 1, 0));
}, 100);
}
}
// 加载组件添加事件监听
document.body.addEventListener('focusout', () => { onFocusout() });
// 卸载组件清除事件监听
return () => {
veEventListener('focusout', () => { onFocusout() });
}
},[])
·长按⼆维码⽆法识别
问题现象：在ios中，部分iPhone机型（⼤屏幕、⾼分辨率等）中长按⼆维码⽆法识别，具体bug错误现象如下图所⽰。
解决⽅案：添加padding、给⼆维码添加透明的⼆维码识别区，增加⼆维码的识别⾯积；简化⼆维码周围的信息元素，增加⼆维码计算识别度。
React开发解决⽅案：（代码实现部分）
HTML部分：
import obbyMD from '@/assets/images/obby-majordomo.png';
<div className="obby-QRcode">
<div className="code-img-2">
<img src={obbyMD} className="obbyMD-code" alt="⼆维码"/>
<img src={obbyMD} className="code" style={{ opacity: 0 }} alt="透明⼆维码"/>
</div>
<div className="obby-md-text">联系⼩管家</div>
</div>
react router 方法 CSS公共部分：
@mixin QRCode {
background: #fdac6d;
border: 2px solid #f3a365;
box-shadow: inset 0 1px 10px 1px #f28a4c;
border-radius: 3.3vw;
}
CSS⼆维码部分：
.obby-QRcode {
@include QRCode;
padding: 2.4vw;
margin: 6vw auto 3vw;
& .code-img-2 {
position: relative;
display: block;
margin: 0 auto;
width: 10rem;
height: 10rem;
& .obbyMD-code {
position: absolute;
display: block;
width: 10rem;
height: 10rem;
top: 0;
left: 0;
}
& .code {
position: absolute;
display: block;
margin: 0 auto 0;
width: 10rem;
height: 10rem;
top: -5rem;
left: -5rem;
opacity: 0;
}
}
.obby-md-text {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin-top: 2vw;
letter-spacing: 0.5vw;
font-family: Source Han Sans CN;
font-weight: 500;
color: #7D3100;
}
}
问题现象：增加⼆维码识别⾯积后，iPhone⾼版本机型可以长按识别，但在使⽤过程中会突然就复现⽆法识别问题。
解决⽅案：经过测试，⼆维码组件页⾯识别没有问题，由上⼀级路由跳转过来⼆维码组件就会复现⽆法识别问题；路由跳转⽅式⽤的react-router的history.push⽅式，更换跳转⽅式为window.location.href = "跳转路由"即可解决。
·ios只加载⾸屏信息
问题现象：扫码进⼊H5页⾯（可滚动页⾯），页⾯⾸屏存在图⽚资源信息，当页⾯滚动后，页⾯信息⽆法加载。具体问题现象如下图所⽰：
解决⽅案：汲取⽹上的开发经验发现，在H5滚动容器的样式⾥加了⼀个overflow：hidden，去掉该样式属性就解决问题。
Android端-H5开发问题
·video层级问题
问题现象：点击登录弹窗可以正常显⽰，在点击播放视频后，video层级变成了最⾼级，再次点击登录弹窗被video遮挡了，⽆论怎么给登录弹窗z-index都⽆法正常显⽰弹窗。
解决⽅案：Android内置浏览器是X5内核，X5内核中默认了video的层级是最⾼级别，所以改变z-index没有办法改变层级显⽰问题。在使⽤video标签时可以加上 x5-video-player-type='h5-page'的属性，这时就把H5中的video就启⽤了同层H5播放器，这样就可以调整video、弹窗等层级的显⽰。（H5同层播放器接⼊规范：）
React开发解决⽅案：（代码实现部分）
<video
id="player"
controls={true}
width="100%"
height="100%"
x5-video-player-type="h5-page"// 启⽤同层H5播放器
x5-video-orientation="landscape|portrait"// 视频跟着⼿机⾃动旋转
>
<source src={videoUrl} type="video/mp4" />
</video>
CSS样式代码：
video {
object-fit: fill;
object-position: center;
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论