微信浏览器的缓存
可怕的页面缓存,微信中点后退不会重新发请求,但页面却会重新渲染,应该是从缓存中加载了,导致一些异步操作的元素状态都恢复如初。
解决方案 :
- 添加时间戳随机数
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 对象的方法设置为默认大小。