H5页面常见开发问题总结

Posted 2021-02-28 blueberrycode

摘要

 　　最近在开发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);
      }
    })
  },[])

 

 

Android端-H5开发问题

 　　·video层级问题

　　问题现象：点击登录弹窗可以正常显示，在点击播放视频后，video层级变成了最高级，再次点击登录弹窗被video遮挡了，无论怎么给登录弹窗z-index都无法正常显示弹窗。

       解决方案：android微信内置浏览器是X5内核，X5内核中默认了video的层级是最高级别，所以改变z-index没有办法改变层级显示问题。在使用video标签时可以加上 x5-video-player-type=‘h5-page‘的属性，这时就把H5中的video就启用了同层H5播放器，这样就可以调整video、弹窗等层级的显示。

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