WKWebView（oc与js交互详解）

目录
-WKWebView 初始化
-WKWebView 加载资源
-WKWebView WKNavigationDelegate
-WKWebView 原生与JS交互实现
-WKWebView 第三方库实现原理

一、WKWebView初始化
1、方法一，简单初始化
WKWebView *webView = [ [WKWebView alloc]initWithFrame:[UIScreen mainScreen].bounds];
2、方法二，使用WKWebViewConfiguration初始化
WKWebViewConfigration *webViewConfigration = [[WKWebViewConfigration alloc]init];
webViewConfigration.userContentController = [[WKUserContentController alloc]init];
WKWebView *webView = [ [WKWebView alloc]initWithFrame:[UIScreen mainScreen].bounds configration:webViewConfigration];

二、WKWebView 加载资源
1、加载网络资源
NSURL *url = [NSURL URLWithString:@"https://www.baidu.com/"];
NSURLRequest = [NSURLRequest requestWithURL:url];
[webView loadRequest:url];
2、加载本地资源
NSString *path = [[NSBundle mainBundle] pathForResource:@"index" type: @"HTML"];
NSString *htmlString = [NSString stringWithContentOfFile:path encoding: NSUTF8StringEncoding error:nil];
[webView loadHTMLString:htmlString baseURL:baseUrl];
请注意： 这里有坑！！有坑！！有坑！！！如果是从Bundle获取的文件是有问题的 移步这里https://www.jianshu.com/p/92776cd5b098(虽然语言是swift写的，问题是同样的问题)

三、WKNavigationDelegate代理
1、 (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
NSLog(@"是否允许这个导航");
decisionHandler(WKNavigationActionPolicyAllow);
}
这个方法是加载网页第一个执行的方法，因为它要确定是否允许或者取消加载这个页面。这里有一个枚举WKNavigationActionPolicy，其结构如下：
typedef NS_ENUM(NSInteger, WKNavigationActionPolicy) {
WKNavigationActionPolicyCancel,
WKNavigationActionPolicyAllow,
} API_AVAILABLE(macosx(10.10), ios(8.0));

