1. WKWebView
1.1 H5調(diào)Native(H5向Native傳遞消息)
1.1.1 H5調(diào)Native_直接攔截URL方式
顧名思義就是在WebView加載URL的時(shí)候父虑，讀出URL字符串存筏，看看里面有沒(méi)有你和H5特別約定的標(biāo)記饶辙，如果有說(shuō)明H5想向你傳遞消息职辅，就干H5讓你干的事考传，忽略這個(gè)URL的定向跳轉(zhuǎn)。
攔截方法在下面回調(diào)：
webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void)
H5那邊的代碼：
就是重定向當(dāng)前頁(yè)面URL。就是改變了location.href的值棚愤。這里舉例子標(biāo)記是bridge://doingSomething，傳參{parma1=sss,parma2=dy}
h5AskNativeDoSomething1(){
location.href = "bridge://doingSomething&parma1=sss&parma2=dy"
}
Native代碼：
發(fā)現(xiàn)URL中包含bridge://doingSomething戚啥，可以判斷H5要讓Native干事情奋单，那么就decisionHandler(.cancel)忽略這個(gè)URL的跳轉(zhuǎn)，取出對(duì)應(yīng)參數(shù)干事情
func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
let changeURLString:String = navigationAction.request.url?.absoluteString ?? "未知"
print("要跳轉(zhuǎn)的URL:\(changeURLString)")
/***方法1 攔截關(guān)鍵標(biāo)識(shí) bridge://doingSomething猫十，根據(jù)自己和H5定了規(guī)則览濒，去判斷取相應(yīng)的參數(shù) ***/
//方法1:js調(diào)用native
if changeURLString.contains("bridge://doingSomething"){
decisionHandler(.cancel)
let list:[String] = changeURLString.split(separator: "&").compactMap { "\($0)" }
print(list)
//TODO
}else{
decisionHandler(.allow)
}
}
1.1.2 H5調(diào)Native_WKScriptMessageHandler 回調(diào)方式
這是系統(tǒng)JavaScriptCore提供的功能，用的時(shí)候需要引用類庫(kù)import JavaScriptCore拖云。
H5那邊代碼：
Native那邊通過(guò)WKScriptMessageHandler注冊(cè)的js對(duì)象暴露出來(lái)贷笛，這邊想向原生傳遞消息，固定寫(xiě)法：window.webkit.messageHandlers.(JS對(duì)象XXXX字符串).postMessage({})
其中 window.webkit.messageHandlers 都是固定寫(xiě)法宙项，.postMessage({})也是固定寫(xiě)法乏苦。這里例子完整寫(xiě)法就是
window.webkit.messageHandlers.DIYJSBridge.postMessage({})
記住，如果沒(méi)有參數(shù)傳遞尤筐，({})小括號(hào)里面的大括號(hào)也不能省略汇荐，如果省略{},native那邊會(huì)無(wú)響應(yīng)！如果有參數(shù)傳遞盆繁，那么{}里面就是鍵值對(duì),如：{"param1":1,"param2":2}
/**
* native那邊通過(guò)WKScriptMessageHandler注冊(cè)的js對(duì)象暴露出來(lái)掀淘，這邊想向原生傳遞消息，固定寫(xiě)法：window.webkit.messageHandlers.原生那邊暴露的js對(duì)象XXXX.postMessage({})
* 其中 window.webkit.messageHandlers 都是固定寫(xiě)法油昂，.postMessage({})也是固定寫(xiě)法革娄。記住倾贰，如果沒(méi)有參數(shù)傳遞，({})小括號(hào)里面的大括號(hào)也不能省略拦惋，如果省略{},native那邊會(huì)無(wú)響應(yīng)
*/
h5AskNativeDoSomething2(){
window.webkit.messageHandlers.DIYJSBridge.postMessage({})
}
Navtive代碼：
我們?cè)赪KWebView初始化的時(shí)候匆浙，給它配置WKWebViewConfiguration的里面添加一個(gè)類似監(jiān)聽(tīng)的東西：
let configuration:WKWebViewConfiguration = WKWebViewConfiguration()
//加監(jiān)聽(tīng)
let wkUserContnetController:WKUserContentController = WKUserContentController.init()
wkUserContnetController.add(self, name: "DIYJSBridge")//加監(jiān)聽(tīng)
configuration.userContentController = wkUserContnetController
webView = WKWebView.init(frame:self.view.bounds, configuration:configuration)
webView.scrollView.decelerationRate = UIScrollView.DecelerationRate.normal
webView.navigationDelegate = self
self.view.addSubview(webView)
wkUserContnetController.add(self, name: "DIYJSBridge")這里給self添加一個(gè)監(jiān)聽(tīng)，監(jiān)聽(tīng)到DIYJSBridge這個(gè)JS對(duì)象發(fā)送的消息（先這么理解）架忌。
然后實(shí)現(xiàn)WKScriptMessageHandler 協(xié)議的方法：
//MARK: - WKScriptMessageHandler
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
print("方法2：\(message.name)")
print("方法2：\(message.body)")
}
這里面可以根據(jù)WKScriptMessage 讀到方法的名稱name和參數(shù)body吞彤，然后就可以干事情。
1.1.3 H5調(diào)Native_三方庫(kù) WebViewJavascriptBridge
這個(gè)庫(kù)本質(zhì)還是攔截URL叹放，只是進(jìn)行了封裝饰恕，讓方法定義和傳參更加對(duì)象化。具體源碼井仰，有機(jī)會(huì)再寫(xiě)篇文章解析一下埋嵌！
H5那邊的代碼：
H5那邊需要在index.html定義一個(gè)方法，并調(diào)用俱恶。掛載對(duì)應(yīng)的JS對(duì)象雹嗦，完成相應(yīng)的配置初始化。
//初始化方法
function setupWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
window.WVJBCallbacks = [callback];
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'https://__bridge_loaded__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe); }, 0);
}
//調(diào)用完成配置初始化
setupWebViewJavascriptBridge((bridge) => {});
現(xiàn)在H5想調(diào)用Native方法
h5AskNativeDoSomething3(){
this.toast("方法3：H5調(diào)用Native")
window.WebViewJavascriptBridge.callHandler('NativeToDingSomething',{"Pa1":"11111"}, function responseCallback(responseData) {
console.log(responseData)
})
}
window.WebViewJavascriptBridge.callHandler()固定寫(xiě)法合是，其中參數(shù)
第一個(gè)參數(shù)：Native那邊定義標(biāo)記字符串了罪，如：`NativeToDingSomething`
第二個(gè)參數(shù)：傳參，為{}括起來(lái)的鍵值對(duì)聪全，如：`{"Pa1":"11111"}`
第三個(gè)參數(shù)：回調(diào)函數(shù)泊藕，如果Native那邊實(shí)現(xiàn)(下面Native實(shí)現(xiàn)了)了對(duì)應(yīng)的回調(diào)Block，所帶的回調(diào)參數(shù)會(huì)在這個(gè)responseData里面
Native代碼:
Native這邊引入了三方庫(kù)WebViewJavascriptBridge难礼，如后導(dǎo)入娃圆。
代碼初始化一個(gè)WebViewJavascriptBridge實(shí)例，并關(guān)聯(lián)上WebView
/**方法3 通過(guò)三方類庫(kù)**/
self.webViewBridge = WebViewJavascriptBridge.init(webView)
self.webViewBridge.setWebViewDelegate(self)
這時(shí)設(shè)置注冊(cè)一個(gè)標(biāo)記NativeToDingSomething蛾茉，發(fā)現(xiàn)H5 callHandler這個(gè)標(biāo)記后干事情....
self.webViewBridge.registerHandler("NativeToDingSomething") { (ret:Any?, callBack:WVJBResponseCallback?) in
print(ret)
//TODO
if callBack != nil{
callBack!(["result":true,"data":["One","Two","Three"]])
}
}
這樣H5那邊如果觸發(fā)了
window.WebViewJavascriptBridge.callHandler('NativeToDingSomething',{"Pa1":"11111"}, function responseCallback(responseData) {
console.log("Native傳遞過(guò)來(lái)的參數(shù)：",responseData)
})
}
Native這邊收到消息會(huì)打印
Optional({
Pa1 = 11111;
})
同時(shí)Native這邊執(zhí)行了回調(diào)callBack!(["result":true,"data":["One","Two","Three"]])
H5那邊的控制臺(tái)會(huì)打铀夏亍：
這樣就完成了一次H5發(fā)起的雙向通信！
1.2 Native調(diào)H5(Native向H5傳遞消息)
1.2.1 Native調(diào)H5_直接WebView調(diào)用evaluateJavaScript方法
open func evaluateJavaScript(_ javaScriptString: String, completionHandler: ((Any?, Error?) -> Void)? = nil)
如：
self.webView.evaluateJavaScript("nativeAskH5DoSomething('小孩')") { (any:Any?, err:Error?) in
if err == nil{
print("調(diào)用成功谦炬，返回結(jié)果\(any)")
}else{
print("調(diào)用失敗\(err)")
}
}
其中nativeAskH5DoSomething('小孩')是H5定義的js方法
window.nativeAskH5DoSomething = function(mess){
console.log(mess)
return "我們都是好孩子"
}
注意：這種方法調(diào)用的js方法悦屏，必須掛載在Web的window對(duì)象上,不然會(huì)找不到！
evaluateJavaScript去調(diào)用h5中的方法之后键思，這個(gè)function要執(zhí)行完成之后才會(huì)回調(diào)的app這邊窜管，如果這個(gè)function中報(bào)錯(cuò)了，回調(diào)到app這邊就會(huì)一直報(bào)錯(cuò)稚机。所以建議function中的東西可以先延遲執(zhí)行幕帆。
1.2.2 Native調(diào)H5_通過(guò) WebViewJavascriptBridge三方庫(kù)
這個(gè)H5調(diào)Native反過(guò)來(lái)相當(dāng)于H5注冊(cè)一個(gè)標(biāo)記，Native去調(diào)用赖条。
H5代碼失乾，注冊(cè)方法標(biāo)識(shí)
window.WebViewJavascriptBridge.registerHandler("nativeAskH5DoSomething_WebViewJavascriptBridge",(data,callBack) => {
this.toast("原生調(diào)用我了")
console.log("原生調(diào)用我了")
console.log("傳入?yún)?shù):",data)
callBack({"p1":1,"p2":90})
})
第一個(gè)參數(shù)data：表示原生傳入的參數(shù)
第二個(gè)參數(shù)callBack：是回調(diào)方法常熙，執(zhí)行后可穿參數(shù)給原生，告訴執(zhí)行情況
Native代碼 事件觸發(fā)執(zhí)行
self.webViewBridge.callHandler("nativeAskH5DoSomething_WebViewJavascriptBridge", data: "10086") { (ret:Any?) in
print("H5傳遞回來(lái)的參數(shù)結(jié)果：\(ret)")
}
執(zhí)行結(jié)果:
H5打印結(jié)果
Native打印結(jié)果
H5傳遞回來(lái)的參數(shù)結(jié)果：Optional({
p1 = 1;
p2 = 90;
})
這樣也完成了一次Native發(fā)起的雙向通信碱茁！
2. UIWebView
H5調(diào)Native： 1.1.1裸卫，1.1.3 和WKWebView相同！
Native調(diào)H5： 1.2.1纽竣，1.2.2 和WKWebView相同墓贿，多了一種方式！
唯一的區(qū)別就是在1.1.2上蜓氨，同時(shí)Native調(diào)H5多了使用JSContext方式
WKWebView用的是：WKScriptMessageHandler
UIWebView用的是:JSContext
因?yàn)楝F(xiàn)在都用WKWebView了聋袋，具體使用參照老鐵博客：http://www.reibang.com/p/88345985fe94
