WKWebView食用方案

2016-08-31 本文已影响350人 queuey

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

使用WKWebView的好处：

加载速度更快
占用内存更少
更流畅，基本能达到60pfs
支持了内置手势
支持了更多H5特性并允许使用JavaScript Nitro库
能对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方法

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];

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可能为这些类型的子类。建议必须比较的时候构建一个新的对象进行比较。
到此需要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即可。

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