微信H5开发-大多数前端都会遇到的几个兼容性的坑
点击上方“小生方勤”,选择“设为星标”
第一时间关注技术干货!
最近给公司微信公众号,写了微信h5业务页面,总结分享一下前端开发过程中的几个兼容性坑,项目直接拿的公司页面,所以下文涉及图片都模糊处理了。
1、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;}}
2、ios端微信h5页面上下滑动时卡顿、页面缺失
问题详情描述:在ios端,上下滑动页面时,如果页面高度超出了一屏,就会出现明显的卡顿,页面有部分内容显示不全的情况,例如下图,右图是正常页面,边是ios上下滑动后,卡顿导致如左图下面部分丢失。
出现原因分析:
笼统说微信浏览器的内核,Android上面是使用自带的WebKit内核,iOS里面由于苹果的原因,使用了自带的Safari内核,Safari对于overflow-scrolling用了原生控件来实现。对于有-webkit-overflow-scrolling的网页,会创建一个UIScrollView,提供子layer给渲染模块使用。【有待考证】
解决办法:只需要在公共样式加入下面这行代码
*{
-webkit-overflow-scrolling: touch;
}
But,这个属性是有bug的,比如如果你的页面中有设置了绝对定位的节点,那么该节点的显示会错乱,当然还有会有其他的一些bug。
拓展知识:-webkit-overflow-scrolling:touch是什么?
MDN上是这样定义的:
-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto: 使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止。touch: 使用具有回弹效果的滚动,
当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。
3、ios键盘唤起,键盘收起以后页面不归位
问题详情描述:
输入内容,软键盘弹出,页面内容整体上移,但是键盘收起,页面内容不下滑
出现原因分析:
固定定位的元素 在元素内 input 框聚焦的时候 弹出的软键盘占位 失去焦点的时候软键盘消失 但是还是占位的 导致input框不能再次输入 在失去焦点的时候给一个事件
解决办法:
<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>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 || 0window.scrollTo(0, Math.max(scrollHeight - 1, 0))}, 200)}}
拓展知识:position: fixed的元素在ios里,收起键盘的时候会被顶上去,特别是第三方键盘
4、安卓弹出的键盘遮盖文本框
问题详情描述:
安卓微信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()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但如果该元素已经在浏览器窗口的可见区域内,则不会发生滚动
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授权,这里就只做了分享,当然还有上传图片、微信支付等功能,都可能会遇到坑,以上几个坑也是比较常遇到的,如果有更好的解决方案的话,欢迎在留言区分享。
关于本文
作者:codercao
https://segmentfault.com/a/1190000019986963
◆ ◆ ◆ ◆
关注小生,每日都有新收获!
你的在看我当成喜欢
微信H5开发-大多数前端都会遇到的几个兼容性的坑相关推荐
- h5键盘把页面顶走了_微信h5开发的坑
记一次微信h5开发的坑... 正常的效果如下: 本身用的cube-ui开发,上半部分是自己写的,下边用的是better-scroll,为了滑动更流畅.这个页面前边有一个登录页面,登录之后就会跳到这个首 ...
- 挑选微信h5开发制作公司的标准是什么?
基于H5引擎技术的不断成熟与迭代,H5小游戏的制作水准和需求量也是越来越高,像TOM游戏,金豆游戏这些h5开发公司也如雨后春笋般涌现出来,现在市面上的微信h5开发制作公司那么多,又该如何挑选呢?挑选的 ...
- 微信 H5 页面前端开发,大多数人都会遇到的几个兼容性坑
关注上方"前端开发博客",选择"设为星标" 回复"2"加入前端群 最近给公司写了微信h5业务页面,总结分享一下前端开发过程中的几个兼容性坑, ...
- 微信H5页面前端开发,大多数人都会遇到的几个兼容性坑(转载)
1.ios端兼容input光标高度 问题详情描述:input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上 当点击输入的时候,光标的高度和父盒子的高度一样.例如下图,左图是正常所期待的输入框光 ...
- 微信H5开发之页面布局
随着微信用户数量超过 10 亿,作为 web 开发者,微信很多时候已经成为了我们 web 页面的载体,我们制作的页面几乎都会在微信上面展示和传播.于是,在开发过程中,如何去兼容微信,就成为了一个 we ...
- 微信H5纯签约前端开发范围及相关坑
开发内容: 1.提供签约成功回调地址notify_url,以供签约后获取并处理签约结果, 2.微信签约页链接由后台获取拼接后返给前端,location.href跳转即可. 参数来源:签名.用户ip等参 ...
- html5微相册,微信开发 微信H5开发 微信小程序 微报名 微相册 微**
尚仁网络声明:本服务标价仅作为参考,最终开发费用以实际需求评估为准. [交易流程] 1.预定之前请您先通过猪八戒网与我咨询沟通,您所需大致想法和需求.开发费用及开发周期都是根据您的需求功能和难易程度而 ...
- 微信互动小游戏H5案例模板-情人节游戏微信h5开发
每年的情人节是商家们大搞营销活动的好时机,为了满足客户需要,由TOM游戏专门为情人节打造的H5游戏<玩具熊总动员>上线啦,玩具熊,玫瑰花,巧克力这些节日主打的商品又到了促销的好时机,选择这 ...
- 记录一次微信h5开发 使用js-sdk的过程(填异步串行的智商坑)
1. 安装jweixin-module这个包 npm install jweixin-module --save 2. 写一个单独的js文件来定义初始化配置及其他方法 // jwx.js let jw ...
最新文章
- 第一章 软件自动化测试的基础知识
- 使用Redis搭建电商秒杀系统
- 某快手程序员吐槽:月薪四万很惶恐!和老婆亲热时都在想工作,薪资越高,做人越怂!...
- nginx bind() to 0.0.0.0:**** failed (13: Permission denied)
- lnmp pathinfo问题
- JDBC操作数据库就这八步!
- 使用双栈实现一个队列
- MySQL笔记-InnoDB中Record Lock与Gap Lock
- 教学思路ASP.Net之服务器控件: 四、FileUpload
- CWP中的排序算法:C语言
- python中随机生成数字生成对了是猜对了_python入门(一) 一个猜随机数小游戏...
- JDK5.0新特性系列---11.5.4线程 同步装置之Exchanger
- 一个前端开发者的mac装机清单
- UML---构件图和部署图
- jQuery - 不同版本的差异汇总(版本选择建议)
- Linux 冗余网络切换时间,linux下实现双网冗余
- Excel公式不自动计算出结果
- java onfocus_[Java教程]onfocus和onblur应用代码实例
- 火焰字,通过PS制作炫酷的火焰文字
- 计算机辅助设计对提升产品质量,浅谈CAD技术与计算机辅助设计的应用
热门文章
- TA进阶实例37(Unreal卡通风格化渲染效果)
- openstack的qcow2镜像制作、linux系统中安装kvm虚拟机并导出为qcow2虚拟机、virt-manager制作qocw2镜像和转为raw格式——2.6w字超详细说明所有流程。
- redeclared as different kind of symbol
- 雷士灯具管理系统、灯具管理系统
- 全球最先进机器人,或将替代你的工作,害怕吗?
- POI读取excel。读取MultipartFile格式的excel文件
- 华为海思 汉邦高科_海思新7nm芯片+数博会成立产业联盟,华为连出大动作,挖出两公司早有应用布局...
- 可信区块链评测大揭晓 智链ChainNova获可信区块链预测试证书
- 《中国社会科学院公布2007年全国主要城市白领工资标准》
- WCDMA关键技术详解(不定期更新)(转)