IOS、Android與H5通訊 原理淺析
IOS、Android與H5通訊-JsBridge原理(總結)
H5和原生app（ios，android）互動的載體基本都是基於Webview，可以把Webview看作是一個性能打八折的移動瀏覽器。
ios呼叫Javascript
簡單說下這幾種：WKWebView 、UIWebView、JavaScriptCore
WKWebView：蘋果在ios8之後也引入了專門負責處理網頁檢視的框架WebKit，Webkit是啥，接觸過H5、chrome的肯定都知道。chrome使用的也是基於webkit核心的Chromium引擎。WKWebView優點很多，支援更多H5特性，重新整理效率及內建手勢等，更加強大，效能也更優，不一一列舉，如果大家app不需要相容7及以下版本，不需要攔截一些請求，直接解析本地一些檔案，建議使用WKWebView。
UIWebView：較老webview，第一代。其中stringByEvaluatingJavaScriptFromString方法提供了OC與js互動的能力。
JavaScriptCore（ios7及以後版本）。JavaScriptCore框架是webkit重要組成部分，主要是對JS進行解析和提供執行環境，Javascript的虛擬機器，有點類似v8引擎，我自己這麼理解：）正是它為ios提供了執行JavaScript程式碼的能力。ReactNative應該都是通過JavaScriptCore去解析的（自己猜測）。
微信小程式的邏輯層也是由JavaScriptCore作為執行環境。
Javascript 呼叫 ios（oc、swift）原理：
目前兼顧相容性、比較成熟的方案還是通過攔截URL的方式。
UIWebView的特性，在UIWebView內發起的所有網路請求，都可以在Native層被捕捉到。
利用這一特性，就可以在UIWebView內發起一個自定義的網路請求，一般格式：jsbridge://method?引數1=value1&引數2=value2
於是在UIWebView中，只要發現是jsbridge://開頭的url，就不進行內容的載入，而是執行相應的邏輯處理。
嵌入webview的h5中的js一般是通過動態建立隱藏iframe標籤，賦值上文提到的連結給src，iframe不會引起頁面調轉、重新整理。
主要程式碼：
var src= 'jsbridge://method?引數1=value1&引數2=value2';
var iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.src = src;
document.body.appendChild(iframe);
//再刪除
iframesetTimeout(function() {
iframe.remove();
}, 50);
Android和Javascript互相呼叫
Android WebView也是基於WebKit引擎的一個元件，Android的Webview在低版本和高版本採用了不同的webkit版本核心，4.4後直接使用了Chrome。
這個元件功能非常強大，除了具有一般View的屬性和設定外，還可以對url請求、頁面載入、渲染、頁面互動進行強大的處理。
Android呼叫JS程式碼的方法主要有2種：
1、WebView的loadUrl
2、WebView的evaluateJavascript
JS呼叫Android程式碼的方法主要有3種：
1、WebView的addJavascriptInterface進行物件對映（低版本Android4以下好像有一些安全問題，本人沒有驗證）
2、WebViewClient 的 shouldOverrideUrlLoading 方法回撥攔截 url
3、WebChromeClient 的onJsAlert、onJsConfirm、onJsPrompt方法回撥攔截JS對話方塊alert()、confirm()、prompt() 訊息
一般常用onJsPrompt、prompt進行回撥攔截
JSBridge是Native程式碼與JS程式碼的通訊橋樑
設計一個jsbridge主要分幾大步驟：
第一步：設計出一個Native與JS互動的全域性中間物件
第二步：JS如何呼叫Native
第三步：Native如何得知api被呼叫
第四步：分析url-引數和回撥的格式
第五步：Native如何呼叫JS
第六步：H5中api方法的註冊以及格式
結合場景運用：
運用場景描述：在H5端點選頁面的傳送按鈕通知APP開啟微信分享功能，互動寫在傳送事件函式中，調起微信分享功能由app端操作
//給到app的json引數
let jsonData = {
reload: this.$route.query.no_reload ? false : true, //true需要重新載入返回列表頁，false不需要（根據需求定）
title: '上門試駕邀請', // 分享標題
desc: '邀請您試駕體驗xxxx', // 分享描述
link: 'https://xxxxx', // 分享連結
imgUrl: '', // 分享圖示
}
判斷裝置
device() { let u = window.navigator.userAgent; //android終端 let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //ios終端 let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); return {android: isAndroid, ios: isiOS} },
JS與IOS互動方式一：WKScriptMessageHandler
WKWebView有一個內容互動控制器，該物件提供了通過JS向WKWebView傳送訊息的途徑。需要設定MessageHandler，大家把這個功能簡稱為MessageHandler。
IOS具體實現參考：連結
這裡只說js呼叫
/ window.webkit.messageHandlers.<name>.postMessage(<messageBody>) // 這個name就是設定MessageHandler的第一個引數，與IOS約定的方法名 // messageBody 必須是json格式，為空時傳null window.webkit.messageHandlers.ShareContract.postMessage(jsonData);
JS與IOS互動方式二：WebViewJavascriptBridge互動 攔截url做事件處理，如果要傳引數，不建議用這種
//模擬 h5頁面在app端的跳轉
let data = '{"type": "basisTongji", "url":"' + "https://xxxx/basisTongji.html" + "}";
window.WebViewJavascriptBridge.javaScrpitRresponseJson(data);Android端互動
冒號前面區分是什麼功能，冒號後面是接收的引數
window.location.href = "ShareContract:" + JSON.stringify(jsonData);
運用場景二：登入失效的情況下，通知APP端，需要跳轉到登入頁面
- exit:true是和安卓約定的功能名及引數
- logout 是和IOS約定的方法名，注意當值為空的時候，需要傳null，不能什麼都不寫，不然會走代理。。。
let deviceP = device()
if (deviceP.android) {
window.location.href = "exit:true"
}
if (deviceP.ios) {
//ios 互動
window.webkit.messageHandlers.logout.postMessage(null);
}