WKWebView 和 H5 的交互初体验

WKWebView 是 iOS 8 推出的(和 iPhone 6 一起出来的)，用来替代 UIWebView 的一个新的 WebView 组件。
相对于 UIWebView 来说，有下面几个优势：

1. 更多的 HTML5 支持。
2. 高达 60 fps 的刷新率和滚动手势支持。
3. 与 Safari 相同的 JavaScript 引擎。
4. 可以获取网页加载进度：estimateProgress

---

WKWebView 的基本使用。

首先要导入 #import <WebKit/WebKit.h>。

并创建 WKWebView

 // 创建浏览器个人偏好设置
    WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
    // 创建浏览器 OC 和 JS 交互的对象
    WKUserContentController *contentController = [[WKUserContentController alloc] init];
    // 设置浏览器的 JS 和 OC 交互的对象
    configuration.userContentController = contentController;
    
    // 设置浏览器的配置信息。
    configuration.preferences = [[WKPreferences alloc] init];
    configuration.preferences.minimumFontSize = 45; // 设置浏览器的最小字体。
    configuration.preferences.javaScriptEnabled = YES;// 打开 JS 交互。
    
    WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.frame configuration:configuration];
    _webView = webView;
    
    
    // 设置浏览器自身的一些配置信息。
    webView.allowsBackForwardNavigationGestures = YES; // 是否允许右滑返回上一页面
    webView.allowsLinkPreview = YES; // 是否允许链接预览(3d touch)
    
    webView.UIDelegate = self;
    webView.navigationDelegate = self;
    
    
    [self.view addSubview:webView];
    
    // 加载本地 HTML 文件
    [webView loadHTMLString:[NSString stringWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"demo.html" ofType:nil] encoding:NSUTF8StringEncoding error:nil] baseURL:nil];

由于 WKWebView 的执行初始化方法是：- (instancetype)initWithFrame:(CGRect)frame configuration:(WKWebViewConfiguration *)configuration NS_DESIGNATED_INITIALIZER;

所以，我们就知道了，必须创建一个 WKWebViewConfiguration 的对象用来初始化 WKWebView.

WKWebViewConfiguration 中有两个属性比较重要。

// 个人偏好设置。可以设置是否开启 JavaScript 交互，以及 浏览器显示的最小字体等。
@property (nonatomic, strong) WKPreferences *preferences;
// WKWebView 中 JS 和 OC 交互的桥梁。
@property (nonatomic, strong) WKUserContentController *userContentController;

WKWebView & WKWebViewConfiguration & WKPreferences & WKUserContentController 之间的关系。

15211017952964.jpg

---

WKWebView 中，OC 调用 JS 的方法

HTML 文件中，有一个 JS 函数。

function jsFuncInHTML() {
        alert("我是 JS 的方法，我被 OC 调用了!");
        return {
            name : "李四",
            age : 22
        };
    }

在 WKWebView 中，OC 主动调用 JS 的方法很简单。

// 使用 
[webView evaluateJavaScript:@"jsFuncInHTML()" completionHandler:^(id _Nullable dataFromJS, NSError * _Nullable error) {
        if (error) {
            NSLog(@"%@",error);
            return ;
        }
        
        NSLog(@"dataFromJS : %@",dataFromJS);
    }];

等价于 UIWebView 中的 [UIWebView new] stringByEvaluatingJavaScriptFromString:<#(nonnull NSString *)#>。

但 stringByEvaluatingJavaScriptFromString 的返回值仅仅只能接受字符串。

其中 completionHandler 是 JS 执行完成之后的回调，会将 JS 方法的返回值获取到。

