與後端或APP聯調時如何定位問題3——移動端對接
移動端聯調主要是三類問題：
- 第一類問題，後端返回的資料是否符合要求
- 第二類問題，JSBridge傳參或回撥錯誤
- 第三類問題，相容性問題
三類問題中，除了第一類檢視服務端返回的資料是否符合要求可以在pc機上除錯，另外兩種都需要真機除錯，如何連線真機除錯呢？
非常重要：真機除錯的APP一定要用debug包，找你對接的APP開發人員打debug包給你，同樣，你部署到測試伺服器的JS、CSS不要開啟壓縮模式。
一、真機除錯
Android 真機除錯
桌面端的前端開發除錯非常簡單，因為有 Firebug、Chrome DevTools 等工具，直接右擊開啟就可以看到元素的 CSS，並且可以檢視各種資源、修改執行調錯 JS 等。而移動端瀏覽器顯然沒法帶有這些功能，於是可以用資料線連線裝置，然後用電腦上的 Chrome DevTools 來除錯移動裝置上的頁面。
第一步：開啟移動端開發者模式
- 在安卓4.0以後，為了防止手機使用者誤操作，系統預設開發者模式都是關閉的。設定→關於手機→連擊7次版本號，之後便會在手機設定中出現開發者模式。
- 進入設定→開發者選項→開啟開發者選項，開啟USB除錯
- 通過資料線連線手機和電腦，部分機型連線電腦時，會提示安裝驅動程式，安裝驅動程式
- 在手機上開啟任意一個網頁，只要是webview形式的網頁都是可以的
第二步：在電腦上除錯頁面
- 在電腦chrome瀏覽器位址列輸入：chrome://inspect/#devices 會看到如下情況(如果沒有顯示裝置資訊，則表示沒有連線好，可以拔插手機或關閉模式重開一下，但是部分華為的機型能看到裝置名，無法看到webview中開啟的網頁，原因不明。據測試最好用的除錯機是小米)
- 找到準備除錯的頁面，確保手機上該頁面也是處於啟用狀態，點選藍色的 inspect 連結，彈出一個新的視窗：
注意 ：第一次使用chrome://inspect/#devices時，開啟的頁面是空白，其實是chrome需要下載一些工具才能支援，這些工具國內網是無法訪問的，需要翻牆。但是隻有第一次才需要，以後有了快取就不要了，除非你的快取被清掉。 - 接下來就可以像在PC機一樣除錯頁面了。
IOS 的真機除錯
首先你得有臺蘋果電腦，沒有蘋果電腦，那你可以跳過這一節了。
iPhone 等一系列蘋果裝置對前端還是相當友好的，效能夠好，Safari 瀏覽器也是不錯，型號固定統一，問題也比較好解決，蘋果公司也提供了一系列開發者工具，但有些手勢操作測試以及最真實的使用者體驗測試還是需要真機。Safari 除錯真機上的網頁也是非常簡單的。
- 首先需要在 iPhone 等裝置上設定一下 Safari 瀏覽器，開啟除錯功能。具體步驟：設定→Safari→高階→開啟”web檢查器“。
- 使用資料線連線電腦，Safari 預設是隱藏開發選項的，在第一次使用的時候，需要在 MAC上開啟Safari的開發選單：頂部選單欄“Safari”→偏好設定→高階→開啟”在選單欄中顯示“開發”選單
- 在iOS裝置上的Safari瀏覽器中開啟要除錯的頁面
- 切換到MAC的Safari，在頂部選單欄選擇“開發”→找到你的iOS裝置名稱→右邊二級選單選擇需要除錯的對應標籤頁，即可開始遠端除錯
- 在裝置上用 Safari 瀏覽器開啟需要除錯的頁面，之後在桌面版的 Safari 開發選項中即可看到進行除錯，跟用chrome devTools差不多。
微信 Webview 除錯
其它除錯工具
Fiddlerr抓包
Fiddler是一個抓包工具，可以將網路傳輸傳送與接受的資料包進行截獲、重發、編輯、轉存等操作，也可以用來檢測網路安全。個人認為更適合非前端人員抓包APP資料，而前端需要除錯的內容更多，不太建議採用這種模式除錯，更詳細的抓包教程：https://www.cnblogs.com/miantest/p/7289694.html
二、JSBridge聯調介面
JSBridge聯調介面，基本集中在檢查入參和回參是否符合要求。建議呼叫JSBridge的方法寫成Promise形式，統一封裝，如呼叫掃碼介面scanCode寫成統一的呼叫方式，可根據不同的平臺，如公司自研APP、公眾號、UC瀏覽器，根據執行的平臺呼叫對應的JSBridge，這樣頁面適配性更高，即可實現一套H5頁面實現多端底層介面呼叫，遷移成本也很小。
呼叫底層JSBridge實現思路大致如下：
// 呼叫方法
support.scanCode().then(function(result){
// 執行掃碼後回撥
});
//底層呼叫方法
class support{
constructor(){
// 初始化執行環境，判斷當前平臺
// 非同步引入平臺JSBridge,如微信公眾號
let environmentName = JRE();// 判斷當前平臺
switch (environmentName) {
case ENVIRONMENT.WEIXIN_CLIENT:
//非同步載入微信JSBridge
...
weixinClient.init(weixinUrl).then(function(wxResult){
this.bridgeName = 'weixin';
this.bridge = wx;
}).catch(function(error){
console.log('微信公眾號調取失敗',error)
});
break;
case ENVIRONMENT.APP_CLIENT:
//非同步載入APPJSBridge
...
default:
//預設載入高德地圖
...
}
}
function scanCode(){
return new Promise(function(resolve, reject){
switch (this.bridgeName) {
case ENVIRONMENT.WEIXIN_CLIENT:
resolve(weixinClient.scanCode());
case ENVIRONMENT.APP_CLIENT:
...
default:
resolve({
errorMessage:'更多內容請下載APP'
});
}
})
}
}
class weixinClient{
...
function scanCode() {// 呼叫微信掃碼介面
return new Promise(function(resolve, reject) {
this.bridge.scanQRCode({
needResult: 1,
success: function(res) {
resolve(res);
}
});
});
}
}建議在呼叫JSBridge前打console輸出呼叫引數，拿到JSBridge中的返回，輸出返回引數，即可查出入參和回參是否正確，再找對應的app開發人員配合解決。
三、相容問題
移動端常見相容問題：
- 安卓和IOS機型部分事件處理機制不一樣
- 低端機型不支援ES6和fetch等語句
1、安卓與ios常見的不同事件處理機制
1）IOS中click事件延遲300ms響應
最簡單的處理方案：判斷當前執行裝置，如果是IOS用touchend替代click，然後preventDefault來阻止預設行為click
2）IOS中input鍵盤事件keyup、keydown、keypress支援不是很好
解決方案：
判斷當前執行裝置，如果是IOS用onInput事件處理操作
3）IOS中的DIV的click事件無效
最簡便的處理方案：給目標元素加一條樣式規則 cursor: pointer
2、低端機型不支援ES6和promise等語句
頁面在多數機型中有效，但在部分低端機型，如iphone6s、Iphone6中頁面無法渲染，出現白屏的情況，這個時候連線真機除錯，能看到iOS Safari 報錯
SyntaxError: Unexpected keyword 'const'. Const declarations are not supported in strict mode.
這就是低端機型不支援es6。
解決方案：
安裝以下外掛
babel-preset-es2015
babel-polyfill
es6-promise
四、如何判斷問題由webview引發
我前面戲稱這是一篇甩鍋教程，其實解決問題的思路都是先查己方問題，確定不是己方問題，再排查是哪一方引起的。
在工作中，有些時候APP端沒有處理好webview，也會引起H5頁面bug。H5頁面要執行在多平臺，如公眾號、安卓、IOS等，如何確定和歸納問題是屬於webview引起的，應該由和你配合的APP開發人員去處理呢：
- 首先，這類bug不是通用性的，如果一個bug在所有平臺中都暴露，這一定是你的問題。
- 這類bug是在特定的容器中暴露，在其它容器中正常，如安卓正常，IOS不正常。找到暴發問題的移動終端如IOS，查頁面在該移動端的瀏覽器能否正常執行，再看在app中是否能正常執行。
- 測測其它平臺，如PC端瀏覽器和安卓APP是否正常執行，採用排除法，確定只有IOS的有問題，基本就是IOS端APP的webview問題。
結語：
這個系列寫到這，基本結束了，有很多部分因手上沒有實際的專案可供參考就沒有整理進來，如支付寶的JSBridge除錯、後端服務常見報錯，會在以後的工作中慢慢完善進來。基本上都是一些工作中的總結，如有錯漏，歡迎交流指點。
與後端或APP聯調時如何定位問題
參考：