JavaScriptTalkNativeEasy (简化javaScript和iOS native的交互)
目前javaScrip和iOS native进行交互的时候，主要是有两种方式，第一种是通过Apple提供的API进行调用native 代码（UIWebView 使用JavaScriptCore框架、WKWebView使用WebKit框架），第二种就是通过URL重定向（通过URL向native端传送数据，native根据定义的规则进行解析。）。目前比较流行的开源框架是WebViewJavascriptBridge，此框架其实是基于URL重定向和javaScript回调机制来完成js同iOS native交互的。当js和native交互比较多的时候，通过以上方法实现交互，代码会很难被管理和查看。JavaScriptTalkNativeEasy 可以简化这一流程，使每个回调响应的独立开，分开来处理。demo 地址如下：JavaScriptTalkNativeEasy，可以用过pod 引入到工程。
1、使用Apple原生API 进行js和 native叫。
- UIWebView
UIWebView主要使用javaScriptCore框架。使用时需要导入#import <JavaScriptCore/JavaScriptCore.h>
此头文件中主要包含以下几个类：
(1) JSContext是JavaScript 的运行上下文，他主要作用是执行js代码和注册native方法接口。
(2) JSValue是JSContext 执行后的返回结果，他可以是任何js类型（具体类型可以通过JSValue的API进行判断，如：@property (readonly) BOOL isNumber;），并且都有对象的方法转换为native对象。
(3) JSManagedValue 是JSValue的封装，用它可以解决js和native之间循环引用的问题。
(4) JSVirtualMachine js虚拟机，管理JS运行时和管理js暴露的native对象的内存。
(5) JSExport 是一个协议，通过实现它可以完成把一个native对象暴漏给js，此协议内容是空的，但是如果想把自定的model数据传递给js需要实现此协议。
JSContext 在使用时不需要自己创建，需要通过JSContext *jsContext = [_webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];获取当前UIWebView 的JSContext。
具体使用过程如下：
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
</head>
<body>
<h1> JavaScriptTalkNativeEasy</h1>
<div id='log'></div>
<button type="button" onclick="helloNative('Hello iOS native')" style="width:100%; height:30px;" />JS call native</button>
</body>
</html>
natvie 端：
jsContext[@"helloNative"]=^(NSString *argument){
NSLog("%@",argument);
};
当点击h5中的 'JS call native' Button的时候，上边的block回调，同事参数也会传到argument中,其实block参数完全可以写成void， 然后通过NSArray *currentArguments = [JSContext currentArguments];,如下：
NSArray *currentArguments = [JSContext currentArguments]; // 存放js传入的参数 array
for argument in currentArguments{
NSLog(@"%@",argument); // argument JSValue 实例
}
使用JavaScripCore 的JSContext 注册js调用native的时候，当页面重新reload之后，JSContext实例会发生变化，此时需要在UIwebView的代理方法```objc- (void)webViewDidStartLoad:(UIWebView *)webView ``中重新获取JSContext，并且注册对象的回调block。
- WKWebView
WKWebView主要使用的是WebKit框架，主要是用WKWebView中WKUserContentController类型的实例对象，userContentController太处理js调用native。主要使用的方法为- (void)addScriptMessageHandler:(id <WKScriptMessageHandler>)scriptMessageHandler name:(NSString *)name;,name字段 是js端对应的函数名称，scripMessageHandeler是处理js回调的实例，必须实现WKScriptMessageHandler协议中的- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;。message对一个WKScriptMessage实例，其body字段保存了js传递给native的数据。获取此字段进行相应的处理。具体使用如下：
@interface WKViewController : UIViewController<WKScriptMessageHandler>
@end
WKUserContentController *userContentController = _wkWebView.configuration.userContentController;
[userContentController addScriptMessageHandler:self name:@"helloNative"];
@implementation WKViewController
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
// message.body js传过来的参数
NSLog(@"%@",NSStringFromClass([message.body class]));
}
@end
在使用 WKWebView调用navite时，不能获取native返回的参数，如果想在调用完native之后对js回传参数，只能通过native端调用对应的js 函数，把要返回的值返回给js，如下：
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
// message.body js传过来的参数
// 数据解析完后
User *user = {@"name":@"univex",@"age":@100};
[_webView evaluateJavaScript:[NSString stringWithFormat:@"getUserInfo('%@')",user] completionHandler:^(id _Nullable response, NSError * _Nullable error) {
}];
}
js 中必须有对应的getUserInfo 方法进行处理。WKWebView 在页面重新reload之后不需要做额外的操作，之前注册过的回调还能继续响应，这点感觉比UIWebView有好多。
- WebViewJavascriptBridge 的使用，github上介绍的很详细了，地址：WebViewJavascriptBridge----个人认为WebViewJavScriptBridge使用还是挺麻烦的。
在业务比较多的时候使用原生的的方法不进行任何的封装，当回调业务比较的多的时候，代码就会变的很臃肿。
为此，笔者在基于原生方法上，封装出了一个JavaScripTalkNativeEasy库，此库可以把js调原生的代码放到指定的代理类中，此类只需实现 JavaScriptTalkNativeEasyProtocol 协议，需要回调的方法需要在协议中声明，JavaScripTalkNativeEasy 会自动注册对应的回调函数，然后在js调用时，传送到对应的代理实例中。使用案例如下：
UIWebView 使用JavaScripTalkNativeEasy
#import <UIKit/UIKit.h>
#import "JavaScriptTalkNativeEasyProtocol.h"
@protocol webJSEasyProtocol<JavaScriptTalkNativeEasyProtocol>
-(NSString*)helloNative;// 协议中的方法名必须和js中对应的方法保持一致
@end
@interface JSTNViewController : UIViewController
@end
#import "JSTNViewController.h"
@interface JSTNViewController ()<UIWebViewDelegate,webJSEasyProtocol>
@property(nonatomic, strong)JavaScriptTalkNativeEasy *jsTNEasy;
@property(nonatomic, strong)UIWebView *webView;
@end
@implementation JSTNViewController
- (void)viewDidLoad {
[super viewDidLoad];
_webView = [[UIWebView alloc] initWithFrame:[UIScreen mainScreen].bounds];
[self.view addSubView:_webView];
_jsTNEasy = [JavaScriptTalkNativeEasy jsTNEasy:webView];
_jsTNEasy.delegate = self;// 如果delegate 不设置不会注册任何的回调
NSString* htmlPath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSString* exampleHtml = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];
NSURL *baseURL = [NSURL fileURLWithPath:htmlPath];
[_webView loadHTMLString:exampleHtml baseURL:baseURL];
}
-(NSString *)helloNative{
return @"Hello JavaScript";
// 此数据会返给js端，当js调用helloNative函数时，可以通过var hello = helloNative() 的方式来获取。js可以接受的类型有int、long、float、double、NSString、NSArray、NSDictionary。javaScriptCore 会自动处理对应的数据。
}
@end
WKWebView 使用JavaScripTalkNativeEasy
#import <UIKit/UIKit.h>
#import "JavaScriptTalkWKNativeEasy.h"
@protocol WKWebJSEasyProtocol<JavaScriptTalkNativeEasyProtocol>
-(NSString *)helloNative;
@end
@interface WKViewController : UIViewController
@end
#import "WKViewController.h"
#import <WebKit/WebKit.h>
#import <JavaScriptCore/JavaScriptCore.h>
@interface WKViewController ()<WKScriptMessageHandler,WKNavigationDelegate,WKUIDelegate,WkWebJSEasyProtocol>
@property(nonatomic, strong)WKWebView *webView;
@property(nonatomic, strong)JavaScriptTalkWKNativeEasy *jsTNEasy;
@end
@implementation WKViewController
- (void)viewDidLoad {
[super viewDidLoad];
WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
_webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:configuration];
[self.view addSubview:_webView];
configuration.preferences.javaScriptEnabled = YES;
configuration.preferences.javaScriptCanOpenWindowsAutomatically = NO;
NSString* htmlPath = [[NSBundle mainBundle] pathForResource:@"index_wk" ofType:@"html"];
NSString* exampleHtml = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];
NSURL *baseURL = [NSURL fileURLWithPath:htmlPath];
[_webView loadHTMLString:exampleHtml baseURL:baseURL];
_webView.navigationDelegate = self;
_webView.UIDelegate = self;
_jsTNEasy = [JavaScriptTalkWKNativeEasy jsTNEasy:_webView];
_jsTNEasy.delegate = self;
_jsTNEasy.smhDelegate = self;
}
-(NSString *)helloNative{
return @"Hello JavaScript";
// 此数据会返给js端，当js调用helloNative函数时，可以通过var hello = helloNative() 的方式来获取。js可以接受的类型有int、long、float、double、NSString、NSArray、NSDictionary。javaScriptCore 会自动处理对应的数据。
}
WKWebView和UIWebView的使用基本上是一直的。 但是在js端的处理是不一样的，由于是基于苹果原生的API进行封装的，所有要苹果API的规则进行才处理。在使用WKWebView中如果想获取Native端的回传的数据，js必须告告诉Native对的回调函数的名称，方法如下：
<script>
function callBack(name){
document.write(name.name)
document.write('<br>')
document.write(name.age)
}
function test() {
window.webkit.messageHandlers.showName.postMessage({'a':123,'callBackFromNative':'callBack'});
// callBack 是对应处理Native端回传数据的函数名，postMessage必选发送的是一个map类型的数据，回调函数在map对应的key必须是'callBackFromNative'
}
</script>
如果app的系统支持是iOS8+，建议UIWebView替换成WKWebView，WK在性能上做了很大的优化，而且在WK和JS的交互中，当页面reload后不需要重新注册对应的回调函数。Github地址：zJavaScriptTalkNativeEasy 欢迎使用，如果在使用的过程中有任何问题、批评、建议，可以email笔者。winerdt@163.com
