WKWebView的使用总结(oc与js交互使用心得)
公司最近的项目用到的webview越来越多，各种方法回调和js交互
先总结一下webview协议方法的使用，再比较wk可替换的协议方法
UIWebViewDelegate几个常用的代理方法
1.//进行加载前的预判断，如果返回YES，则会进入后续流程（StartLoad,FinishLoad）。如果返回NO，这不会进入后续流程。
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;
2.//开始加载网页
- (void)webViewDidStartLoad:(UIWebView *)webView;
3.//加载完成
- (void)webViewDidFinishLoad:(UIWebView *)webView;
4.//加载失败
- (void)webView:(UIWebView *)webView didFailLoadWithError:(nullable NSError *)error;
然后再来看看wkwebview对于这有没有替代方法
先看看WKNavigationDelegate的协议方法
// 页面开始加载时调用
-(void)webView:(WKWebView*)webView didStartProvisionalNavigation:(WKNavigation*)navigation {
}
// 当内容开始返回时调用
-(void)webView:(WKWebView*)webView didCommitNavigation:(WKNavigation*)navigation {
}
// 页面加载完成之后调用
-(void)webView:(WKWebView*)webView didFinishNavigation:(WKNavigation*)navigation {
}
// 页面加载失败时调用
-(void)webView:(WKWebView*)webView didFailProvisionalNavigation:(WKNavigation*)navigation {
}
// 接收到服务器跳转请求之后调用
-(void)webView:(WKWebView*)webView didReceiveServerRedirectForProvisionalNavigation:(WKNavigation*)navigation {
}
// 在收到响应后，决定是否跳转
-(void)webView:(WKWebView*)webView decidePolicyForNavigationResponse:(WKNavigationResponse*)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler {
}
我们发现webview的load前，load结束以后和load失败三个方法在wkwebview里面都已经有替代方法了。现在要解决的就是加载前的判断，而wkwebview有一个
// 在发送请求之前，决定是否跳转
-(void)webView:(WKWebView*)webView decidePolicyForNavigationAction:(WKNavigationAction*)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
}
这个方法完美替代。监听web的请求。这样就非常清楚了，对于wkwebview的使用就会很轻松
=============================================================
总结完了以后就说一下我的项目，之前项目用的是webview，现在用更加节省性能的wkwebview替换了，现在总结一下这次替换
首先要导入<webkit/webkit.h>
1.加载的方法还是一样的
WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.bounds];
[webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]]];
[self.view addSubview:webView];
2.当与js进行交互的时候的处理（很重要的哦）
当与js交互要用一个代理WKScriptMessageHandler，是属于<JavaScriptCore/JavaScriptCore.h>里面的，WKWebview的加载就要改变一下了。要使用到这个js交互
WKWebViewConfiguration*config = [[WKWebViewConfigurationalloc]init];
//初始化偏好设置属性：
preferencesconfig.preferences= [WKPreferencesnew];
//是否支持JavaScript
config.preferences.javaScriptEnabled=YES;
加载webview的时候就要加载这个WKWebViewConfiguration
这是js调用oc的方法
然后就要注册一下方法名
一定要注意，在dealloc方法里面要remove掉注册的方法，方式内存泄漏
也要注意服务器在js编写h5页面按钮点击方法的时候，必须要按照这个格式进行编写
window.webkit.messageHandlers.AppModel.postMessage({body: '传数据'});
示例：window.webkit.messageHandlers.showShareDialog.postMessage(null);这是不需要传参数的示例
然后在协议方法里面接收，并进行其他的操作
这就是当在h5页面有个按钮，但是点击事件是在本地的时候写点击事件的方法
这就是在wkwebview中用js调用OC的代码
然后就是OC调用js的方法
1.JS中要有一个等待被OC调用的方法，示例：
2.OC调用方法，示例：
首先要实例化一个WKWebView，这里如果没有JS调用OC的功能的话，配置WKWebViewConfiguration
接下来就是对JS方法的调用，我们在需要调用JS方法的位置加上下面代码：
[self.webView evaluateJavaScript:@"alertMessage('hello')" completionHandler:^(id _Nullable item, NSError * _Nullable error) {
NSLog(@"alert");
}];
alertMessage('hello')就是html中预留的方法，completionHandler会在JS方法执行完后执行。这样就能实现OC调用JS方法，但是当我们运行的时候我们会发现，并没有出现弹框，我们已经说过，当使用WKWebView时，html的弹窗将不会再显示，那想显示弹窗，我们需要实现WKUIDelegate的代理方法：
首先要遵守WKUIDelegate代理：_webView.UIDelegate = self;
接下来实现代理方法：
#pragma mark WKUIDelegate
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler
{
UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"Warning" message:message preferredStyle:UIAlertControllerStyleAlert];
UIAlertAction *action = [UIAlertAction actionWithTitle:@"ok" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
completionHandler();//此处的completionHandler()就是调用JS方法时，`evaluateJavaScript`方法中的completionHandler
}];
[alert addAction:action];
[self presentViewController:alert animated:YES completion:nil];
}
这样，弹窗就会显示出来了，而且是iOS自己的原生弹窗，我们可以通过自己的需求，对其进行定制。
3.监听web的请求
使用场景，当需要跳转到h5页面注册一个东西，然后注册完了以后服务器会给你返回注册的结果，然后根据这个结果来修改上一个页面的注册状态
这是一个自己写的，芝麻信用绑定的demo。在之前的页面会显示当前账号是否绑定了芝麻信用，没有的话就可以进入绑定，已经绑定过得就不能点击。显示效果也不一样。这是又app跳转到h5绑定的，在图上这个h5页面，提交了个人信息以后，芝麻信用会根据你提交的信息判断是否可以绑定，可以绑定的话会给你返回一个字段，示例
无论失败还是成功，都可以监听到，然后去进行下一步的操作
作为开发者，在项目应用中我们应该经常需要给js端传输数据显示，在wkwebview中使用注入js的方法给js传输数据
不过需要注意这个方法需要在webview完成加载以后才能调用。这个是js方法的一个回调，我们h5人员告诉我，这个方法在h5端是一个全局的方法，是不安全的。如果在其他地方再写一个相同名字的方法，这个方法就会被覆盖掉而不会再被执行。所以我们可以关注一下WebViewJavascriptBridge的使用，这个第三方更方便快捷的让我们使用js与本地的交互。以后会把我WebViewJavascriptBridge的工作使用总结出来。
