最近在开发H5,就在开发过程中发现H5存在着一些坑,所以就总结一下在开发过程中遇到的坑以及解决办法,本文会持续的更新,同时也欢迎大家一起评论分享H5开发中遇到的坑、解决办法等。
常见的通用的H5开发问题
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 () => {
- document.body.removeEventListener('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>
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: 36vw;
- height: 36vw;
- & .obbyMD-code {
- position: absolute;
- display: block;
- width: 36vw;
- top: 0;
- left: 0;
- }
- & .code {
- position: absolute;
- display: block;
- margin: 0 auto 0;
- width: 36vw;
- top: -5.1rem;
- left: -4.426665rem;
- opacity: 0;
- }
- }
- .obby-md-text {
- display: flex;
- justify-content: center;
- align-items: center;
- width: 36vw;
- margin-top: 2vw;
- letter-spacing: 0.3vw;
- font-family: Source Han Sans CN;
- font-weight: 500;
- color: #7D3100;
- }
- }
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同层播放器接入规范:https://x5.tencent.com/tbs/guide/video.html)
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;
- }