前端开发微信H5页面兼容性方案总结

国庆节马上就要到了，很多公司都在通过 H5 页面在做一些业务活动宣传，由于最近给公司做了一个微信 h5 业务页面，其中遇到好多坑，所以特地总结分享一下前端开发过程中的几个兼容性坑，因为项目直接拿的公司页面，所以下文涉及图片都做模糊处理了。

一、ios 端微信 h5 页面上下滑动时卡顿、页面缺失

问题详情描述：

在 ios 端，上下滑动页面时，如果页面高度超出了一屏，就会出现明显的卡顿，页面有部分内容显示不全的情况，例如下图，右图是正常页面，左边是 ios 上下滑动后，卡顿导致如左图下面部分丢失。

出现原因分析：

笼统说微信浏览器的内核，Android 上面是使用自带的 WebKit 内核，iOS 里面由于苹果的原因，使用了自带的 Safari 内核，Safari 对于 overflow-scrolling 用了原生控件来实现。对于有-webkit-overflow-scrolling 的网页，会创建一个 UIScrollView，提供子 layer 给渲染模块使用。【有待考证】

解决办法

只需要在公共样式加入下面这行代码

例如：

*{
  -webkit-overflow-scrolling: touch;
}

但是，这个属性是有 bug 的，比如如果你的页面中有设置了绝对定位的节点，那么该节点的显示会错乱，当然还有会有其他的一些 bug。

拓展知识： -webkit-overflow-scrolling:touch 是什么？

MDN 上是这样定义的：

-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.
auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。
touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

二、ios 键盘唤起，键盘收起以后页面不归位

问题详情描述

输入内容，软键盘弹出，页面内容整体上移，但是键盘收起，页面内容不下滑

出现原因分析

固定定位的元素 在元素内 input 框聚焦的时候 弹出的软键盘占位 失去焦点的时候软键盘消失 但是还是占位的 导致 input 框不能再次输入 在失去焦点的时候给一个事件

解决办法

HTML 代码：

<div class="list-warp">
   <div class="title"><span>投·被保险人姓名</span></div>
   <div class="content">
      <input class="content-input"
      placeholder="请输入姓名"
      v-model="peopleList.name"
      @focus="changefocus()"
      @blur.prevent="changeBlur()"/>    
   </div>
 </div>

JS 代码：

changeBlur(){
   let u = navigator.userAgent, app = navigator.appVersion;
   let isIOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);
   if(isIOS){
      setTimeout(() => {
         const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
         window.scrollTo(0, Math.max(scrollHeight - 1, 0))
      }, 200)
   }
 }

拓展知识： position: fixed 的元素在 ios 里，收起键盘的时候会被顶上去，特别是第三方键盘

三、安卓弹出的键盘遮盖文本框

问题详情描述

安卓微信 H5 弹出软键盘后挡住 input 输入框，如下左图是期待唤起键盘的时候样子，右边是实际唤起键盘的样子

出现原因分析

待补充

解决办法

给 input 和 textarea 标签添加 focus 事件，如下，先判断是不是安卓手机下的操作，当然，可以不用判断机型，Document 对象属性和方法，setTimeout 延时 0.5 秒，因为调用安卓键盘有一点迟钝，导致如果不延时处理的话，滚动就失效了

changefocus(){
   let u = navigator.userAgent, app = navigator.appVersion;
   let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
   if(isAndroid){
      setTimeout(function() {
      document.activeElement.scrollIntoViewIfNeeded();
      document.activeElement.scrollIntoView();
      }, 500);
   }
}

拓展知识：

Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内。而 Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动

四、ios 端兼容 input 光标高度

问题详情描述

input 输入框光标，在安卓手机上显示没有问题，但是在苹果手机上，

当点击输入的时候，光标的高度和父盒子的高度一样。例如下图，左图是正常所期待的输入框光标，右边是 ios 的 input 光标。

出现原因分析

通常我们习惯用 height 属性设置行间的高度和 line-height 属性设置行间的距离（行高），当点击输入的时候，光标的高度就自动和父盒子的高度一样了。（谷歌浏览器的设计原则，还有一种可能就是当没有内容的时候光标的高度等于 input 的 line-height 的值，当有内容时，光标从 input 的顶端到文字的底部

解决办法

高度 height 和行高 line-height 内容用 padding 撑开

.content{
  float: left;
  box-sizing: border-box;
  height: 88px;
  width: calc(100% - 240px);              
  .content-input{
     display: block;
     box-sizing: border-box;
     width: 100%;
     color: #333333;
     font-size: 28px;
     //line-height: 88px;
     padding-top: 20px;
     padding-bottom: 20px;
  }
}

五、Vue 中路由使用 hash 模式，开发微信 H5 页面分享时在安卓上设置分享成功，但是 ios 的分享异常

问题详情描述

ios 当前页面分享给好友，点击进来是正常，如果二次分享，则跳转到首页；使用 vue router 跳转到第二个页面后在分享时，分享设置失败；以上安卓分享都是正常

出现原因分析

jssdk 是后端进行签署，前端校验，但是有时跨域，ios 是分享以后会自动带上 from=singlemessage&isappinstalled=0 以及其他参数，分享朋友圈参数还不一样，貌似系统不一样参数也不一样，但是每次获取 url 并不能获取后面这些参数

解决办法

（1）可以使用改页面 this.$router.push 跳转，为 window.location.href 去跳转，而不使用路由跳转，这样可以使地址栏的地址与当前页的地址一样，可以分享成功（适合分享的页面不多的情况下，作为一个单单页运用，这样刷新页面跳转，还是..）

（2）把入口地址保存在本地，等需要获取签名的时候 取出来，注意：sessionStorage.setItem(‘href’,href); 只在刚进入单应用的时候保存！【该方法未验证】

题外话

如果能用小程序写的页面，尽量上小程序吧，H5 开发在微信开发者工具里看页面效果可能看不出问题，因为不能唤起软键盘。避免频繁线上发布，可以用花生壳或者 idcfengye，做内网穿透，搭建一个可以通过域名访问的开发环境的 h5 页面，在手机上看看效果，对了微信内置浏览器缓存机制。会导致刚提交的代码（特别是 js）效果要半个小时左右才生效。

结束语

以上是我在前端开发微信 H5 页面遇到的问题及解决方案，只是个人见解，相信大家有更好的办法。其实对于微信 H5 页面开发的很多知识，登陆授权，jssdk 授权，这里就只做了分享，当然还有上传图片、微信支付等功能，都可能会遇到坑，以上几个坑也是我们在前端开发中比较常遇到的，如果大家有更好的解决方案的话，希望大家可以联系我更新，为需要的小伙伴更准确的提供方法。

以上关于前端开发微信H5页面兼容性方案总结的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。