微信小程式中出現最多的一個問題,就是真機跟本地不同:我簡單列舉一些我發現的原因,給大家參考,大家也可以把自己發現的東西回複給我,給我參考:
本地看不到資料,就先讓本地能看到資料,再看本帖。。。。
特别提示: 當問題較為複雜時,請制作一個專門的最簡demo,以便集中觀察,确定問題。
看帖前需測試内容:
測試内容一:請同時測試安卓及ios至少各兩款手機型号;
測試内容二:開發者工具内開啟不檢驗域名,真機上打開調試進行測試;檢視結果;
然後開發者工具上關閉不檢驗域名,真機上關閉調試進行測試;并檢視結果;
測試完畢,對比以下結果說明進行排查:
1:本地可以看到資料,ios不行,安卓可以;(請同時測試ios9,ios10等多個蘋果機型及IOS版本以便确定非獨特某個ios版本的問題)
可能是tsl版本問題不支援1.2導緻,部分安卓可以允許tsl低于1.2而正常顯示,而蘋果不行;
解決方法:參考此帖排查問題并修複: request:fail錯誤(含https解決方案)(真機預覽問題
可能是證書不受信任:蘋果支援的證書清單:https://support.apple.com/zh-cn/HT204132
假如是startssl及沃通的證書,可能無法使用,建議使用阿裡雲等證書;錯誤提示: ios10.2及以上對證書有更高的限制,假如在此版本系統上無法使用,可能是證書問題;
此伺服器的證書無效,您可能正在連接配接 (錯誤樣本來自@cc )
特殊情況:部分蘋果手機可以,部分不可以,請檢視不可以蘋果手機的ios版本,因為如上所說,ios10.2等最新ios版本對證書有更高的要求,部分被懲罰的證書可能不再受到信任;
特殊情況二:TLS是1.2,但是通路時是TLS1.0,可能是JDK版本不足或者其他原因導緻的;
更多ios相關問題請看: 跳坑《一百四十四》ios蘋果真機相關問題
2:本地可以看到資料,ios可以,安卓不行;(請測試多個安卓機型及安卓版本以便确定非獨特機型問題)
ios可以,而安卓不行,可能有如下幾個情況
情況一:使用了不相容安卓的js,比如es6的 Object.assign,部分es6不相容安卓,即使開啟es6轉es5選項也無用;比如for of 和 forEach 需要換成for in;具體es6支援,請看: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/details.html?t=201716
情況二:證書缺失,大部分情況是缺失中間證書,檢測位址: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;
情況五:使用了promise相容庫:bluebird.js,這個相容庫在真機上使用問題,引入es6-promise.min.js;參考http://www.wxapp-union.com/portal.php?mod=view&aid=789
情況六:安卓能夠接到(列印出)資料,但是無法解析json,請看底部的BOM問題說明;
情況七: ios正常,有些安卓機無法讀取某個屬性
更多安卓問題請參考:跳坑《一百四十》Android安卓真機相關問題
3:本地可以看到資料,IOS及安卓均不可看到資料:可能是:
情況一:使用了自簽的證書;必須使用第三方受認可的證書(比如阿裡雲,騰訊雲提供的證書)
情況二:使用了IP,必須使用備案的域名
情況三:https問題,選項中選擇了不檢驗域名選項,此選項對真機無效;
特殊提示:排除證書問題及檢視免費證書位址請看此帖:跳坑《一百》ssl證書相關問題(SSL相關問題請在這問)
3-1:本地可以看到資料,打開調試也可以看到資料,關閉調試則看不到資料;或是開發版可以看到資料,體驗版無法看到資料;或是打開調試可以上傳檔案,關閉調試則無法上傳檔案;
請參考:跳坑《七十九》調試模式與非調試模式,不校驗域名
這個基本都是https問題,請參考上面的https問題解決的連結進行排查; 可能是很多種情況:比如域名沒有備案,沒有配置域名等等問題。。。
特别提醒:開啟調試模式可以在開發時暫時規避域名問題,可以通過開啟上面的調試模式來先規避,然後排查其他問題,以便确定問題所在!(ssl證書問題似乎無法規避)
特殊情況:微信支付開發版可以,體驗版不可以,可能是沒有配置相應域名:需要在背景配置api.mch.weixin.qq.com域名;
排除問題方法:開發者工具内關閉項目内的“不檢驗域名”選項,重新開機工具後看是否有合法域名報錯,有則是域名未配置的原因,沒有則是其他原因,請按https問題排除貼進行排除。
特殊情況二:websocket遇到問題: WebSocket相關問題說明
4:url内使用了端口,參考:http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1899
5:資料未加載成功,需要設定一定的延遲量,在加載資料完成後再渲染頁面;
情況一:能夠拿到資料,但是無法渲染出來,可以考慮将資料請求從onload中轉移至ready内
情況二:異步擷取的資料,在渲染完成時仍未傳回導緻頁面空白或未顯示資料,需要設定延遲量
不太建議在 onLoad 裡做一些和界面相關的操作,因為這個時候用戶端可能還沒有準備好視圖界面;
6:一些特殊問題,比如utf-8的bom問題導緻安卓不解析json問題;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指派字元串是無法達到你想要的效果的,是以需要去掉,并重新格式化變成一個數組或對象。
wx.request傳回的json是字元串,怎麼破?
參考位址: http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1522
解決方案:thinkPHP json 變成了文本(含BOM檢測工具): http://www.wxapp-union.com/forum.php?mod=viewthread&tid=3032
安卓真機請求成功了,不能渲染到資料是什麼問題: http://www.wxapp-union.com/forum.php?mod=viewthread&tid=2987
7:真機跟本地樣式不同:
情況一:可能使用了ios或安卓某一端不相容的樣式屬性;目前編輯器檢查越來越嚴格,标簽不閉合可能導緻一些奇怪的問題;
情況二:使用了開發工具内的壓縮代碼,樣式自動補全等設定,這些設定有時候會存在BUG會導緻一些css丢失等問題;可以在取消部分設定後重試;
情況三:顔色不對,或者設定顔色無效,請使用十六進制顔色碼代替英文顔色;
8:微信版本不足,建議使用最新版本微信進行測試;最新版本檢視位址:weixin.qq.com;此情況會有可能會導緻uploadfile無效及新增api無效等問題:http://www.wxapp-union.com/portal.php?mod=view&aid=959
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及伺服器反盜鍊設定(403錯誤)
網絡請求的 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:可以參考這個:微信小程式常見錯誤及基本排除方法
15:使用微信浏覽器測試相應問題,将接口,加載連結等使用微信浏覽器進行打開,測試其是否适用微信,進而排除是否是代碼問題及資料問題。
有時候,不知道錯誤因何産生,比如證書是否受信任,https錯誤,接口資料無法擷取,加載失敗等等錯誤,可以使用微信浏覽器打開接口,加載相應資料,以便排查接口問題及其他相應問題;
進而确定是接口問題,還是代碼問題或其他問題。
友情提示:如何打開微信浏覽器?将自己的接口位址發到微信内,然後自己使用微信手機端打開這個連結,即可使用微信浏覽器打開;