原創:跳坑指南——微信小程序真機預覽跟本地不同的問題

微信小程序中出現最多的一個問題,就是真機跟本地不同:我簡單列舉一些我發現的原因,給大家參考,大家也可以把自己發現的東西回覆給我,給我參考:

本地看不到數據,就先讓本地能看到數據,再看本帖。。。。

1:本地可以看到數據,ios不行,安卓可以;
可能是tsl版本問題不支持1.2導致,部分安卓可以允許tsl低於1.2而正常顯示,而蘋果不行; 解決方法:參考此帖排查問題並修復:request:fail錯誤(含https解決方案)(真機預覽問題 可能是證書不受信任

2:本地可以看到數據,ios可以,安卓不行;
ios可以,而安卓不行,可能有如下幾個情況
情況一:使用了不兼容安卓的js,比如es6的Object.assign,部分es6不兼容安卓,即使開啓es6轉es5選項也無用;比如for of 和 forEach 需要換成for in;
情況說明:官方將在本月內的第二個版本更新時對ES6絕大部分API進行兼容
情況二:證書缺失,大部分情況是缺失中間證書,檢測地址:https://www.myssl.cn/tools/check-server-cert.html;中間證書安裝參考:http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1661
情況三:證書不受信任
情況四:測試機型較老,而tsl版本不支持;tsl需要支持較老版本,包括1.0,1.1;

3:本地可以看到數據,IOS及安卓均不可看到數據:可能是:
情況一:使用了自籤的證書;必須使用第三方受認可的證書
情況二:使用了IP,必須使用備案的域名
情況三:https問題,選項中選擇了不檢驗域名選項,此選項對真機無效;

4:url內使用了端口,參考:http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1899

5:數據未加載成功,需要設定一定的延遲量,在加載數據完成後再渲染頁面;

6:一些特殊問題,包括utf-8的bom問題導致安卓紅點問題;http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1522

  • 後臺返回數據中有bom非法字符, 前端可以用.trim()方法去一下, 治標的話得讓後臺把所有的文件編碼格式改爲utf-8 官方解釋:近日有發現類似問題的都是因爲返回的數據是 UTF-8 with BOM(即數據的開頭是一個不可見字符 unicode 65279),Android 平臺沒有自動過濾,導致 JSON.parse 失敗。目前需要開發者自行兼容,下個版本 Android 會過濾此字符。

  • <?php 前邊有一個 <feff>: http://www.wxapp-union.com/portal.php?mod=view&aid=959

  • http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1366: 你請求得到的res.data是否有值,如果沒有值就檢查一下ssl的問題。 如果有值但沒有賦值成功,最可能的原因是獲取的是一個字符串而不是一個數組或對象。 你需要做一個格式化, if(typeof res.data === 'string')var data = JSON.parse(res.data.trim());再用data賦值。 這個的原因是php輸出的不會忽略BOM的文件頭,特別使用windows自帶寫字板修改後就會有個\ufeff的字符在文件開始處,這個是不可見但會實際包含的。最後返回的就是字符串而非json數據,你直接對data賦值字符串是無法達到你想要的效果的,所以需要去掉,並重新格式化變成一個數組或對象。

7:真機跟本地樣式不同:可能使用了ios或安卓某一端不兼容的樣式屬性;目前編輯器檢查越來越嚴格,標籤不閉合可能導致一些奇怪的問題;

8:微信版本不足,建議使用最新版本微信進行測試;最新版本查看地址:weixin.qq.com;此情況會有可能會導致uploadfile無效及新增api無效等問題:http://www.wxapp-union.com/portal.php?mod=view&aid=959

9:圖片本地可以看到,但是真機無法顯示; 假如是背景圖,可能是

本地資源無法通過 css 獲取 background-p_w_picpath:可以使用網絡圖片,或者 base64,或者使用<p_w_picpath/>標籤

假如是網絡圖片,可能是圖片服務器設置了反盜鏈;

10:header設置異常:這個情況多數發生在使用POST時;

data 數據說明 最終發送給服務器的數據是 String 類型,如果傳入的 data 不是 String 類型,會被轉換成 String 。轉換規則如下: 對於 header['content-type'] 爲 'application/json' 的數據,會對數據進行 JSON 序列化 對於 header['content-type'] 爲 'application/x-www-form-urlencoded' 的數據,會將數據轉換成 query string (encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...)

11:網絡請求設置了referer :

網絡請求的 referer 是不可以設置的,格式固定爲 https://servicewechat.com/{appid}/{version}/page-frame.html,其中 {appid} 爲小程序的 appid,{version} 爲小程序的版本號,版本號爲 0 表示爲開發版。

12:異步或同步問題;部分操作屬於異步操作,比如uploadfile;http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1380

13:超時:

request 的默認超時時間和最大超時時間都是 60s

14:可以參考這個微信小程序常見錯誤及基本排除方法


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章