当然，我们也可以使用 WKUserScript 把一个 JS 文件，使用上面的方式注入到 WKWebView 中。

 // 也可以把一个 JS 文件注入到 WKWebView 中。
    NSString *jsSource = [NSString stringWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"js.js" ofType:nil] encoding:NSUTF8StringEncoding error:nil];
    
    WKUserScript *script2 = [[WKUserScript alloc] initWithSource:jsSource injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
    
    [webView.configuration.userContentController addUserScript:script2];

对于 JS 中普通的 JS 变量和函数。

var jsVar = "我是普通的 JS 变量";
var jsFunction = function() {
    return "我是普通的 JS Function";
}

获取方式：

// 获取普通的 JS 变量
    [webView evaluateJavaScript:@"jsVar" completionHandler:^(id _Nullable jsVar, NSError * _Nullable error) {
        NSLog(@"%@",jsVar);
    }];
    
    // 获取普通的 JS 方法返回值
    [webView evaluateJavaScript:@"jsFunction()" completionHandler:^(id _Nullable returnValue, NSError * _Nullable error) {
        NSLog(@"%@",returnValue);
    }];

---

WKWebView JS 调用 OC 的方法。

在使用 WKWebView 的时候，JS 调用 OC 的方法主要借助于 WKWebView 中的 WKWebViewConfiguration 的 userContentController 来进行。

主要步骤包括：

首先在 OC 中注册 JS 方法需要调用的 OC 方法。

[webView.configuration.userContentController addScriptMessageHandler:self name:@"jsFunc"];

其中 参数 self 必须遵守 WKScriptMessageHandler 协议。

此协议中有一个必须实现的方法。

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

这行代码的意思是：**在 JS 中调用 jsFunc 方法的时候，会间接的调用 self 身上的 `- (void)userContentController:(WKUserContentController )userContentController didReceiveScriptMessage:(WKScriptMessage )message; 方法。

其中 message 参数是 WKScriptMessage 的类型。

这里类型有2个比较重要的属性。

// JS 回传过来的数据
@property (nonatomic, readonly, copy) id body;
// js 方法的名字。
@property (nonatomic, readonly, copy) NSString *name;

基本步骤：

首先注册一个 JSFunc ，表示当前控制器会处理这个 JS 函数的调用。

[webView.configuration.userContentController addScriptMessageHandler:self name:@"jsFunc"];

其次，让当前控制器遵守 WKScriptMessageHandler 协议，并实现协议方法。

// 收到 JS 的方法的时候调用。
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    
    if ([message.name isEqualToString:@"jsFunc"]) {
        NSDictionary *dataFromJS = message.body;
        NSLog(@"%@ %@",dataFromJS,message.name);
    } else if ([message.name isEqualToString:@"jsFunc2"]) {
        //...do something here.
    }
    
}

最后，在 HTML 文件中，使用固定调用语法，调用 JS 函数，并传递参数到 OC。

window.webkit.messageHandlers.jsFunc.postMessage({name : "李四",age : 22});

这里的固定表示 : window.webkit.messageHandlers.<你在 OC 中注册的需要观察的 JSFuncName>.postMessage(<需要传递给 OC 的参数>)
除了尖括号的位置，其他地方写法都是定死了。

毕竟是 iOS 框架的浏览器，苹果想在 WKWebView 的 window 下面添加 webkit.messageHanlders.xxxxx. 还是很简单的事情。

运行结果：

2018-03-15 21:30:55.678 WKWebView 之一基本使用[4657:1075184] {
    name = 李四,
    age = 22,

} jsFunc

关于 WKWebView 中 JS 调用 OC 的方法，可以画一张图来理解。

15211211766494.jpg

---

最后总结：

1. 使用 WKWebView 在不借助第三方框架的情况下，达到 JS 和 OC 交互，需要借助
   WKWebView.WKWebViewConfiguration.UserContentController 这个对象。
2. 使用 WKWebView.WKWebViewConfiguration.UserContentController 的 addScriptMessageHandler 方法，简历 JSFunc 和 OCMethod 的映射关系。
3. 让处理 JS 回调的 OC 方法对象(也即是当前控制器遵守 WKScriptMessageHandler。
4. 实现协议的 ：- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message 方法。
5. WKWebView.configuration.userContentController 是把所有的 JS 回调 OC 都聚合在了 - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message 一个方法之中。
6. 在这个代理方法中，WKScriptMessage 有两个属性比较重要， name 可以判断是那个 JSFunc 的调用，body 则是 JS Func 传递过来的数据。

UIWebView & JSContext 的方式是，OC 和 JS 共享一个 JS 执行上下文。两端的互相调用都比较符合直觉，也比较好用。

WKWebView 则是依赖 userContentController。
首先，要注册需要观察的 JSFunction 函数 [webView.configuration.userContentController addScriptMessageHandler:self name:@"jsFunc"];。
然后，在 JS 中调用 window.webkit.messageHandlers.jsFunc.postMessage({name : "李四",age : 22});。
最后，所有被注册的 JSFunction 调用最终都会导入到 - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message 这个方法之中。