• (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler {
  // Decides whether to allow or cancel a navigation after its response is known.

  NSLog(@"知道返回内容之后，是否允许加载，允许加载");
  //这个Block必须执行，不然会崩溃
  decisionHandler(WKNavigationResponsePolicyAllow);
  }

2、 (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(null_unspecified WKNavigation *)navigation {
NSLog(@"开始加载");
self.progress.alpha = 1;
[UIApplication sharedApplication].networkActivityIndicatorVisible = YES;
}
这个方法比较好理解，就是当网页内容开始加载到web view的时候调用
3、(void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(null_unspecified WKNavigation *)navigation {
NSLog(@"跳转到其他的服务器");
}
这个代理方法了。我们知道了网页是否允许加载，那么一旦不允许，那么这个加载过程就已经结束了，不会再执行其他的代理方法；如果允许，那么就会执行开始加载的代理方法，执行完开始加载的代理方法的时候再执行这个代理方法
4、 (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(null_unspecified WKNavigation *)navigation withError:(NSError *)error {
NSLog(@"网页由于某些原因加载失败");
self.progress.alpha = 0;
[UIApplication sharedApplication].networkActivityIndicatorVisible = NO;
}
5、 (void)webView:(WKWebView *)webView didCommitNavigation:(null_unspecified WKNavigation *)navigation {
NSLog(@"网页开始接收网页内容");
}
这个代理方法是在网页开始接受网络内容的时候调用
6、(void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigation *)navigation {
NSLog(@"网页导航加载完毕");
[UIApplication sharedApplication].networkActivityIndicatorVisible = NO;
self.title = webView.title;
[webView evaluateJavaScript:@"document.title" completionHandler:^(id _Nullable ss, NSError * _Nullable error) {
NSLog(@"----document.title:%@---webView title:%@",ss,webView.title);
}];
self.progress.alpha = 0;
}
网页已经加载完毕会调用这个代理方法
7、 (void)webView:(WKWebView *)webView didFailNavigation:(null_unspecified WKNavigation *)navigation withError:(NSError *)error {
NSLog(@"加载失败,失败原因:%@",[error description]);
self.progress.alpha = 0;
}
网页加载失败会调用的代理
8、 (void)webViewWebContentProcessDidTerminate:(WKWebView *)webView {
NSLog(@"网页加载内容进程终止");
}
9、 (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(null_unspecified WKNavigation *)navigation {

}
网页重定向会调用

四、WKWebView 原生与JS交互实现
1、js给原生发送消息
方法一，js通过触发URL的方式，定义一套协议头，把参数拼接到URL后面，然后WKWebView通过拦截URL，做到传值效果，但是不能立马拿到返回值，因为js是单线程的，而在原生里面则是多线程，如果要想拿到返回值，需要等到原声回调js函数才能拿到
上代码：
js代码，简单点的吧
<a href="webview://login?username=xiaoming&password=123456">点我去原生登陆</a>
oc代码，WKWebViewNavigationDelegate代理方法

• (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
  NSURL url = navigation.request.url;
  if ([[url scheme] isEqualToString: @"webview"]) {
  //取出拼接在URL后面的参数
  NSString *string = url.absoluteString;
  NSArray *array = [string compoentsSeparatedByString:@"?"];
  if(array.count>0){
  if([array[0] isEqualToString:@"login"]) {
  //获取登陆 参数
  NSMutableDictionary * parameters = [NSMutableDictionary Dictionary];
  for(NSString *str in [array.lastObject compoentsSeparatedByString:@"&"]) {
  NSArray * parameter = [str compoentsSeparatedByString:@"="];
  parameters[parameter.firstObject] = parameter.lastObject;
  }

  }
  decisionHandler(WKNavigationActionPolicyCancel);
  return;
  }
  decisionHandler(WKNavigationActionPolicyAllow);
  }

方法二、通过js通过调用这个函数来给wkwebview发送消息 window.webkit.messageHandlers.<name>.postMessage(<messageBody>) ，在WKUserContentController.h 文件中有介绍，其中<name>为协议的名称，<messageBody>为发送消息要传的参数
例如,：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>oc与JS交互传值Demo</title>
<script>
function sendMessage() {
alert('lll');
var name = 'xiaoming';
var password = '123456';
window.webkit.login.postMessage({'name':name,'password':password});
}
window.onload = function () {
let btn = document.getElementById('btn');
btn.onclick = sendMessage;
}
</script>
</head>
<body>
<input type="button" value="发消息去" id="btn">
</body>
</html>
这是一个简单的html
oc中接收js消息代码
//初始化
WKWebViewConfigration *webViewConfigration = [[WKWebViewConfigration alloc]init];
webViewConfigration.userContentController = [[WKUserContentController alloc]init];
webViewConfigration.userContentController
WKWebView *webView = [ [WKWebView alloc]initWithFrame:[UIScreen mainScreen].bounds configration:webViewConfigration];
//添加一个协议
[webViewConfigration.userContentController addScriptMessageHandler:self name:@"login"];
self必须遵守WKScriptMessageHandler协议并实现方法
-(void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
//messag.name为协议的名字"login"
//message.body为js传过来的值
}

2、oc给js发送消息
采用苹果提供的接口，可以动态注入js代码，也能调用js方法
oc代码如下：
[_webView evaluateJavaScript:@"outLogin(true)" completionHandler:^(id _Nullable meassge, NSError * _Nullable error) {
//消息执行完成的回调
}];
js代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>oc与JS交互传值Demo</title>
<script>
function outLogin(meassge) {
//退出登录，清理缓存
return true;
}
</script>
</head>
<body>
</body>
</html>
先到此下一篇讲WKWebViewJavaScriptBridge解析，也是基于原生代码的封装