微信小程式真機預覽跟本地不同的問題
阿新 • • 發佈：2019-01-07
微信小程式中出現最多的一個問題，就是真機跟本地不同：我簡單列舉一些我發現的原因，給大家參考，大家也可以把自己發現的東西回覆給我，給我參考：
本地看不到資料，就先讓本地能看到資料，再看本帖。。。。
特別提示：當問題較為複雜時，請製作一個專門的最簡demo，以便集中觀察，確定問題。
看帖前需測試內容：
測試內容一：請同時測試安卓及ios至少各兩款手機型號；
測試內容二：開發者工具內開啟不檢驗域名，真機上開啟除錯進行測試；檢視結果；
然後開發者工具上關閉不檢驗域名，真機上關閉除錯進行測試；並檢視結果；
測試完畢，對比以下結果說明進行排查：
1：本地可以看到資料，ios不行，安卓可以；（請同時測試ios9，ios10等多個蘋果機型及IOS版本以便確定非獨特某個ios版本的問題）
可能是tsl版本問題不支援1.2導致，部分安卓可以允許tsl低於1.2而正常顯示，而蘋果不行；
解決方法：參考此帖排查問題並修復：
假如是startssl及沃通的證書，可能無法使用，建議使用阿里雲等證書；錯誤提示： ios10.2及以上對證書有更高的限制，假如在此版本系統上無法使用，可能是證書問題；
特殊情況：部分蘋果手機可以，部分不可以，請檢視不可以蘋果手機的ios版本，因為如上所說，ios10.2等最新ios版本對證書有更高的要求，部分被懲罰的證書可能不再受到信任；
特殊情況二：TLS是1.2，但是訪問時是TLS1.0，可能是JDK版本不足或者其他原因導致的；
更多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
情況三：證書不受信任
情況四：測試機型較老，而tsl版本不支援；tsl需要支援較老版本，包括1.0,1.1；
情況五：使用了promise相容庫：bluebird.js，這個相容庫在真機上使用問題，引入es6-promise.min.js；參考
情況六：安卓能夠接到（打印出）資料，但是無法解析json，請看底部的BOM問題說明；
情況七：
3：本地可以看到資料，IOS及安卓均不可看到資料：可能是：
情況一：使用了自籤的證書；必須使用第三方受認可的證書（比如阿里雲，騰訊雲提供的證書）
情況二：使用了IP，必須使用備案的域名
情況三：https問題，選項中選擇了不檢驗域名選項，此選項對真機無效；
3-1：本地可以看到資料，開啟除錯也可以看到資料，關閉除錯則看不到資料；或是開發版可以看到資料，體驗版無法看到資料；或是開啟除錯可以上傳檔案，關閉除錯則無法上傳檔案；
這個基本都是https問題，請參考上面的https問題解決的連結進行排查； 可能是很多種情況：比如域名沒有備案，沒有配置域名等等問題。。。
特別提醒：開啟除錯模式可以在開發時暫時規避域名問題，可以通過開啟上面的除錯模式來先規避，然後排查其他問題，以便確定問題所在！（ssl證書問題似乎無法規避）
特殊情況：微信支付開發版可以，體驗版不可以，可能是沒有配置相應域名：需要在後臺配置api.mch.weixin.qq.com域名；
排除問題方法：開發者工具內關閉專案內的“不檢驗域名”選項，重啟工具後看是否有合法域名報錯，有則是域名未配置的原因，沒有則是其他原因，請按https問題排除貼進行排除。
特殊情況二：websocket遇到問題：
5：資料未載入成功，需要設定一定的延遲量，在載入資料完成後再渲染頁面；
情況一：能夠拿到資料，但是無法渲染出來，可以考慮將資料請求從onload中轉移至ready內
情況二：非同步獲取的資料，在渲染完成時仍未返回導致頁面空白或未顯示資料，需要設定延遲量
7：真機跟本地樣式不同：
情況一：可能使用了ios或安卓某一端不相容的樣式屬性；目前編輯器檢查越來越嚴格，標籤不閉合可能導致一些奇怪的問題；
情況二：使用了開發工具內的壓縮程式碼，樣式自動補全等設定，這些設定有時候會存在BUG會導致一些css丟失等問題；可以在取消部分設定後重試；
情況三：顏色不對，或者設定顏色無效，請使用十六進位制顏色碼代替英文顏色；
8：微信版本不足，建議使用最新版本微信進行測試；最新版本檢視地址：weixin.qq.com；此情況會有可能會導致uploadfile無效及新增api無效等問題：http://www.wxapp-union.com/portal.php?mod=view&aid=959
9：圖片本地可以看到，但是真機無法顯示；
假如是背景圖，可能是
假如是網路圖片，可能是圖片伺服器設定了反盜鏈；
10：header設定異常：這個情況多數發生在使用POST時；
15：使用微信瀏覽器測試相應問題，將介面，載入連結等使用微信瀏覽器進行開啟，測試其是否適用微信，從而排除是否是程式碼問題及資料問題。
友情提示：如何開啟微信瀏覽器？將自己的介面地址發到微信內，然後自己使用微信手機端開啟這個連結，即可使用微信瀏覽器開啟；
本地看不到資料，就先讓本地能看到資料，再看本帖。。。。
特別提示：當問題較為複雜時，請製作一個專門的最簡demo，以便集中觀察，確定問題。
看帖前需測試內容：
測試內容一：請同時測試安卓及ios至少各兩款手機型號；
測試內容二：開發者工具內開啟不檢驗域名，真機上開啟除錯進行測試；檢視結果；
然後開發者工具上關閉不檢驗域名，真機上關閉除錯進行測試；並檢視結果；
測試完畢，對比以下結果說明進行排查：
1：本地可以看到資料，ios不行，安卓可以；（請同時測試ios9，ios10等多個蘋果機型及IOS版本以便確定非獨特某個ios版本的問題）
可能是tsl版本問題不支援1.2導致，部分安卓可以允許tsl低於1.2而正常顯示，而蘋果不行；
解決方法：參考此帖排查問題並修復：
假如是startssl及沃通的證書，可能無法使用，建議使用阿里雲等證書；錯誤提示： ios10.2及以上對證書有更高的限制，假如在此版本系統上無法使用，可能是證書問題；
此伺服器的證書無效，您可能正在連線（錯誤樣本來自@cc）
特殊情況：部分蘋果手機可以，部分不可以，請檢視不可以蘋果手機的ios版本，因為如上所說，ios10.2等最新ios版本對證書有更高的要求，部分被懲罰的證書可能不再受到信任；
特殊情況二：TLS是1.2，但是訪問時是TLS1.0，可能是JDK版本不足或者其他原因導致的；
更多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
情況三：證書不受信任
情況四：測試機型較老，而tsl版本不支援；tsl需要支援較老版本，包括1.0,1.1；
情況五：使用了promise相容庫：bluebird.js，這個相容庫在真機上使用問題，引入es6-promise.min.js；參考
情況六：安卓能夠接到（打印出）資料，但是無法解析json，請看底部的BOM問題說明；
情況七：
3：本地可以看到資料，IOS及安卓均不可看到資料：可能是：
情況一：使用了自籤的證書；必須使用第三方受認可的證書（比如阿里雲，騰訊雲提供的證書）
情況二：使用了IP，必須使用備案的域名
情況三：https問題，選項中選擇了不檢驗域名選項，此選項對真機無效；
3-1：本地可以看到資料，開啟除錯也可以看到資料，關閉除錯則看不到資料；或是開發版可以看到資料，體驗版無法看到資料；或是開啟除錯可以上傳檔案，關閉除錯則無法上傳檔案；
這個基本都是https問題，請參考上面的https問題解決的連結進行排查； 可能是很多種情況：比如域名沒有備案，沒有配置域名等等問題。。。
特別提醒：開啟除錯模式可以在開發時暫時規避域名問題，可以通過開啟上面的除錯模式來先規避，然後排查其他問題，以便確定問題所在！（ssl證書問題似乎無法規避）
特殊情況：微信支付開發版可以，體驗版不可以，可能是沒有配置相應域名：需要在後臺配置api.mch.weixin.qq.com域名；
排除問題方法：開發者工具內關閉專案內的“不檢驗域名”選項，重啟工具後看是否有合法域名報錯，有則是域名未配置的原因，沒有則是其他原因，請按https問題排除貼進行排除。
特殊情況二：websocket遇到問題：
5：資料未載入成功，需要設定一定的延遲量，在載入資料完成後再渲染頁面；
情況一：能夠拿到資料，但是無法渲染出來，可以考慮將資料請求從onload中轉移至ready內
情況二：非同步獲取的資料，在渲染完成時仍未返回導致頁面空白或未顯示資料，需要設定延遲量
不太建議在 onLoad 裡做一些和介面相關的操作，因為這個時候客戶端可能還沒有準備好檢視介面；
後臺返回資料中有bom非法字元， 前端可以用.trim()方法去一下， 治標的話得讓後臺把所有的檔案編碼格式改為utf-8
官方解釋：近日有發現類似問題的都是因為返回的資料是 UTF-8 with BOM（即資料的開頭是一個不可見字元 unicode 65279），Android 平臺沒有自動過濾，導致 JSON.parse 失敗。目前需要開發者自行相容，下個版本 Android 會過濾此字元。
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或安卓某一端不相容的樣式屬性；目前編輯器檢查越來越嚴格，標籤不閉合可能導致一些奇怪的問題；
情況二：使用了開發工具內的壓縮程式碼，樣式自動補全等設定，這些設定有時候會存在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)...）
網路請求的 referer 是不可以設定的，格式固定為 https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 為小程式的 appid，{version} 為小程式的版本號，版本號為 0 表示為開發版。
request 的預設超時時間和最大超時時間都是 60s
15：使用微信瀏覽器測試相應問題，將介面，載入連結等使用微信瀏覽器進行開啟，測試其是否適用微信，從而排除是否是程式碼問題及資料問題。
有時候，不知道錯誤因何產生，比如證書是否受信任，https錯誤，介面資料無法獲取，載入失敗等等錯誤，可以使用微信瀏覽器開啟介面，載入相應資料，以便排查介面問題及其他相應問題；
從而確定是介面問題，還是程式碼問題或其他問題。
友情提示：如何開啟微信瀏覽器？將自己的介面地址發到微信內，然後自己使用微信手機端開啟這個連結，即可使用微信瀏覽器開啟；