微信开发踩过的坑

微信浏览器的缓存

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

解决方案 :

  • 添加时间戳随机数
   www.123.com/test.html?v=20150316
  • 在html标签中增加不存在的manifest文件链接:
   <html manifest="IGNORE.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 超链接失效

防运营商注入脚本

<meta http-equiv="Content-Security-Policy" content="default-src *.qunarzz.com; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

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 对象的方法设置为默认大小。

参考链接

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,167评论 25 709
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,276评论 4 61
  • 安沫筱在水月息的指引下找到了东边的山洞。她在洞口前闻了闻,没有野兽的腥臊味,反有一股子石头和泥沙的土腥味冲进鼻息,...
    MissGirls组合Anne阅读 362评论 0 3
  • 毛团阅读 314评论 0 2
  • 又是忙碌的一天到晚都在看着老师那张熟悉却又十分陌生的脸,又到该检查作业的时候,同桌是谁已然记不清模样叫不上名字,生...
    _Dtath阅读 590评论 0 0