微信H5页面前端开发，大多数人都会遇到的几个兼容性坑
时间：2023-03-17 00:02:21
科技观察
在微信H5页面前端开发中，一般人都会遇到的几个兼容性坑项目直接截取的公司页面，所以下面涉及到的图片都进行了模糊处理。1、ios端兼容输入光标高度问题。说明：input输入框的光标在安卓手机上显示没有问题，但是在苹果手机上点击input时，光标高度与父框高度一致。比如下图中，左图是正常预期的输入框光标，右图是ios输入光标。原因分析：通常我们习惯使用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;}}2、ios端微信h5页面上下滑动卡顿漏页问题详解：在ios端，上下滑动页面时，如果页面高度超过一屏，会有明显的卡顿，页面上有些内容显示不全，例如下图，右图是普通页面，旁边是ios。s后上下翻盖，定格导致左图下半部分丢失。原因分析：一般来说，微信浏览器的内核，Android使用的是内置的WebKit内核，而iOS由于Apple的原因，使用的是内置的Safari内核，Safari使用原生控件进行溢出滚动。对于带有-webkit-overflow-scrolling的网页，会创建一个UIScrollView，并提供一个sublayer供渲染模块使用。[有待验证]解决方法：只要在publicstyle节点中加入下面这行代码*{-webkit-overflow-scrolling:touch;}，那么节点的显示就会乱了，当然会有一些其他错误。扩展知识：什么是-webkit-overflow-scrolling:touch？MDN上是这样定义的：-webkit-overflow-scrolling属性控制元素在移动设备上是否使用滚动回弹效果。auto：使用普通滚动，当手指离开触摸屏时，滚动会立即停止。touch：使用带有弹跳效果的滚动，当手指离开触摸屏时，内容会继续滚动一段时间。持续滚动的速度和持续时间与滚动手势的强度成正比。它还创建了一个新的堆栈上下文。3、ios键盘唤醒，关闭键盘后页面没有回到原来的位置。详细描述：输入内容，弹出软键盘，页面内容整体向上移动，但键盘关闭，页面内容不向下滑动。当内部输入框获得焦点时，弹出的软键盘占据一席之地。当失去焦点时，软键盘消失，但仍然占据一席之地，导致输入框无法再次输入。当失去焦点时，给出一个事件解决方案：InsuredName
changeBlur(){letu=navigator.userAgent,app=navigator.appVersion;letisIOS=!!u.match(/\(i[^;]+;(U;)?CPU.+MacOSX/);if(isIOS){setTimeout(()=>{constscrollHeight=document.documentElement.scrollTop||document.body.scrollTop||0window.scrollTo(0,Math.max(scrollHeight-1,0))},200)}}扩展知识：position:fixedelement在ios中，关闭键盘时会顶上去，尤其是第三方键盘4.安卓弹出键盘覆盖文本框详细说明：安卓微信H5弹出软键盘并阻塞input输入框原因分析：待补充解决方法：在input和textarea标签中添加focus事件，如下，先判断是否是安卓手机下的操作。当然不需要判断模型，Document对象的属性和方法，setTimeout延迟0.5秒，因为调用Android键盘有点慢，所以如果不延迟处理，滚动会很慢。失败的changefocus(){letu=navigator.userAgent,app=navigator.appVersion;letisAndroid=u.indexOf('Android')>-1||u.indexOf('Linux')>-1;if(isAndroid){setTimeout(function(){document.activeElement.scrollIntoViewIfNeeded();document.activeElement.scrollIntoView();},500);}}，扩展知识：Element.scrollIntoView()方法允许当前元素滚动到浏览器窗口Element.scrollIntoViewIfNeeded()方法也用于将不在浏览器窗口可见区域的元素滚动到浏览器窗口可见区域。但如果元素已经在浏览器窗口的可见区域，则不会发生滚动。5、Vue中的路由使用hash方式。开发微信H5页面分享时，在Android上设置分享成功，但是ios的分享异常有详细说明：点击分享ios当前页面给好友是正常的。如果分享两次，则跳转到首页；使用vuerouter跳转到第二页后，分享时分享设置失败；以上安卓分享正常。分析：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授权，这里只是分享，当然还有上传图片，微信支付等功能，大家可能会遇到坑，上面的坑是比较常见问题，如果有更好的解决方案，请在留言区分享
