iOS8之后，Apple終于推出了WKWebView用來取代菜雞UIWebview。對此我是欣喜萬分......個鬼啊。一下改動這么大，我已經(jīng)猝不及防了好么。但是看到比UIWebView優(yōu)雅一萬倍的JS橋，不升級還是人？。升升升~~~~~~??

使用WKWebView的好處：

1. 加載速度更快
2. 占用內(nèi)存更少
3. 更流暢，基本能達到60pfs
4. 支持了內(nèi)置手勢
5. 支持了更多H5特性并允許使用JavaScript Nitro庫
6. 能對webView做更細致的調(diào)整

WKWebView的食用方法

配合apple官方文檔，Using JavaScript with WKWebView in iOS 8一起食用更佳

WKWebView基本使用

• WKWebView屬于WebKit庫，所以需要引入WebKit

    #import <WebKit/WebKit.h>
  

• 創(chuàng)建webView并添加至視圖,通過loadRequest:方法即可完成webView的創(chuàng)建和加載，

    WKWebView *webView = [[WKWebView alloc] init];
    webView.frame = rect;
    [self.view addSubview:self.webView];
    [self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]]];
  

WKWebViewConfiguration

設(shè)置WKWebView的各種屬性

因為其為readonly屬性，必須初始化webView的時候一起初始化。實在有需要改變，應(yīng)妥善使用KVO。

• preferences
  • minimumFontSize 最小字體
  • javaScriptEnabled
  • javaScriptCanOpenWindowsAutomatically
  • plugInsEnabled
• userContentController
  • addUserScript 添加JS代碼
  • addScriptMessageHandler
  • 刪除注入的JS代碼
  • 刪除JS橋
• Media相關(guān)

WKNavigationDelegate

webView加載過程中的一些代理方法

// 頁面開始加載時觸發(fā)該方法
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation;
// 當(dāng)內(nèi)容commit時觸發(fā)該方法
- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation;
// 頁面加載完成后觸發(fā)該方法
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation;
// 頁面加載失敗觸發(fā)該方法
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation;

** JS跳轉(zhuǎn)頁面的代理方法：**

// 接收到服務(wù)器跳轉(zhuǎn)請求之后調(diào)用
- (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(WKNavigation *)navigation;
// 在收到響應(yīng)后，決定是否可以跳轉(zhuǎn)鏈接
- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler;
// 在發(fā)送請求之前，就要決定是否跳轉(zhuǎn)默認為ALLOW
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler;

WKUIDelegate
提供了警告框，輸入框，確認框的代理方法。

WKWebView 與JS互相調(diào)用

JS調(diào)用APP方法

1. JS調(diào)用APP方法時，需要在WKWebView創(chuàng)建的時候加上自定義configuration屬性。（請注意@"observe"為JS要傳給webView的方法，后文會有具體解釋）

   WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
   [configuration.userContentController addScriptMessageHandler:self name:@"observe"];
   WKWebView *webView = [[WKWebView alloc] initWithFrame:webViewRect configuration: configuration];
   webView.navigationDelegate = self;
   [self.view addSubView:webView];
   

2. addScriptMessageHandler:方法需要scriptMessageHandler遵循WKScriptMessageHandler協(xié)議WKScriptMessageHandler。該協(xié)議必須實現(xiàn)一個方法

    - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
        NSString *name = message.name;
        
        if ([name isEqualToString:@"observe"]) {
            if ([message.body isKindOf:[NSString class]]) {
            //body就是一個參數(shù)
            NSString *body = [NSString stringWithString:message.body];
            //這里就是我們APP需要被調(diào)用的方法
            [self pushToDetailViewController];
            }
        }
    }
   

   需要注意的是，message.body對象為id類型，即可能是NSNumber, NSString, NSDate, NSArray, NSDictionary, and NSNull.也可以是JSON。所以需要和服務(wù)器進行協(xié)商。PS：即使已經(jīng)和服務(wù)器協(xié)商body為字符串，一樣不能直接進行數(shù)據(jù)比較。因為此時的body可能為這些類型的子類。建議必須比較的時候構(gòu)建一個新的對象進行比較。

3. 到此需要APP端需要的代碼已經(jīng)完成。JS 端我們還需要進行最關(guān)鍵的一步。

    function call_native () {
         var prop = selection.val();
         window.webkit.messageHandlers.observe.postMessage(prop);
    }

call_native方法為JS中需要響應(yīng)的事件。

window.webkit.messageHandlers.<name>.postMessage(<messageBody>)方法中name即為addScriptMessageHandler:name:方法中的@"observe" messageBody即為JS傳給APP的參數(shù)。通過協(xié)議方法獲取message.body即可。

4. JS方法的反向映射

   通過JS方法和參數(shù)，可以映射到APP的方法。

    - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
        NSString *messageName = message.name;
        messageName = [messageName stringByAppendingString:@":"];
        SEL selector = NSSelectorFromString(messageName);
        if ([self respondsToSelector:selector]) {
    #pragma clang diagnostic push
    #pragma clang diagnostic ignored "-Warc-performSelector-leaks"
            [self performSelector:selector withObject:message.body];
    #pragma clang diagnostic pop
        }
    }
   

   因為進行了方法的反向映射，編譯時發(fā)現(xiàn)警告："performSelector may cause a leak because its selector is unknown"（因為performSelector的選擇器未知可能會引起泄漏）。通過runtime反向映射的方法，編譯器并不知道其返回值是什么，所以就拋出警告。我們只需要將其忽略即可。參考

WKWebView調(diào)用JS方法

•   [self.webView evaluateJavaScript:@"JS方法" completionHandler:^(id _Nullable done, NSError * _Nullable error) {
    
    }];
  

傳入正確的JS方法即可食用

向JS里注入代碼

//向JS中注入代碼
NSString *jsMethodString = @"";
WKUserScript *script = [[WKUserScript alloc] initWithSource:jsMethodString injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
[self.webView.configuration.userContentController addUserScript:script];

本文Demo地址

--EOF--
本文遵守CC-BY。
轉(zhuǎn)載后請保持文章內(nèi)容的完整，及文章出處。本人保留所有版權(quán)相關(guān)權(quán)利。謝謝??