天天看點

微信小程式真機預覽跟本地不同的問題

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

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

特别提示: 當問題較為複雜時,請制作一個專門的最簡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錯誤,接口資料無法擷取,加載失敗等等錯誤,可以使用微信浏覽器打開接口,加載相應資料,以便排查接口問題及其他相應問題;

進而确定是接口問題,還是代碼問題或其他問題。

友情提示:如何打開微信浏覽器?将自己的接口位址發到微信内,然後自己使用微信手機端打開這個連結,即可使用微信浏覽器打開;