H5页面常见开发问题总结

摘要

   最近在开发H5,就在开发过程中发现H5存在着一些坑,所以就总结一下在开发过程中遇到的坑以及解决办法,本文会持续的更新,同时也欢迎大家一起评论分享H5开发中遇到的坑、解决办法等。

 

常见的通用的H5开发问题

 ·微信自定义分享缩略图失效

  问题现象:微信自定义分享时,需要更换新的缩略图,但是在更换上新缩略图后,分享微信链接给朋友时,缩略图显示失效。具体问题如下图所示:

H5页面常见开发问题总结_第1张图片

  解决方案: 经过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 () => {
      document.body.removeEventListener('focusout', () => { onFocusout() });
    }
  },[])

 

·长按二维码无法识别

  问题现象:在ios中,部分iPhone机型(大屏幕、高分辨率等)微信中长按二维码无法识别,具体bug错误现象如下图所示。

H5页面常见开发问题总结_第2张图片

  解决方案:添加padding、给二维码添加透明的二维码识别区,增加二维码的识别面积;简化二维码周围的信息元素,增加二维码计算识别度。

  React开发解决方案:(代码实现部分)

   HTML部分:

import obbyMD from '@/assets/images/obby-majordomo.png';
"obby-QRcode">
"code-img-2"> "obbyMD-code" alt="二维码"/> "code" style={{ opacity: 0 }} alt="透明二维码"/>
"obby-md-text">联系小管家

  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页面常见开发问题总结_第3张图片H5页面常见开发问题总结_第4张图片

   解决方案:汲取网上的开发经验发现,在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同层播放器接入规范: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" // 视频跟着手机自动旋转
>
  "video/mp4" />

  CSS样式代码:

 video {
    object-fit: fill;
    object-position: center;
 }

 

版权声明:本文为博主原创文章,转载请附上原文出处链接和本声明。

你可能感兴趣的:(H5页面常见开发问题总结)