WKWebView 和 UIWebView
iOS8 以后，苹果推出了新框架 Wekkit ，提供了替换UIWebView的组件WKWebView。使用WKWebView，速度会更快，占用内存少。
WKWebView的特性：
- 在性能、稳定性、功能方面有很大提升，直观体现是内存占用变少；
- 允许JavaScript的Nitro库加载并使用（UIWebView中限制）；
- 支持了更多的HTML5特性；
- 高达60fps的滚动刷新率以及内置手势；
- 将UIWebViewDelegate与UIWebView重构成了14类与3个协议（详见SDK）；
iOS与JS交互的方法：
1.拦截url（适用于UIWebView和WKWebView）
2.JavaScriptCore（只适用于UIWebView，iOS7+）
3.WKScriptMessageHandler（只适用于WKWebView，iOS8+）
4.WebViewJavascriptBridge（适用于UIWebView和WKWebView，属于第三方框架）
下面以假设的需求进行示例代码讲解，需求：
（1）h5页面调用原生扫二维码（h5调用原生）
（2）原生扫码成功后，将结果返回给h5（原生调用h5）
1. 拦截url
（1）web调用原生：
- 和后端同事协定好协议，如
jxaction://scan表示启动二维码扫描，jxaction://location表示获取定位。- 实现 UIWebView 代理的
shouldStartLoadWithRequest:navigationType:方法，在方法中对url进行拦截，如果是步骤 <1> 中定义好的协议则执行对应原生代码，返回false，否则返回true继续加载原url。
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
if ([request.URL.absoluteString hasPrefix:@"jxaction://scan"]) {
//调用原生扫描二维码
return NO;
}
return YES;
}
（2）原生调用 js
若（1）中扫描二维码结束后，需要把扫描结果返回给web页，直接调用UIWebView的
stringByEvaluatingJavaScriptFromString:方法，或者WKWebView的evaluateJavaScript:completionHandler:方法。
[self.webView stringByEvaluatingJavaScriptFromString:@"scanResult('我是扫描结果~')"];
2. JavaScriptCore
方法一 Web 调用原生只适合简单的调用，如果要传递参数，虽然也可以拼接在url上，如 jxaction://scan?method=aaa，但是需要我们自行对字符串进行分割解析，并且特殊字符需要编码。在iOS7系统提供了JavaScriptCore，可以更优雅地实现 js 与原生的交互。
JavaScriptCore 是 Safari 的 JavaScript 引擎，在 iOS7 之后苹果开放了JavaScriptCore框架，开发者可以通过其提供的OC接口来使用JavaScriptCore。说白了就是它提供了执行JavaScript代码的能力，相当于一个JavaScript的虚拟机。JavaScriptCore是开源的，感兴趣可以研究一下：https://trac.webkit.org/browser/trunk/Source/JavaScriptCore
JavaScriptCore.h中包含了框架中几个比较重要的类：
#import "JSContext.h"
#import "JSValue.h"
#import "JSManagedValue.h"
#import "JSVirtualMachine.h"
#import "JSExport.h"
JSContext是JavaScript的运行上下文，他主要作用是执行js代码和注册native方法接口JSValue是JSContext执行后的返回结果，他可以是任何js类型（比如基本数据类型和函数类型，对象类型等），并且都有对象的方法转换为native对象。JSManagedValue是JSValue的封装，用它可以解决js和原声代码之间循环引用的问题JSVirtualMachine管理JS运行时和管理js暴露的native对象的内存JSExport是一个协议，通过实现它可以完成把一个native对象暴漏给js
（1）js 调用原生
- 新建类继承自NSObject（如AppJSObject）。
- h文件中声明一个代理并遵循
JSExport，代理内的方法和 js 定义的方法名一致。 - .m文件中实现 <2> 代理中对应的方法，可以在方法内处理事件或通知代理。
- 在 UIWebView 加载完成的代理中把 AppJSObject 实例对象类注入到 JS 中，那么在 js 中调用方法就会调用到原生 AppJSObject 实例对象中对应的方法了。
AppJSObject.h
#import <Foundation/Foundation.h>
#import <JavaScriptCore/JavaScriptCore.h>
@protocol AppJSObjectDelegate <JSExport>
-(void)scan:(NSString *)message;
@end
@interface AppJSObject : NSObject<AppJSObjectDelegate>
@property(nonatomic,weak) id<AppJSObjectDelegate> delegate;
@end
AppJSObject.m
#import "AppJSObject.h"
@implementation AppJSObject
-(void)scan:(NSString *)message{
[self.delegate scan:message];
}
@end
h5代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<input type="button" name="" value="扫一扫" onclick="scan()">
<br/>
<p id="result">扫描结果：</p>
<script type="text/javascript">
//调用APP的扫描方法 h5->app
function scan(){
app.scan('scanResult');
}
//扫描结果回调方法 app->h5
function scanResult(result){
document.getElementById("result").innerHTML = '扫描结果：' + result;
}
</script>
</body>
</html>
把 AppJSObject 实例对象类注入到 JS 中:
-(void)webViewDidFinishLoad:(UIWebView *)webView
{
JSContext *context=[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
AppJSObject *jsObject = [AppJSObject new];
jsObject.delegate = self;
context[@"app"] = jsObject;
}
也可以通过block实现而不创建新类AppJSObject:
context[@"openAlbum"] = ^(){
NSLog(@"js调用oc打开相册");
};
（2）原生调用 js
可以通过方法一中的方法，也可以通过JSContext：
JSContext *context=[_mainWebView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
NSString *alertJS= [NSString stringWithFormat:@"%@('%@')",_photoMethod,fileUrl];
[context evaluateScript:alertJS];
3. WKScriptMessageHandler
现在很多 app 都是支持 iOS8+，很多人使用WKWebView代替了UIWebView，但是WKWebView并不支持方法二。此时我们可以使用WKWebView的WKScriptMessageHandler
- JS 与 iOS 约定好方法，用作 JS 在调用 iOS 时的方法，如 scan:
- iOS 使用 WKUserContentController 的
-addScriptMessageHandler:name:方法监听 name 为 scan 的消息； - JS通过
window.webkit.messageHandlers. scan.postMessage()的方式对scan 方法发送消息； - iOS在
-userContentController:didReceiveScriptMessage:方法中读取 name 为 scan 的消息数据 message.body。
- (void)setupWKWebView{
WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
configuration.userContentController = [[WKUserContentController alloc] init];
[configuration.userContentController addScriptMessageHandler:self name:@"scan"];
WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.frame configuration:configuration];
webView.UIDelegate = self;
}
h5:
window.webkit.messageHandlers.scan.postMessage()
实现WKScriptMessageHandler代理方法，当js调用scan方法时，会回调此代理方法：
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
if ([message.name isEqualToString:@"scan"]) {
//调用原生扫码
}
}
iOS调用JS方式与方法一中一致，都是通过 WKWebView 的 -evaluateJavaScript:completionHandler: 方法来实现的。
问题: 在使用WKWebView时与h5交互时，监听了h5的事件，让h5可以调用OC方法。退出页面后发现WKWebView没有被释放。
循环引用的原因
经典的解决方案
增加一个中间类去弱引用WKWebView，断开环即可。CMWebWeakScriptMessageDelegate的代码:
#import <Foundation/Foundation.h>
#import <WebKit/WebKit.h>
NS_ASSUME_NONNULL_BEGIN
@interface CMWebWeakScriptMessageDelegate : NSObject<WKScriptMessageHandler>
@property (nonatomic, weak) id<WKScriptMessageHandler> scriptDelegate;
- (instancetype)initWithDelegate:(id<WKScriptMessageHandler>)scriptDelegate;
@end
NS_ASSUME_NONNULL_END
#import "CMWebWeakScriptMessageDelegate.h"
@implementation CMWebWeakScriptMessageDelegate
- (instancetype)initWithDelegate:(id<WKScriptMessageHandler>)scriptDelegate {
self = [super init];
if (self) {
_scriptDelegate = scriptDelegate;
}
return self;
}
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
[self.scriptDelegate userContentController:userContentController didReceiveScriptMessage:message];
}
@end
4. WebViewJavascriptBridge 和 DSBridge
GitHub地址：
DSBridge-IOS
WebViewJavascriptBridge(ios)
可以参考一下这两个三方库的比较：
DSBridge vs WebViewJavascriptBridge
DSBridge 是H5页面与Native之间通信的桥梁，它有如下特点：
- 跨平台；同时支持ios和android。
- 双向调用；js可以调用native， native可以调用js
- 不仅支持 异步 调用，而且页支持 同步 调用（dsbridge是唯一一个支持同步调用的javascript bridge）
- 支持进度回调，多次返回（常用于文件下载进度、计时器等）
- Android支持腾讯x5内核
- 三端易用；无论是前端还是android或ios，使用都非常简单，极大的降低集成／学习成本
