[源码分析]iOS WebViewJavascriptBridge使用及原理
[源码分析]iOS WebViewJavascriptBridge使用及原理
在开发中涉及到网页与iOS原生交互，于是就想到了WebViewJavascriptBridge 这个开源库。经过最近几天的研究和了解算是熟悉了它的使用和大致的处理过程。以此记录作为自己学习总结习惯的开始，也便于不熟悉它的人能快速使用它。 内容包括三个部分。
- WebViewJavascriptBridge基本使用
- OC中调用JS方法分析
- JS中调用OC方法分析
<p>
1、WebViewJavascriptBridge基本使用：
导入工程包含文件如下(图1):
F3C1C2C7-B738-41D2-B7CB-987604347B9D.png
其支持UIWebView 和 WKWebView，我用的是UIWebView，测试文件** test.html 。
** oc端的操作
首先添加头文件#import <WebViewJavascriptBridge.h>
//初始化_webBridge对象
_webBridge =[WebViewJavascriptBridge bridgeForWebView:_webview];
[_webBridge setWebViewDelegate:self];js和iOS方法相互调用之前需要先注册，如js要调用oc中的方法 * objc_fun1 *，在oc文件中操作如下
//注册方法供js处调用
[_webBridge registerHandler:@"objc_fun1" handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"rec data from js :%@",data);
responseCallback(@"i am from objc!");
}];
//objc_fun1：注册方法的名称供js端调用
//handler：具体的方法操作，参数data — js调用时传递的参数 ，responseCallback—js 回调操作。
//调用js中的方法
[_webBridge callHandler:@"js_fun1" data:@{@"key":@"hello js"} responseCallback:^(id responseData) {
NSLog(@"from js :%@",responseData);
}];js端的操作 相关操作基本固定，在 test.html 中，方法 function setupWebViewJavascriptBridge(callback){}的定义不需要改动，我们只是在方法的调用时，在callback 中加入自己的操作。这里注册oc 需要调用的方法，或者调用oc已注册过的方法
setupWebViewJavascriptBridge(function(bridge) {
//register functin
bridge.registerHandler('js_fun1', function(data, responseCallback) {
console.log("JS Echo called with:", data)
responseCallback(data)
})
// add button
var btn = document.getElementById('divid1').appendChild(document.createElement('button'))
btn.innerHTML = "callOCFunction"
btn.style="background-color:red;text-align:center"
btn.onclick = function(e){
e.preventDefault()
bridge.callHandler('objc_fun1', {'key':'hello oc,I from JS'}, function responseCallback(responseData) {
var e =document.getElementById('result')
e.innerHTML = "oc response: " + responseData;
})
}
})
//html部分
<body>
<p>this is webviewJavascriptBridge demo</p>
<div>
<p id='result'></p>
</div>
<div style = "background-color:blue;text-align:center;" id = 'divid1' height:40px></div>
</body>在此注册了方法中js_fun1可供oc处调用，添加了测试按钮callOCFunction，点击通过bridge.callHandler() 调用oc端的方法objc_fun1，返回的结果在页面上显示。运行程序后点击按钮达到了预期结果，到这里算是完成了基本实用。
2、OC中调用JS方法分析:
WebViewJavascriptBridge中js与oc的交互主要通过- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
url拦截然后对url分析进行js代码注入，最终实现js与oc的方法相互调用。<p>
首次加载test.html时发起一次请求操作，
url = 'wvjbscheme://__BRIDGE_LOADED__',拦截到该url，通过- >>(void)injectJavascriptFile 方法进行js注入， NSString *js = WebViewJavascriptBridge_js();此js代码在#import "WebViewJavascriptBridge_JS.h"中，对js中>WebViewJavascriptBridge对象方法和变量进行初始化 主要方法如下：
function registerHandler(handlerName, handler);//注册方法
function callHandler(handlerName, data, responseCallback);//调用方法
function _doSend(message, responseCallback);
function _fetchQueue();
function _dispatchMessageFromObjC(messageJSON);
function _handleMessageFromObjC(messageJSON);<p>
OC中调用JS方法顺序
1.首先调用方法 - (void)callHandler:(NSString *)handlerName data:(id)data responseCallback:(WVJBResponseCallback)responseCallback
参数data，参数形式js端书写语法。
参数responseCallback，最后的回调操作。
2.- (void)sendData:(id)data responseCallback:(WVJBResponseCallback)responseCallback handlerName:(NSString*)handlerName
把发送的数据封装在一个字典中，如果有responseCallback同时生成一个回调id(objc_cb_1形式的字符串)。
3.- (void)_queueMessage:(WVJBMessage*)message
4.- (void)_dispatchMessage:(WVJBMessage*)message
把消息对象转化为json字符串,添加字符格式化的处理-> messageJSON，
获取js代码字符串
NSString* javascriptCommand = [NSString stringWithFormat:@"WebViewJavascriptBridge._handleMessageFromObjC('%@');", messageJSON];
执行js代码
[self _evaluateJavascript:javascriptCommand];js中依次调用
function _handleMessageFromObjC(messageJSON) function _dispatchMessageFromObjC(messageJSON)执行js中方法操作
方法结束后，如果此时的oc方法有回调操作->通过function _doSend(message, responseCallback)再次发起url请求。然后操作回到oc端。
<p>
oc中拦截url请求，分析请求类型为WVJB_QUEUE_MESSAGE调用方法5
5.- (void)flushMessageQueue:(NSString *)messageQueueString
根据js传入的参数获取 回调id 'responseId'取出oc方法的回调代码块执行，然后在self.responseCallbacks移除已执行的操作。
NSString* responseId = message[@"responseId"];
if (responseId) {
WVJBResponseCallback responseCallback = _responseCallbacks[responseId];
responseCallback(message[@"responseData"]);
[self.responseCallbacks removeObjectForKey:responseId];
}至此，oc调用js方法执行结束。
3、JS中调用OC方法分析:
依次调用方法顺序
JS中的方法操作
在文件#import "WebViewJavascriptBridge_JS.h"中定义的方法
1.function callHandler(handlerName, data, responseCallback);
2.function _doSend(message, responseCallback) 在这个方法中生成回调的id,并保存js端的回调操作，然后发起一次请求回到OC端操作。
oc中拦截url请求，分析请求类型为WVJB_QUEUE_MESSAGE调用方法3
3.- (void)flushMessageQueue:(NSString *)messageQueueString
主要操作代码如下：
{
WVJBResponseCallback responseCallback = NULL;
NSString* callbackId = message[@"callbackId"];
if (callbackId) {
responseCallback = ^(id responseData) {
if (responseData == nil) {
responseData = [NSNull null];
}
WVJBMessage* msg = @{ @"responseId":callbackId, @"responseData":responseData };
[self _queueMessage:msg];
};
} else {
responseCallback = ^(id ignoreResponseData) {
// Do nothing
};
}
WVJBHandler handler = self.messageHandlers[message[@"handlerName"]];
if (!handler) {
NSLog(@"WVJBNoHandlerException, No handler for message from JS: %@", message);
continue;
}
handler(message[@"data"], responseCallback);
}根据传递过来的方法名，参数，和回调调用oc方法handler(message[@"data"], responseCallback);如果有回调responseCallback，oc方法执行完后调用[self _queueMessage:msg];
然后操作同OC中调用JS方法顺序中步骤3、4又回到JS端执行
function _dispatchMessageFromObjC(messageJSON) {
setTimeout(function _timeoutDispatchMessageFromObjC() {
var message = JSON.parse(messageJSON);
var messageHandler;
var responseCallback;
if (message.responseId) {
responseCallback = responseCallbacks[message.responseId];
if (!responseCallback) {
return;
}
responseCallback(message.responseData);
delete responseCallbacks[message.responseId];
} 根据message.responseId 找到原来保存的回调操作、执行完毕后，删除该id的操作，至此JS中调用OC方法的操作流程结束。
总结：通过WebViewJavascriptBridge来实现JS、OC的交互，主要通过在OC端进行请求拦截，根据url的类型判断不同的操作，然后在通过js注入和执行来完成方法的调用，所以每次的事件可能会在OC和JS间多次来回切换。 以上为使用WebViewJavascriptBridge的操作和分析，若理解有不对的地方谢谢指出。