微信h5过程中的几个兼容性坑，涉及图片都模糊处理了

“来源：｜Vue中文社区ID：”

最近为公司微信公众号写了一个微信h5业务页面，总结分享了前端开发过程中的几个兼容性坑，以及项目直接拍的公司页面，所以下面涉及到的图片比较模糊.

1、ios 兼容输入光标高度

问题细节描述：输入框的光标在安卓手机上显示没有问题，但在苹果手机上点击输入时，光标高度与父框高度一致。比如下图中，左图是预期的输入框光标，右图是ios输入光标。

原因分析：通常我们习惯用属性来设置行间距，使用line-来设置行间距（行高）。单击输入时，光标的高度自动与父框的高度相同。（谷歌浏览器的设计原理，另一种可能是没有内容的时候，光标的高度等于输入行的值——有内容的时候，光标从输入的顶部到文字的底部。

解决方法：对行内容的高度和行高进行拉伸

例如：

.{float: left;box-: -box;: 88px;width: calc(100% – 240px);.-input{: block;box-: -box;width: 100%;color: #;font-size : 28px;//line-: 88px;-top: 20px;-: 20px;}} 2、ios端微信h5页面卡住，上下滑动时页面丢失

问题细节描述：在ios端，上下滑动页面时，如果页面高度超过一屏，会出现明显的卡顿，页面部分内容显示不全。比如右边的图片是正常的页面，侧面是ios上下滑动后，冻结导致下半部分的丢失如左图。

图片说明原因分析：

一般来说，微信浏览器的内核，以上是使用内置内核，在iOS中，由于苹果的原因，使用内置内核，使用原生控件实现。对于带有 — 的网页，将创建一个并提供一个子层供渲染模块使用。【待验证】

解决方法：在样式中加入下面这行代码即可

*{ – -： 触碰;}

但是，这个属性有错误。例如，如果你的页面中有一个设置了绝对定位的节点h5页面不能上下滑动，那么该节点的显示就会乱七八糟，当然还有其他的bug。

拓展知识：—：什么是触摸？

在 MDN 上是这样定义的：

— 该属性控制元素是否在移动设备上使用滚动反弹效果。auto：使用正常滚动，当手指离开触摸屏时，滚动将立即停止。touch：使用带有反弹效果的滚动效果。当手指从触摸屏上移开时，内容会继续滚动一段时间。持续滚动的速度和持续时间与滚动手势的强度成正比。还会创建一个新的堆栈上下文。

3、ios键盘被唤醒，关闭键盘后页面不返回

问题的详细描述：

输入内容，弹起软键盘，页面内容整体上移，但折叠键盘时，页面内容不下滑

原因分析：

固定定位元素在元素中的输入框获得焦点时弹出。当软键盘失去焦点时，软键盘消失，但仍占据空间，因此无法再次输入输入框。失去焦点时发出事件。

解决方案：

被保险人姓名

(){让 u = ., app = .;让 isIOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);if(isIOS){ (() => {const = .. || .body. || .(0, Math.max( – 1, 0))}, 200)} } 扩展知识::固定元素在ios中收起键盘时会被推上去，尤其是第三方键盘

4、 弹出键盘封面文本框

问题的详细描述：

安卓微信H5弹出软键盘h5页面不能上下滑动，屏蔽输入框。下图左边是预计键盘被唤醒的时候，右边是键盘实际被唤醒的时候。

图片说明原因分析：待补充

解决方法：在input和tags中添加焦点事件，如下，先判断是否是手机下的操作，当然可以不判断模型，对象属性和方法，延迟0.5秒，因为键盘调用有点迟钝，不延迟导致滚动失败

(){让 u = ., app = .;让 = u.(”) > -1 || u.(‘Linux’) > -1;if(){ (() {..ed(); ..(); }, 500);}}，拓展知识：

.() 方法将当前元素滚动到浏览器窗口的可见区域。.ed() 方法还用于将不在浏览器窗口可见区域内的元素滚动到浏览器窗口可见区域。但是如果元素已经在浏览器窗口的可见区域内，则不会发生滚动

5、Vue 中的路由使用哈希模式。开发微信H5页面分享时，上分享设置成功，ios上分享异常。

问题的详细描述：

如果将ios当前页面分享给好友，点击进入是正常的。分享两次，会跳转到首页；使用vue跳转到第二页分享时，分享设置失败；以上安卓分享正常。

图片说明原因分析：jssdk是签名和前端验证的后端，但是有时候跨域，ios分享后会自动带上from=&=0等参数，分享圈的参数朋友不一样，好像系统不一样，参数不一样，但是每次获取url，后面的参数都获取不到

解决方案：

(1)你可以用这个.$.push来改变页面跳转到..href而不是路由跳转，这样地址栏中的地址就可以和当前页面的地址一样了，并且可以分享成功（当适合分享的页面不多时，作为单页使用，所以刷新页面跳转，或者..）

(2）将入口地址保存在本地，需要获取签名时取出。注意：.(‘href’,href); 仅在首次进入单个应用时保存！【此方法不已验证]

题外话：如果能用小程序写的页面，尽量用小程序。在H5开发的微信开发者工具中查看页面效果可能看不到问题，因为无法唤起软键盘。为避免频繁在线发布，可以使用花生壳或者内网穿透，搭建一个可以通过域名访问的开发环境的h5页面，在手机上查看效果。顺便说一句，微信内置了浏览器缓存机制。新提交的代码（尤其是js）大约需要半个小时才能生效。

最后：微信H5页面其实有很多知识，登录授权，jssdk授权，这里只分享，当然还有上传图片，微信支付等功能，大家可能会遇到坑，上面的坑也是比较常见。，如果有更好的解决方案，请在留言区分享。

文章来源:http://baijiahao.baidu.com/s?id=1702774231346003939&wfr=spider&for=pc

感谢您的来访，获取更多精彩文章请收藏本站。