應(yīng)對蘋果公司的號召，2020年還是要把之前老項(xiàng)目的UIWebView都替換成WKWebView。
單純換View倒也不難，除了代理方法有點(diǎn)區(qū)別之外，加載網(wǎng)頁的使用方式都是類似的。
但現(xiàn)在越來越多應(yīng)用都采用混合開發(fā)的模式，所以就需要Native與JS之間進(jìn)行良好的通信。
之前UIWebView與JS通信是采用JavaScriptCore來實(shí)現(xiàn)的
通過給JSContext動態(tài)注入OC對象來實(shí)現(xiàn)JS調(diào)用Native
由于以后蘋果不允許使用UIWebView我這里也就不多講述其實(shí)現(xiàn)了
主要還是說一說WKWebView是如何與JS之間交互的！

開講之前

今天我們從兩個方面來講述OC與JS交互：
1、通過原生的WKWebViewConfiguration
2、通過使用WebViewJavascriptBridge

通過Native調(diào)用JS的方式，沒有任何爭議，幾乎都是用WebView提供的

[webView evaluateJavaScript:@"" completionHandler:^(id _Nullable result, NSError * _Nullable error) {
        
}];

這里我們重點(diǎn)討論JS如何調(diào)用Native

WKWebViewConfiguration、WKUserContentController

image.png

WKWebViewConfiguration對象有一個很關(guān)鍵的屬性參數(shù)userContentController
我們可以把它當(dāng)做內(nèi)容交互控制器，可以自己注入JS代碼及JS調(diào)用原生方法注冊

- (void)addScriptMessageHandler:(id <WKScriptMessageHandler>)scriptMessageHandler name:(NSString *)name;

addScript需要與remove成對出現(xiàn)，在dealloc時需要注意調(diào)用

- (void)removeScriptMessageHandlerForName:(NSString *)name;

在JS里我們可以通過

window.webkit.messageHandlers.<注冊的方法名>.postMessage(<需要傳遞的參數(shù)>);

的方式來調(diào)用我們在Native端注冊的方法
同時Native會通過WKScriptMessageHandler代理方法

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;

接收J(rèn)S傳遞過來的參數(shù)，參數(shù)內(nèi)容都封裝在WKScriptMessage對象中
其中，name為注冊的方法名，body為傳遞的參數(shù)對象
由于只能接收一個參數(shù)，所以JS通常采取Object轉(zhuǎn)JSON字符串的形式傳遞多參數(shù)，Native這邊用NSDictionary接收

WebViewJavascriptBridge

這是github上非?；鸬囊粋€橋接庫https://github.com/marcuswestin/WebViewJavascriptBridge有12.9k的Star
看了看他的源碼，整個處理的非常優(yōu)雅
主要是利用iframe設(shè)置src的方式通知Native完成通信過程
所以從UIWebView到WKWebView的改動幾乎很小，并且還支持相互的通信之間的回調(diào)，可以說是非常全面的Bridge了
我們在這里簡單的分析一下這個庫是如何實(shí)現(xiàn)通信的

簡易流程圖

image.png

JS調(diào)用Native

打開WebView頁面時，默認(rèn)通過iframe設(shè)置

WVJBIframe.src = 'https://__bridge_loaded__';

客戶端在攔截到初始化的指令時會通過這兩步進(jìn)行預(yù)設(shè)好的JS注入

if ([_base isBridgeLoadedURL:url]) {
    [_base injectJavascriptFile];
}
......
- (void)injectJavascriptFile {
    NSString *js = WebViewJavascriptBridge_js();
    [self _evaluateJavascript:js];
}

初始化工作做好之后，按照流程就是Native端的注冊方法

[_bridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) {
     NSLog(@"testObjcCallback called: %@", data);
     responseCallback(@"Response from testObjcCallback");
}];

等待JS端的調(diào)用
JS通過bridge對象的callHandler方法

var callbackButton = document.getElementById('buttons').appendChild(document.createElement('button'))
     callbackButton.innerHTML = 'Fire testObjcCallback'
     callbackButton.onclick = function(e) {
     bridge.callHandler('testObjcCallback', {'foo': 'bar'}, function(response) {
          log('JS got response', response)
     })
}
......

function callHandler(handlerName, data, responseCallback) {
     if (arguments.length == 2 && typeof data == 'function') {
            responseCallback = data;
            data = null;
     }
     _doSend({ handlerName:handlerName, data:data }, responseCallback);
}  
function _doSend(message, responseCallback) {
     if (responseCallback) {
            var callbackId = 'cb_'+(uniqueId++)+'_'+new Date().getTime();
            responseCallbacks[callbackId] = responseCallback;
            message['callbackId'] = callbackId;
     }
     sendMessageQueue.push(message);
     messagingIframe.src = 'https://__wvjb_queue_message__/';
}

攔截URL變化主要是通過WebView的delegate獲取

/// UIWebView 通過
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;
/// WKWebView 通過
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler;

設(shè)置了src為https://__wvjb_queue_message__/，Native攔截之后通過獲取sendMessageQueue中的message完成方法名的提取和參數(shù)的提取

[_webView evaluateJavaScript:[_base webViewJavascriptFetchQueyCommand] completionHandler:^(NSString* result, NSError* error) {
        if (error != nil) {
            NSLog(@"WebViewJavascriptBridge: WARNING: Error when trying to fetch data from WKWebView: %@", error);
        }
        [_base flushMessageQueue:result];
}];

通過messageJSONString中的信息匹配到之前注冊的方法名和block，調(diào)用執(zhí)行。
如果Native注冊的方法中有返回responseCallBack信息，則將返回的信息參數(shù)與JS提供的callBackId組成新的對象，通知JS解析，JS通過callBackId找到對應(yīng)方法并傳遞參數(shù)執(zhí)行

WVJBMessage* msg = @{ @"responseId":callbackId, @"responseData":responseData };
[self _queueMessage:msg];

以上就是完整的JS調(diào)用Native流程

Native調(diào)用JS

反過來，Native調(diào)用JS，其實(shí)雙方注冊方法和調(diào)用方法都是類似的，整個流程反一下就可以了，具體我這里就不細(xì)說了，只要前面的理解了，后面就很容易想明白了，可以參考源碼Demo。

總結(jié)一下

1、JS通知Native信息變化通過

iframe.src='https://__bridge_loaded__/'                  // 初始化
iframe.src='https://__wvjb_queue_message__/'            // 發(fā)送消息

2、Native通知JS傳遞參數(shù)通過

[webView evaluateJavaScript:@"" completionHandler:^(id _Nullable result, NSError * _Nullable error) {}];

整個交互過程依賴雙方存儲注冊方法信息，并通過方法名和參數(shù)來完成跨界調(diào)用

這個第三方庫考驗(yàn)開發(fā)者要有一些基礎(chǔ)的前端開發(fā)經(jīng)驗(yàn)，否則對于里面近半數(shù)的JS源碼可能不太理解，重點(diǎn)是設(shè)置iframe.src

以上就是本次我想分享的關(guān)于WKWebView與JS交互的內(nèi)容
ps：內(nèi)容建議結(jié)合源碼Demo一起食用，更容易理清思路
希望對你有幫助