H5页面常见开发问题总结

摘要

 　　最近在开发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同层播放器接入规范：）

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