背景:微信的安卓版封装了自己x5内核webview。因此从一定程度上提高了安设备碎片化的统一性。
但由于自身的一些特性,也存在着一些坑。今天主要说的是微信网页开发遇到的一些坑。
作为积累,同时给大家参考,欢迎补充。
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让他迅速消失。只要元素出现并请求了,那么他就可以正确缓存这个图片了。