美文网首页前端开发
微信开发踩过的坑

微信开发踩过的坑

作者: 溪离欣洛 | 来源:发表于2016-09-01 19:14 被阅读991次

微信浏览器的缓存

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

解决方案 :

  • 添加时间戳随机数
   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 对象的方法设置为默认大小。

参考链接

相关文章

  • 微信开发踩过的坑

    微信浏览器的缓存 可怕的页面缓存,微信中点后退不会重新发请求,但页面却会重新渲染,应该是从缓存中加载了,导致一些异...

  • 微信支付 code -2 首查位置推荐

    前言 说到微信相关,相信很多开发者都或多或少的踩过坑,如果没有记录甚至很容易二次踩坑,特此记录,留作纪念 ,嘿嘿...

  • 微信开发--配置篇

    近段时间在做微信相关开发,因为之前做的笔记丢失,原来踩过的坑又踩了一遍,所以这次准备记录下来,避免以后重复踩坑,本...

  • 开发微信小程序分页功能的坑

    微信小程序开发分页的坑 微信小程序开发中list列表经常要进行分页处理,踩坑在所难免。 app.json wxml...

  • VUX 单页微信开发的那些事

    网上已有很多SPA单页做微信开发碰到的那些坑,这里就自己最近经验总结一些我踩过的一些坑,整理记录一下 VUX是微信...

  • 微信公众号开发-验证微信服务器,授权登录以及Token管理

    本文基于之前几个项目在部署在微信公众号下的网页应用,以此写下微信公众号开发的步骤以及踩过的坑 申请测试公众号 首先...

  • 微信支付相关问题解决网址

    ios微信支付开发遇到的问题 微信支付趟过的坑

  • 2021-05-12

    微信分享跳转2次,微信分享跳转微信正在连接,分享微信没反应 这几天搞微信分享,还是有一些坑在里面的,记录踩过的坑;...

  • iOS开发笔记

    原文请见github上iOS开发笔记 iOS开发笔记 记录了在iOS开发中踩过的坑和一些问题解决 微信的openi...

  • 钉钉ISV JSAPI开发总结

    近期开发了钉钉版微应用,将自己踩过的坑总结如下 : 坑1.dd.biz.navigation.setLeft iO...

网友评论

本文标题:微信开发踩过的坑

本文链接:https://www.haomeiwen.com/subject/udchettx.html