微信开发踩过的坑

微信浏览器的缓存

可怕的页面缓存，微信中点后退不会重新发请求，但页面却会重新渲染，应该是从缓存中加载了，导致一些异步操作的元素状态都恢复如初。

解决方案 ：

• 添加时间戳随机数

   www.123.com/test.html?v=20150316

• 在html标签中增加不存在的manifest文件链接：

[根据HTML5 W3C规范，解析器下载manifest header 404/410时，缓存即失效](见 http://www.w3.org/TR/html5/browsers.html#downloading-or-updating-an-application-cache “5.7.4 Downloading or updating an application cache > 5.If fetching the manifest fails due to a 404 or 410”）

该方法对其它有自己缓存机制和缓存规则的应用也有奇效。

• 使用meta标签
  网上出现频率最高的解决方案，然并卵。

引用JSSDK

需要使用 wx.config 对于引用进行验证。如果没有通过的话，在ios上只对基础API有效（隐藏菜单可以，分享不可以），在android上无效。
建议安装“微信web开发者工具”，可以看到桥调用的信息。

特殊的分享参数

当链接经过分享打开后，微信浏览器会在连接中加上一下参数，其含义如下

    朋友圈  from=timeline&isappinstalled=0
    微信群  from=groupmessage&isappinstalled=0
    好友分享 from=singlemessage&isappinstalled=0

微信自定义模板

开发平台上编辑自定义模板时，不要使用粘贴复制 会出现编码问题导致在iphone 超链接失效

防运营商注入脚本

self是指当前域名下，从上面的介绍可以看到，CSP协议可以控制的内容非常多。而且如果不特别指定’unsafe-inline’时，页面上所有inline的样式和脚本都不会执行；不特别指定’unsafe-eval’，页面上不允许使用new Function，setTimeout，eval等方式执行动态代码。在限制了页面资源来源之后，被XSS的风险确实小不少

禁用微信webView调整字体大小

微信的 iOS 版的调整字体大小使用的是通过给 body 设置 -webkit-text-size-adjust:120% 属性实现的，Android 则是用过 Java 调用 webview 的 API 设置字体大小。因为这两个系统实现调整字体大小的原理不同，所以需要两种方法来限制微信对网页字体大小的调整。

IOS

在 iOS 下，对网页的 body 元素设置 -webkit-text-size-adjust: 100% !important; 可以覆盖掉微信的样式。

Android

在 Android 下，需要通过 WeixinJSBridge 对象将网页的字体大小设置为默认大小，并且重写设置字体大小的方法，让用户不能在该网页下设置字体大小。

（function() {
    if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
        handleFontSize();
    } else {
        if (document.addEventListener) {
            document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
        } else if (document.attachEvent) {
            document.attachEvent("WeixinJSBridgeReady", handleFontSize);
            document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
        }
    }

    function handleFontSize() {
        // 设置网页字体为默认大小
        WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
        // 重写设置网页字体大小的事件
        WeixinJSBridge.on('menu:setfont', function() {
            WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
        });
    }
})();

注意：如果用户之前已经设置过了字体大小，访问网页时会先看到字体被放大后的效果再恢复正常，因为在 WeixinJSBridge 对象初始化完成之后才能通过 WeixinJSBridge 对象的方法设置为默认大小。

参考链接