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

微信小程序中出現最多的一個問題，就是真機跟本地不一樣：我簡單列舉一些我發現的緣由，給你們參考，你們也能夠把本身發現的東西回覆給我，給我參考：

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

 

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-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/forum.php?mod=viewthread&tid=1380

13：超時：

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

14：能夠參考這個：微信小程序常見錯誤及基本排除方法