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];
--EOF--
本文遵守CC-BY。
转载后请保持文章内容的完整，及文章出处。本人保留所有版权相关权利。谢谢😁
网友评论