混合開發的重要性不言而喻，一個移動端開發的了解前端開發是一個趨向，總之每個人都向往成為一個全棧工程師，廢話不多說，直接上主題
一、交互（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);
})