WKWebView和js交互

• UIWebView 和 WKWebView 的区别

WKWebView 更快（占用内存可能只有 UIWebView 的1/3~1/4），没有缓存，更为细致地拆分了 UIWebViewDelegate 中的方法。

想要了解更多关于 WKWebView 的特性的，可以自行 Google，这里你可以简单地把它当做是轻量级的 UIWebView。

常用代理方法在 WKWebView 中，UIWebViewDelegate 与 UIWebView 被重构成了14类与3个协议，下面给出一些在 UIWebView 中常用的方法的 WKWebView 版本。

WKNavigationDelegate: 提供了追踪主窗口网页加载过程和判断主窗口和子窗口是否进行页面加载新页面的相关方法。

WKUIDelegate: 提供用原生控件显示网页的方法回调。
WKScriptMessageHandler: 提供从网页中收消息的回调方法。
类：

image.png

WKWebView相关API 展开原码
准备加载页面

UIWebViewDelegate - webView:shouldStartLoadWithRequest:navigationType
WKNavigationDelegate - webView:didStartProvisionalNavigation:

已开始加载页面，可以在这一步向view中添加一个过渡动画

UIWebViewDelegate - webViewDidStartLoad:
WKNavigationDelegate - webView:didCommitNavigation:

页面已全部加载，可以在这一步把过渡动画去掉

UIWebViewDelegate - webViewDidFinishLoad:
WKNavigationDelegate - webView:didFinishNavigation:

加载页面失败

UIWebViewDelegate - webView:didFailLoadWithError:
WKNavigationDelegate - webView:didFailNavigation:withError:
WKNavigationDelegate - webView:didFailProvisionalNavigation:withError:

以上方法分别存在于 UIWebViewDelegate 和 WKNavigationDelegate 中。
要注意的是 webview.delegate = self 需要改写为 webview.navigationDelegate = self。

因为苹果更改规则，iOS App Store不推荐使用的API。UIWebView废弃，以后使用WKWebView。

ITMS-90809：不推荐使用的API -Apple将停止接受使用UIWebView API的应用程序的提交。有关更多信息，请参见https://developer.apple.com/documentation/uikit/uiwebview 。

• WKWebView和JS交互

OC加入代码：

image.png

javaScript加入代码：

image.png

原理：双向注册方法，双向接收方法，OC可以调用js，js可以调用OC。

注册js调用oc方法

• (void)registerHandler:(NSString *) handlerName handler:(WVJBHandler)handler;
  oc调用js方法
• (void)callHandler:(NSString *) handlerName data:(id)data responseCallback:(WVJBResponseCallback)responseCallback;

1. runtime(method_exchangeImplementations)交换init方法：注册(_injectJavascriptFile)初始化js交互方法(_WebViewJavascriptBridge_js())。

   交互核心逻辑，js方法
   NSString * _WebViewJavascriptBridge_js() {

define WVJB_js_func(x) #x

// BEGIN preprocessorJSCode
static NSString * preprocessorJSCode = @__WVJB_js_func__(
                                                         ;(function() {
    console.log = (function (oriLogFunc) {
        return function (str) {
            window.webkit.messageHandlers.log.postMessage(str);
            oriLogFunc.call(console, str);
        }
    })(console.log);
    window.WebViewJavascriptBridge = {
    registerHandler: registerHandler,
    callHandler: callHandler,
    _handleMessageFromObjC: _handleMessageFromObjC
    };
    var sendMessageQueue = [];
    var messageHandlers = {};
    var responseCallbacks = {};
    var uniqueId = 1;
    function registerHandler(handlerName, handler) {
        messageHandlers[handlerName] = handler;
    }

    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);
        console.log('__bridge__'+ JSON.stringify(sendMessageQueue));
        sendMessageQueue = [];
    }

    function _dispatchMessageFromObjC(messageJSON) {
        _doDispatchMessageFromObjC();
        function _doDispatchMessageFromObjC() {
            var message = JSON.parse(messageJSON);
            var messageHandler;
            var responseCallback;
            if (message.responseId) {
                responseCallback = responseCallbacks[message.responseId];
                if (!responseCallback) {
                    return;
                }
                responseCallback(message.responseData);
                delete responseCallbacks[message.responseId];
            } else {
                if (message.callbackId) {
                    var callbackResponseId = message.callbackId;
                    responseCallback = function(responseData) {
                        _doSend({ handlerName:message.handlerName, responseId:callbackResponseId, responseData:responseData });
                    };
                }
                var handler = messageHandlers[message.handlerName];
                if (!handler) {
                    console.log("WebViewJavascriptBridge: WARNING: no handler for message from ObjC:", message);
                } else {
                    handler(message.data, responseCallback);
                }
            }
        }
    }
    function _handleMessageFromObjC(messageJSON) {
        _dispatchMessageFromObjC(messageJSON);
    }
})();
                                                        ); // END preprocessorJSCode

undef WVJB_js_func

return preprocessorJSCode;

};

2. 将和前端定义的协议方法从iOS发送给js。

   发送js
   {
   NSString messageJSON = [self _serializeMessage:message pretty:NO];
   [self _log:@"SEND" json:messageJSON];
   messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\" withString:@"\\"];
   messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@""" withString:@"\""];
   messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"'" withString:@"\'"];
   messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\n" withString:@"\n"];
   messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\r" withString:@"\r"];
   messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\f" withString:@"\f"];
   messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\u2028" withString:@"\u2028"];
   messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\u2029" withString:@"\u2029"];
   NSString javascriptCommand = [NSString stringWithFormat:@"WebViewJavascriptBridge._handleMessageFromObjC('%@');", messageJSON];
   if ([[NSThread currentThread] isMainThread]) {
   [self evaluateJavaScript:javascriptCommand completionHandler:nil];
   } else {
   dispatch_sync(dispatch_get_main_queue(), ^{
   [self evaluateJavaScript:javascriptCommand completionHandler:nil];
   });
   }
   }

3. js调用的方法 “ WebViewJavascriptBridge._handleMessageFromObjC ”

参考链接：https://github.com/housenkui/WebViewJavascriptBridge