微信開發(fā)踩過的坑

微信瀏覽器的緩存

可怕的頁面緩存,微信中點后退不會重新發(fā)請求,但頁面卻會重新渲染,應(yīng)該是從緩存中加載了,導致一些異步操作的元素狀態(tài)都恢復如初。

解決方案 :

  • 添加時間戳隨機數(shù)
   www.123.com/test.html?v=20150316
  • 在html標簽中增加不存在的manifest文件鏈接:
   <html manifest="IGNORE.manifest">

[根據(jù)HTML5 W3C規(guī)范,解析器下載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”)

該方法對其它有自己緩存機制和緩存規(guī)則的應(yīng)用也有奇效。

  • 使用meta標簽
    網(wǎng)上出現(xiàn)頻率最高的解決方案,然并卵。

引用JSSDK

需要使用 wx.config 對于引用進行驗證。如果沒有通過的話,在ios上只對基礎(chǔ)API有效(隱藏菜單可以,分享不可以),在android上無效。
建議安裝“微信web開發(fā)者工具”,可以看到橋調(diào)用的信息。

特殊的分享參數(shù)

當鏈接經(jīng)過分享打開后,微信瀏覽器會在連接中加上一下參數(shù),其含義如下

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

微信自定義模板

開發(fā)平臺上編輯自定義模板時,不要使用粘貼復制 會出現(xiàn)編碼問題導致在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協(xié)議可以控制的內(nèi)容非常多。而且如果不特別指定’unsafe-inline’時,頁面上所有inline的樣式和腳本都不會執(zhí)行;不特別指定’unsafe-eval’,頁面上不允許使用new Function,setTimeout,eval等方式執(zhí)行動態(tài)代碼。在限制了頁面資源來源之后,被XSS的風險確實小不少

禁用微信webView調(diào)整字體大小

微信的 iOS 版的調(diào)整字體大小使用的是通過給 body 設(shè)置 -webkit-text-size-adjust:120% 屬性實現(xiàn)的,Android 則是用過 Java 調(diào)用 webview 的 API 設(shè)置字體大小。因為這兩個系統(tǒng)實現(xiàn)調(diào)整字體大小的原理不同,所以需要兩種方法來限制微信對網(wǎng)頁字體大小的調(diào)整。

IOS

在 iOS 下,對網(wǎng)頁的 body 元素設(shè)置 -webkit-text-size-adjust: 100% !important; 可以覆蓋掉微信的樣式。

Android

在 Android 下,需要通過 WeixinJSBridge 對象將網(wǎng)頁的字體大小設(shè)置為默認大小,并且重寫設(shè)置字體大小的方法,讓用戶不能在該網(wǎng)頁下設(shè)置字體大小。

(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() {
        // 設(shè)置網(wǎng)頁字體為默認大小
        WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
        // 重寫設(shè)置網(wǎng)頁字體大小的事件
        WeixinJSBridge.on('menu:setfont', function() {
            WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
        });
    }
})();

注意:如果用戶之前已經(jīng)設(shè)置過了字體大小,訪問網(wǎng)頁時會先看到字體被放大后的效果再恢復正常,因為在 WeixinJSBridge 對象初始化完成之后才能通過 WeixinJSBridge 對象的方法設(shè)置為默認大小。

參考鏈接

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,319評論 25 708
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,626評論 4 61
  • 安沫筱在水月息的指引下找到了東邊的山洞。她在洞口前聞了聞,沒有野獸的腥臊味,反有一股子石頭和泥沙的土腥味沖進鼻息,...
    MissGirls組合Anne閱讀 388評論 0 3
  • 毛團閱讀 337評論 0 2
  • 又是忙碌的一天到晚都在看著老師那張熟悉卻又十分陌生的臉,又到該檢查作業(yè)的時候,同桌是誰已然記不清模樣叫不上名字,生...
    _Dtath閱讀 651評論 0 0

友情鏈接更多精彩內(nèi)容