iOS JS与原生交互（全集）
混合开发的重要性不言而喻，一个移动端开发的了解前端开发是一个趋向，总之每个人都向往成为一个全栈工程师，废话不多说，直接上主题
一、交互（UIWebView）
1、OC调用JS
（1）OC调用代码
[self.webView stringByEvaluatingJavaScriptFromString:@"ocCallJSFunction({'name':'xiaoxiao'})"];
（2）JS代码
</script>
function ocCallJSFunction(data) {
var obj = eval(data);
alert(obj.name);
}
<script>
2、JS调用OC
（1）OC代码
- (void)webViewDidFinishLoad:(UIWebView *)webView {
JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
context[@"jsCallOCFunction"] = ^() {
NSLog(@"JS调用OC成功");
NSArray *args = [JSContext currentArguments];
for (JSValue *jsVal in args) {
NSLog(@"%@", jsVal.toDictionary);
}
};
}
（2）JS调用代码
</script>
var message = {
'method' : 'hello',
'param1' : 'dada',
};
jsCallOCFunction(message);
<script>
二、交互（WKWebView）
1、OC调用JS
（1）OC调用代码
[self.wkWebView evaluateJavaScript:@"ocCallJSFunction({'name':'xiaoxiao'})" completionHandler:^(id _Nullable obj, NSError * _Nullable error) {
NSLog(@"evaluateJavaScript, obj = %@, error = %@", obj, error);
}];
（2）JS代码
</script>
function ocCallJSFunction(data) {
var obj = eval(data);
alert(obj.name);
}
<script>
2、JS调用OC
（1）OC代码
// 初始化WKWebView
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
[config.userContentController addScriptMessageHandler:self name:@"jsCallOCFunction"];
WKWebView *wkWebView = [[WKWebView alloc] initWithFrame:CGRectZero configuration:config];
#pragma mark - WKScriptMessageHandler
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
NSLog(@"name = %@",message.name);
NSLog(@"body = %@",message.body);
NSLog(@"frameInfo = %@",message.frameInfo);
}
（2）JS调用代码
</script>
var message = {
'method' : 'hello',
'param1' : 'dada',
};
window.webkit.messageHandlers.jsCallOCFunction.postMessage(message);
<script>
三、交互（WebViewJavascriptBridge）
功能总结：
OC调JS调用成功，JS可以回调数据到OC
JS调OC调用成功，OC可以回调数据到JS
1、OC调用JS
（1）OC调用代码
_bridge = [WebViewJavascriptBridge bridgeForWebView:wkWebView];
id data = @{@"name" : @"xiaoxiao"};
[_bridge callHandler:@"ocCallJSFunction" data:data responseCallback:^(id response) {
NSLog(@"这里是OC调用JS成功后，JS回调的参数:%@", response);
}];
（2）JS代码
</script>
// 注册JS方法供OC调用
bridge.registerHandler('ocCallJSFunction', function(data, responseCallback) {
var obj = eval(data);
alert(obj.userId);
var responseData = { 'code':'200' }
responseCallback(responseData)
})
<script>
2、JS调用OC
（1）OC代码
[_bridge registerHandler:@"jsCallOCFunction" handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"JS传过来的参数: %@", data);
responseCallback(@"这是JS调用OC成功后，OC回调的参数");
}];
(2）JS调用代码
// JS调用OC注册的方法
bridge.callHandler('jsCallOCFunction', {'name':'dada'}, function responseCallback(responseData) {
alert(responseData);
})
