微信不兼容解决办法容

来源：蜘蛛抓取(WebSpider) 时间：2020-10-07 00:16 标签： 微信不兼容解决办法

点击上方蓝字关注关注后还可加入「前端交流群」共同进步

最近给公司微信公众号，写了微信h5业务页面总结分享一下前端开发过程中的几个兼容性坑，项目直接拿的公司页面所以下文涉及图片都模糊处理了。

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

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

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

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

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

解决办法：只需要在公共样式加入下面这行代码

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

MDN上是这样定义的：

當手指从触摸屏上移开，滚动会立即停止touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果继续滾动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文

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

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

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

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

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

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

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

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

5、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页面其实很多知识登陆授权，jssdk授权这里就只做了分享，当然还有上传图片、微信支付等功能都可能会遇到坑，以上几個坑也是比较常遇到的如果有更好的解决方案的话，可以联系我哦

大家好，我是koala公众号「程序员成长指北」作者。公众号为您打造優质学习路线并且会推送超级优质文章。加入我们一起学习吧！

本季度为uni-app + egg.js 实战仿微信app和小程序全棧开发开启纯nvue原生渲染，大大提高性能一次开发，同时搞定Android、iOS和小程序端等

我要回帖

更多关于 微信不兼容解决办法 的文章

 

随机推荐