微信webview开发的那些坑

背景：微信的安卓版封装了自己x5内核webview。因此从一定程度上提高了安设备碎片化的统一性。
但由于自身的一些特性，也存在着一些坑。今天主要说的是微信网页开发遇到的一些坑。
作为积累，同时给大家参考，欢迎补充。

• 安卓和ios不同的视频播放特性

1，视频播放组件统一替换了默认video组件。并浮在最高层，无法在上面放东西。这一特性也决定了安卓webview内的视频，不支持transform拉伸。ios可以。
2，安卓视频播放，统一全屏播放。除QQ域名之外不可页面内小屏播放。
ios是可以的，通过添加`x-webkit-airplay="true" webkit-playsinline="true" playsinline` 属性。
（参考：http://x5.tencent.com/guide?id=2009）
3，页面加载完成后，检测到video，会自动下载并缓存。触发onloadstart和oncanplay事件。ios则是在点击播放后才触发onloadstart和oncanplay事件。
另外pause方法会触发onloadstart。这是个大坑。

• 安卓刷新无效，缓存

使用js进行页面自刷新的时候，安卓版微信并不会请求后端刷新页面，而是自己从缓存中拿数据进行“假刷新”，这就导致我们的结合后端的一些页面无法正常工作。解决办法：在url后增加随机数或时间戳之类，改变url地址。ios无此问题。

• 图片预加载

在微信内，我们使用常用的图片预加载是不行的，只要图片没有再dom中显示出来过，那么即使我们缓存了这个图片。但是当引用相同图片地址的图片从隐藏到显示的时候，还是会再次请求这个图片。
解决办法：使用显示在dom中的元素请求图片的地址，并移动到屏幕外，保持不影响用户，即可，如果元素有特殊处，比如全屏的，那么可以设置最短的setTimeout让他迅速消失。只要元素出现并请求了，那么他就可以正确缓存这个图片了。