WKWebView食用方案

iOS8之后，Apple终于推出了WKWebView用来取代菜鸡UIWebview。对此我是欣喜万分......个鬼啊。一下改动这么大，我已经猝不及防了好么。但是看到比UIWebView优雅一万倍的JS桥，不升级还是人？。升升升~~~~~~😂

使用WKWebView的好处：

1. 加载速度更快
2. 占用内存更少
3. 更流畅，基本能达到60pfs
4. 支持了内置手势
5. 支持了更多H5特性并允许使用JavaScript Nitro库
6. 能对webView做更细致的调整

WKWebView的食用方法

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

WKWebView基本使用

• WKWebView属于WebKit库，所以需要引入WebKit

    #import <WebKit/WebKit.h>
  

• 创建webView并添加至视图,通过loadRequest:方法即可完成webView的创建和加载，

    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

设置WKWebView的各种属性

因为其为readonly属性，必须初始化webView的时候一起初始化。实在有需要改变，应妥善使用KVO。

• preferences
  • minimumFontSize 最小字体
  • javaScriptEnabled
  • javaScriptCanOpenWindowsAutomatically
  • plugInsEnabled
• userContentController
  • addUserScript 添加JS代码
  • addScriptMessageHandler
  • 删除注入的JS代码
  • 删除JS桥
• Media相关

WKNavigationDelegate

webView加载过程中的一些代理方法

// 页面开始加载时触发该方法
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation;
// 当内容commit时触发该方法
- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation;
// 页面加载完成后触发该方法
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation;
// 页面加载失败触发该方法
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation;

** JS跳转页面的代理方法：**

// 接收到服务器跳转请求之后调用
- (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(WKNavigation *)navigation;
// 在收到响应后，决定是否可以跳转链接
- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler;
// 在发送请求之前，就要决定是否跳转默认为ALLOW
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler;

WKUIDelegate
提供了警告框，输入框，确认框的代理方法。

WKWebView 与JS互相调用

JS调用APP方法

1. JS调用APP方法时，需要在WKWebView创建的时候加上自定义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协议WKScriptMessageHandler。该协议必须实现一个方法

    - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
        NSString *name = message.name;
        
        if ([name isEqualToString:@"observe"]) {
            if ([message.body isKindOf:[NSString class]]) {
            //body就是一个参数
            NSString *body = [NSString stringWithString:message.body];
            //这里就是我们APP需要被调用的方法
            [self pushToDetailViewController];
            }
        }
    }
   

   需要注意的是，message.body对象为id类型，即可能是NSNumber, NSString, NSDate, NSArray, NSDictionary, and NSNull.也可以是JSON。所以需要和服务器进行协商。PS：即使已经和服务器协商body为字符串，一样不能直接进行数据比较。因为此时的body可能为这些类型的子类。建议必须比较的时候构建一个新的对象进行比较。

3. 到此需要APP端需要的代码已经完成。JS 端我们还需要进行最关键的一步。

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

call_native方法为JS中需要响应的事件。

window.webkit.messageHandlers.<name>.postMessage(<messageBody>)方法中name即为addScriptMessageHandler:name:方法中的@"observe" messageBody即为JS传给APP的参数。通过协议方法获取message.body即可。

4. JS方法的反向映射

   通过JS方法和参数，可以映射到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
        }
    }
   

   因为进行了方法的反向映射，编译时发现警告："performSelector may cause a leak because its selector is unknown"（因为performSelector的选择器未知可能会引起泄漏）。通过runtime反向映射的方法，编译器并不知道其返回值是什么，所以就抛出警告。我们只需要将其忽略即可。参考

WKWebView调用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。
转载后请保持文章内容的完整，及文章出处。本人保留所有版权相关权利。谢谢😁