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

扶桑木下發表於2017-01-05

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

本地看不到資料,就先讓本地能看到資料,再看本帖。。。。

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/ch…;中間證照安裝參考:http://www.wxapp-union.com/fo…
情況三:證照不受信任
情況四:測試機型較老,而tsl版本不支援;tsl需要支援較老版本,包括1.0,1.1;

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

4:url內使用了埠,參考:http://www.wxapp-union.com/fo…

5:資料未載入成功,需要設定一定的延遲量,在載入資料完成後再渲染頁面

6:一些特殊問題,包括utf-8的bom問題導致安卓紅點問題;http://www.wxapp-union.com/fo…

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

  • <?php 前邊有一個 <feff>: http://www.wxapp-union.com/po…

  • http://www.wxapp-union.com/fo…
    你請求得到的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/po…

9:圖片本地可以看到,但是真機無法顯示;
假如是背景圖,可能是
本地資源無法通過 css 獲取
background-image:可以使用網路圖片,或者 base64,或者使用<image/>標籤
假如是網路圖片,可能是圖片伺服器設定了反盜鏈;

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/fo…

13:超時:

request 的預設超時時間和最大超時時間都是 60s

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

相關文章