当前位置: 首页 > Web前端 > HTML5

微信H5页面前端开发,大多数人都会遇到的几个兼容性坑

时间:2023-04-06 00:03:34 HTML5

在微信H5页面前端开发中,一般人都会遇到的几个兼容性坑项目直接截取的公司页面,所以下面涉及到的图片都进行了模糊处理。1、ios端兼容输入光标高度问题。说明:input输入框的光标在安卓手机上显示没有问题,但是在苹果手机上点击input时,光标高度与父框高度一致。比如下图中,左图是正常预期的输入框光标,右图是ios输入光标。原因分析:通常我们习惯使用height属性设置行间高度,使用line-height属性设置行间距离(行高)。点击输入时,光标的高度会自动与父框的高度一致。(谷歌浏览器的设计原理,另一种可能是当没有内容时,光标的高度等于input的line-height的值。当有内容时,光标从input的顶部移动到文本的底部。解决方案:heightandline-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;微信h5页面上下滑动卡顿漏页问题详解:在ios端,上下滑动页面时,如果页面高度超过一屏,会有明显卡顿,页面部分内容显示不全,例如下图,右图是正常页面,侧面是ios上下滑动后,卡顿导致下半部分左图丢失。发生原因分析:一般来说,微信浏览器的内核,安卓使用的是内置的WebKit内核,iOS由于苹果的原因使用了内置的Safari内核,而Safari使用原生控件实现溢出滚动.对于带有-webkit-overflow-scrolling的网页,会创建一个UIScrollView,并提供一个sublayer供渲染模块使用。[待验证]解决方法:添加如下一行代码即可*{-webkit-overflow-scrolling:touch;}但是这个属性有bug,比如你的页面设置了绝对定位节点,那么显示的node会乱,当然也会有一些其他的bug。扩展知识:什么是-webkit-overflow-scrolling:touch?MDN是这样定义的:-webkit-overflow-scrolling属性控制元素在移动设备上是否使用滚动弹跳效果。auto:使用普通滚动,当手指离开触摸屏时,滚动会立即停止。touch:使用带回弹效果的滚动,当手指离开触摸屏时,内容会继续保持滚动效果一段时间。持续滚动的速度和持续时间与滚动手势的强度成正比。它还创建了一个新的堆栈上下文。3、ios键盘唤醒,关闭键盘后页面没有回到原来的位置。详细描述:输入内容,弹出软键盘,页面内容整体向上移动,但键盘关闭,页面内容不向下滑动。当内部输入框获得焦点时,弹出的软键盘占据一席之地。当失去焦点时,软键盘消失,但仍然占据一席之地,导致输入框无法再次输入。当失去焦点时,给出一个事件解决方案:Insuredname

changeBlur(){让u=navigator.userAgent,app=navigator.appVersion;让isIOS=!!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:固定元素在ios中是这样的,键盘收起来的时候会往上推,尤其是第三方键盘,下图左图是键盘预计被唤醒时的样子,右图是键盘被唤醒时的实际样子,不需要判断模型,Document对象的属性和方法,setTimeout延迟0.5秒,因为调用Android键盘有点慢,所以如果不延迟处理,滚动会无效。changefocus(){设u=navigator.userAgent,app=navigator.appVersion;让isAndroid=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授权,这里只是分享,当然还有上传图片,微信支付等功能,大家可能会遇到坑,上面的坑是比较常见问题,如果有更好的解决方案,欢迎在留言区分享。