微信开发中的坑

原文地址
前些日子一直在做一些微信公众号的H5开发，在开发过程中遇到了不少坑。记录一下：

1. 视频
   Android版的视频播放必须全屏，没有办法自定义video的width和height，而且在Android版中视频的层级是最高的，没有办法覆盖，滚你z-index设成多少都没用。（这两个问题暂时没有找到解决办法）
   ios版这两个问题都没有。
   视频无法自动播放，目前的解决办法是用户触摸屏幕的时候出发视屏播放事件。（注：video的src要卸载source里面）
2. 扫码识别
   Android版的没有什么问题。在iPhone上出现了二维码长安识别不了的办法，找了很久都没找到问题，网上有说是位置偏移的，然后用两张图一张放在正确的位置不显示，一张显示用。我们找了半天也没有找到二维码正确的位置，最后用了一个比较猥琐的办法，两张二维码的图，一张显示，一张覆盖整个页面然后visibility: hidden;,幸好页面上没有什么需要点击的地方...
3. 页面滚动不顺畅
   在ios版的微信里会出现问题，解决办法给要滚动区域的元素加上这个属性-webkit-overflow-scrolling: touch;。
4. ios版会把页面中的一串数字识别成电话
   ios版会把页面中的一串数字识别成电话然后触摸会调用系统不打电话，解决办法加上meta

<meta content="telephone=no,email=no" name="format-detection" />

5. Android文字变大
   在一些文字过多的地方Android版微信会把文字变大而ios则不会，这样会导致排版错乱页面变得很丑...
   解决的办法是给包裹文字的元素加上display: inline-block;。
6. 点击元素产生背景
   加上这个-webkit-tap-highlight-color: rgba(0,0,0,0);
7. click的300ms延迟
   要么禁止页面的缩放，要么如果使用了zepto，则用tap代替click，要么使用fastclick。
8. 缓存问题非常蛋疼
   ios可以通过刷新解决，Android用户需要取关然后退出微信重新关注才可以（也可以在X5调试页面清除这些缓存）。建议打包的时候给文件加上版本号，或者用hash字符串作为文件名。
9. 动态更改title
   在andriod下没有问题，但是在ios下就会有这个问题，有时候更改会失败，可以用iframe来解决这个问题，代码如下（我是用vue写的）

<template>
    <div>
        <iframe :src="bugTitle" style="display: none"></iframe>
    </div>
</template>
<script>
    ...
    data() {
        return {
            bugtitle: ''
        }
    }
    methods: {
        setTitle(title) {
            document.title = title;
            // 判断是否为ios，ios通过iframe来刷新title
            if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
                this.bugTitle = '/favicon.ico' + Date.parse(new Date());
            }
        }
    ...
</script>

...
写在最后，在微信上还有很多的问题，暂时想不起来了，以后想起来再写。
之前在知乎看看多过这样一句话 “移动端的微信全等于pc端的IE6”，嗯 +1。