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

使用WKWebView的好處：

1. 加載速度更快
2. 占用內(nèi)存更少
3. 更流暢穆碎，基本能達(dá)到60pfs
4. 支持了內(nèi)置手勢(shì)
5. 支持了更多H5特性并允許使用JavaScript Nitro庫
6. 能對(duì)webView做更細(xì)致的調(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的各種屬性

因?yàn)槠錇閞eadonly屬性，必須初始化webView的時(shí)候一起初始化放钦。實(shí)在有需要改變色徘，應(yīng)妥善使用KVO。

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

WKNavigationDelegate

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

// 頁面開始加載時(shí)觸發(fā)該方法
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation;
// 當(dāng)內(nèi)容commit時(shí)觸發(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)請(qǐng)求之后調(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ā)送請(qǐng)求之前褂策，就要決定是否跳轉(zhuǎn)默認(rèn)為ALLOW
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler;

WKUIDelegate
提供了警告框，輸入框颓屑，確認(rèn)框的代理方法斤寂。

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

JS調(diào)用APP方法

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

   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é)議必須實(shí)現(xiàn)一個(gè)方法

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

   需要注意的是器腋，message.body對(duì)象為id類型溪猿，即可能是NSNumber, NSString, NSDate, NSArray, NSDictionary, and NSNull.也可以是JSON钩杰。所以需要和服務(wù)器進(jìn)行協(xié)商。PS：即使已經(jīng)和服務(wù)器協(xié)商body為字符串诊县，一樣不能直接進(jìn)行數(shù)據(jù)比較讲弄。因?yàn)榇藭r(shí)的body可能為這些類型的子類。建議必須比較的時(shí)候構(gòu)建一個(gè)新的對(duì)象進(jìn)行比較翎冲。

3. 到此需要APP端需要的代碼已經(jīng)完成垂睬。JS 端我們還需要進(jìn)行最關(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
        }
    }
   

   因?yàn)檫M(jìn)行了方法的反向映射，編譯時(shí)發(fā)現(xiàn)警告："performSelector may cause a leak because its selector is unknown"（因?yàn)閜erformSelector的選擇器未知可能會(huì)引起泄漏）衔沼。通過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)載后請(qǐng)保持文章內(nèi)容的完整凝化，及文章出處稍坯。本人保留所有版權(quán)相關(guān)權(quán)利。謝謝??