微信浏览器踩坑集锦

前言

众所周知，微信浏览器（X5内核）被前端届称为移动端的“IE6”。最近发现自己的一个WebApp在微信下面出现一个坑爹的问题，所以想写一篇文章来总结一下自己在微信开发中所遇到的一些问题和解决办法，给自己和其它人提供参考。

先说一下微信浏览器的情况，安卓端微信6.1版本以上使用的是QQ浏览器X5的内核，5.4~6.1之间如果用户手机上安装过QQ浏览器，则使用X5内核。如果未安装，则使用系统浏览器内核。

iOS端的情况比较简单，由于苹果的限制，微信只能使用Safari提供的内核(也就是Webkit)。相对来说iOS的问题不多，问题主要集中在安卓端，也就是X5内核上面。

坑

坑1：软键盘遮挡输入框

描述：这种情况发生在输入框位于底部时，点击输入框，键盘弹起，但是输入框却是纹丝不动，导致无法看到自己输出的内容。确认问题发生在微信版本号v6.3.15的机型上。

填坑：经过分析发现在这个bug只在微信上发现，与输入法无关，同时通过代码完全无法获取到键盘已经弹起还是下去的状态。目前的办法是判断当输入框focus时，判断视口是否发生变化，如果发生变化，则表示浏览器会自动调整输入框位置；如果无变化，则必须我们自己通过代码来调整输入框的位置。focus时调整高度，blur时恢复初始位置。但是由于我们无法获取软键盘确切的高度，所以有时候会出现输入框底部无法完美贴合软键盘。这个办法明显不够优雅，只能等待微信官方修复这个bug。

---

坑2：缓存

描述：这个问题是老生常谈了，微信的缓存异常难清除，对于前端开发来说就像牛皮癣，修改的代码无变化，经常让前端开发者开始怀疑人生了。

填坑：通过给引用的资源文件后面添加时间戳可以基本解决这个问题，保证页面每次的刷新都是拿到最新的代码文件。在加上时间戳后再也没碰到缓存导致的问题，不过听说还有小伙伴使用这个办法后依然有缓存，这个时候我建议使用清除微信数据的办法（大招，慎用！）。