1.url的认识
在谈到native与H5交互的时候，我们先要了解URL，刚入门的同学，不太了解URL怎么去拆分，下面先拿简书http://www.jianshu.com/recommendations/notes?category_id=56（协议://主机：端口/路径?字段#片段，scheme://host:port/path?query#fragment）这个URL来解释：
http是协议(URL.scheme)，www.jianshu.com为主机(URL.host)，recommendations/notes为路径(URL.path)，category_id=56为字段query（片段fragment省略）；
2.了解了URL后，我们与H5制定一个协议，通过截取URL里面的字段，来触发这个协议方法：
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
H5 loading几个URL，就会加载几次。
3.（1） 包括第三方，所有H5调native的方法，都是通过拦截的方式；
比如点击H5里面的某个按钮，H5调native，其实就是触发加载这个网页，拦截到后，然后native自己实现方法；
（2） native点击触发H5的方法为：[self.webView stringByEvaluatingJavaScriptFromString:@“hide()”];其中“hide()”是H5那边的方法。
stringByEvaluatingJavaScriptFromString
(1). js调native的方法：
原理也是拦截URL，只需告诉Js调@"ObjC Echo”这个方法就可以：[self.bridge registerHandler:@"ObjC Echo" handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"ObjC Echo called with: %@", data);
responseCallback(data);
}];
(2). native调js的方法：
[self.bridge callHandler:@"JS Echo" data:nil responseCallback:^(id responseData) {这个方法等同原生方法[self.webView stringByEvaluatingJavaScriptFromString:@"JS Echo"];
4. WebViewJavascriptBridge
一开始，我们在Native端和JS端都分别进行初始化
OC端：
@property WebViewJavascriptBridge* bridge;
对应的初始化代码如下，在初始化中直接包含了一个用于接收JS的回调：
_bridge = [WebViewJavascriptBridge bridgeForWebView:webView webViewDelegate:self handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"ObjC received message from JS: %@", data);
responseCallback(@"Response for message from ObjC");
}];
JS端：(以下是固定写法，你自己的JS文件中必须包含如下代码)
function connectWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener('WebViewJavascriptBridgeReady', function() {
callback(WebViewJavascriptBridge)
}, false)
}
}
connectWebViewJavascriptBridge(function(bridge) {
bridge.init(function(message, responseCallback) {
log('JS got a message', message)
var data = { 'Javascript Responds':'Wee!' }
log('JS responding with', data)
responseCallback(data)
})
}
在JS中如果调用了bridge.send()，那么将触发OC端_bridge初始化方法中的回调。
同理，第二条，在JS中调用了bridge.callHandler('testJavascriptHandler')，它将触发OC端注册的同名方法:
js中的代码
bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
log('ObjC called testJavascriptHandler with', data)
var responseData = { 'Javascript Says':'Right back atcha!' }
log('JS responding with', responseData)
responseCallback(responseData)
})
document.body.appendChild(document.createElement('br'))
var callbackButton = document.getElementById('buttons').appendChild(document.createElement('button'))
callbackButton.innerHTML = 'Fire testObjcCallback'
callbackButton.onclick = function(e) {
e.preventDefault()
log('JS calling handler "testObjcCallback"')
bridge.callHandler('testObjcCallback', {'foo': 'bar'}, function(response) {
log('JS got response', response)
})
}
OC中的代码
web端调用：
WVJB RCVD -> block内部-> 再block内部回调回web 用WVJB SEND（如果没有回调就没有SEND）
[_bridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"testObjcCallback called: %@", data);
responseCallback(@"Response from testObjcCallback");
}];
web端代码：
var callbackButton = document.getElementById('buttons').appendChild(document.createElement('button'))
callbackButton.innerHTML = 'Fire testObjcCallback'
callbackButton.onclick = function(e) {
e.preventDefault()
log('JS calling handler "testObjcCallback"')
bridge.callHandler('testObjcCallback', {'foo': 'bar'}, function(response) {
log('JS got response', response)
})
}
})
客户端调用：: WVJB SEND ->WVJB RCVD - >block回调
[_bridge callHandler:@"testJavascriptHandler" data:@{ @"foo":@"before ready" }];
然后web端代码：
bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
log('ObjC called testJavascriptHandler with', data)
var responseData = { 'Javascript Says':'Right back atcha!' }
log('JS responding with', responseData)
responseCallback(responseData)
})
第三方WebViewJavascriptBridge框架网址：http://www.cnblogs.com/jiang-xiao-yan/p/5345755.html或者http://www.cocoachina.com/ios/20150629/12248.html
