首页 > 代码库 > 优秀开源代码解读之JS与iOS Native Code互调的优雅实现方案

优秀开源代码解读之JS与iOS Native Code互调的优雅实现方案

简介

本篇为大家介绍一个优秀的开源小项目:WebViewJavascriptBridge。

它优雅地实现了在使用UIWebView时JS与ios 的ObjC nativecode之间的互调,支持消息发送、接收、消息处理器的注册与调用以及设置消息处理的回调。

就像项目的名称一样,它是连接UIWebView和Javascript的bridge。在加入这个项目之后,他们之间的交互处理方式变得很友好。

在native code中跟UIWebView中的js交互的时候,像下面这样:

 

[cpp] view plaincopyprint?
  1. //发送一条消息给UI端并定义回调处理逻辑  
  2.  [_bridge send:@"A string sent from ObjC before Webview has loaded." responseCallback:^(id error, id responseData) {  
  3.         if (error) { NSLog(@"Uh oh - I got an error: %@", error); }  
  4.         NSLog(@"objc got response! %@ %@", error, responseData);  
  5.  }];  
//发送一条消息给UI端并定义回调处理逻辑 [_bridge send:@"A string sent from ObjC before Webview has loaded." responseCallback:^(id error, id responseData) {        if (error) { NSLog(@"Uh oh - I got an error: %@", error); }        NSLog(@"objc got response! %@ %@", error, responseData); }];

 

 

而在UIWebView中的js跟native code交互的时候也变得很简洁,比如在调用处理器的时候,就可以定义回调处理逻辑:

[javascript] view plaincopyprint?
  1. //调用名为testObjcCallback的native端处理器,并传递参数,同时设置回调处理逻辑  
  2. bridge.callHandler(‘testObjcCallback‘, {‘foo‘: ‘bar‘}, function(response) {  
  3. <span style="white-space: pre;">    </span>log(‘Got response from testObjcCallback‘, response)  
  4. })  
//调用名为testObjcCallback的native端处理器,并传递参数,同时设置回调处理逻辑bridge.callHandler(‘testObjcCallback‘, {‘foo‘: ‘bar‘}, function(response) {	log(‘Got response from testObjcCallback‘, response)})

一起来看看它的实现吧,它总共就包含了三个文件:

 

[plain] view plaincopyprint?
  1. WebViewJavascriptBridge.h  
  2. WebViewJavascriptBridge.m  
  3. WebViewJavascriptBridge.js.txt  
WebViewJavascriptBridge.hWebViewJavascriptBridge.mWebViewJavascriptBridge.js.txt

 

它们是以如下的模式进行交互的:

很明显:WebViewJavascriptBridge.js.txt主要用于衔接UIWebView中的web page,而WebViewJavascriptBridge.h/m则主要用于与ObjC的native code打交道。他们作为一个整体,其实起到了一个“桥梁”的作用,这三个文件封装了他们具体的交互处理方式,只开放出一些对外的涉及到业务处理的API,因此你在需要UIWebView与Native code交互的时候,引入该库,则无需考虑太多的交互上的问题。整个的Bridge对你来说都是透明的,你感觉编程的时候,就像是web编程的前端和后端一样清晰。

 

简单地罗列一下它可以实现哪些功能吧:

出于表达上的需要,对于UIWebView相关的我就称之为UI端,而objc那端的处理代码称之为Native端。

【1】UI端

(1)   UI端在初始化时支持设置消息的默认处理器(这里的消息指的是从Native端接收到的消息)

(2)   从UI端向Native端发送消息,并支持对于Native端响应后的回调处理的定义

(3)   UI端调用Native定义的处理器,并支持Native端响应后的回调处理定义

(4)   UI端注册处理器(供Native端调用),并支持给Native端响应处理逻辑的定义

【2】 Native端

(1)   Native端在初始化时支持设置消息的默认处理器(这里的消息指的是从UI端发送过来的消息)

(2)   从Native端向UI端发送消息,并支持对于UI端响应后的回调处理逻辑的定义

(3)   Native端调用UI端定义的处理器,并支持UI端给出响应后在Native端的回调处理逻辑的定义

(4)   Native端注册处理器(供UI端调用),并支持给UI端响应处理逻辑的定义

 

UI端以及Native端完全是对等的两端,实现也是对等的。一段是消息的发送端,另一段就是接收端。这里为引起混淆,需要解释一下我这里使用的“响应”、“回调”在这个上下文中的定义:

(1)   响应:接收端给予发送端的应答

(2)   回调:发送端收到接收端的应答之后在接收端调用的处理逻辑

下面来分析一下源码:

WebViewJavascriptBridge.js.txt:

主要完成了如下工作:

(1) 创建了一个用于发送消息的iFrame(通过创建一个隐藏的ifrmae,并设置它的URL 来发出一个请求,从而触发UIWebView的shouldStartLoadWithRequest回调协议)

(2) 创建了一个核心对象WebViewJavascriptBridge,并给它定义了几个方法,这些方法大部分是公开的API方法

(3) 创建了一个事件:WebViewJavascriptBridgeReady,并dispatch(触发)了它。

代码解读

UI端实现

对于(1),相应的代码如下:

[javascript] view plaincopyprint?
  1. /* 
  2.  *创建一个iFrame,设置隐藏并加入到DOM中 
  3.  */  
  4.     function _createQueueReadyIframe(doc) {  
  5.         messagingIframe = doc.createElement(‘iframe‘)  
  6.         messagingIframe.style.display = ‘none‘  
  7.         doc.documentElement.appendChild(messagingIframe)  
  8.     }  
/* *创建一个iFrame,设置隐藏并加入到DOM中 */	function _createQueueReadyIframe(doc) {		messagingIframe = doc.createElement(‘iframe‘)		messagingIframe.style.display = ‘none‘		doc.documentElement.appendChild(messagingIframe)	}

对于(2)中的WebViewJavascriptBridge,其对象拥有如下方法:

[plain] view plaincopyprint?
  1. window.WebViewJavascriptBridge = {  
  2.         init: init,  
  3.         send: send,  
  4.         registerHandler: registerHandler,  
  5.         callHandler: callHandler,  
  6.         _fetchQueue: _fetchQueue,  
  7.         _handleMessageFromObjC: _handleMessageFromObjC  
  8.     }  
window.WebViewJavascriptBridge = {		init: init,		send: send,		registerHandler: registerHandler,		callHandler: callHandler,		_fetchQueue: _fetchQueue,		_handleMessageFromObjC: _handleMessageFromObjC	}

方法的实现:

[javascript] view plaincopyprint?
  1. <span style="white-space: pre;">    </span>/* 
  2.      *初始化方法,注入默认的消息处理器 
  3.      *默认的消息处理器用于在处理来自objc的消息时,如果该消息没有设置处理器,则采用默认处理器处理 
  4.      */  
  5.     function init(messageHandler) {  
  6.         if (WebViewJavascriptBridge._messageHandler) { throw new Error(‘WebViewJavascriptBridge.init called twice‘) }  
  7.         WebViewJavascriptBridge._messageHandler = messageHandler  
  8.         var receivedMessages = receiveMessageQueue  
  9.         receiveMessageQueue = null  
  10.         //如果接收队列有消息,则处理  
  11.         for (var i=0; i<receivedMessages.length; i++) {  
  12.             _dispatchMessageFromObjC(receivedMessages[i])  
  13.         }  
  14.     }  
  15.   
  16.   
  17. <span style="white-space: pre;">    </span>/* 
  18.      *发送消息并设置回调 
  19.      */  
  20.     function send(data, responseCallback) {  
  21.         _doSend({ data:data }, responseCallback)  
  22.     }  
  23.       
  24.     /* 
  25.      *注册消息处理器 
  26.      */  
  27.     function registerHandler(handlerName, handler) {  
  28.         messageHandlers[handlerName] = handler  
  29.     }  
  30.       
  31.   
  32.     /* 
  33.      *调用处理器并设置回调 
  34.      */  
  35.     function callHandler(handlerName, data, responseCallback) {  
  36.         _doSend({ data:data, handlerName:handlerName }, responseCallback)  
  37.     }  
	/*	 *初始化方法,注入默认的消息处理器	 *默认的消息处理器用于在处理来自objc的消息时,如果该消息没有设置处理器,则采用默认处理器处理	 */	function init(messageHandler) {		if (WebViewJavascriptBridge._messageHandler) { throw new Error(‘WebViewJavascriptBridge.init called twice‘) }		WebViewJavascriptBridge._messageHandler = messageHandler		var receivedMessages = receiveMessageQueue		receiveMessageQueue = null		//如果接收队列有消息,则处理		for (var i=0; i<receivedMessages.length; i++) {			_dispatchMessageFromObjC(receivedMessages[i])		}	}	/*	 *发送消息并设置回调	 */	function send(data, responseCallback) {		_doSend({ data:data }, responseCallback)	}		/*	 *注册消息处理器	 */	function registerHandler(handlerName, handler) {		messageHandlers[handlerName] = handler	}		/*	 *调用处理器并设置回调	 */	function callHandler(handlerName, data, responseCallback) {		_doSend({ data:data, handlerName:handlerName }, responseCallback)	}

涉及到的两个内部方法:

[javascript] view plaincopyprint?
  1. <span style="white-space: pre;">    </span>/* 
  2.      *内部方法:消息的发送 
  3.      */  
  4.     function _doSend(message, responseCallback) {  
  5.         //如果定义了回调  
  6.         if (responseCallback) {  
  7.             //为回调对象产生唯一标识  
  8.             var callbackId = ‘js_cb_‘+(uniqueId++)  
  9.             //并存储到一个集合对象里  
  10.             responseCallbacks[callbackId] = responseCallback  
  11.             //新增一个key-value对- ‘callbackId‘:callbackId  
  12.             message[‘callbackId‘] = callbackId  
  13.         }  
  14.         sendMessageQueue.push(JSON.stringify(message))  
  15.         messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + ‘://‘ + QUEUE_HAS_MESSAGE  
  16.     }  
  17.   
  18.   
  19. <span style="white-space: pre;">    </span>/* 
  20.      *内部方法:处理来自objc的消息 
  21.      */  
  22.     function _dispatchMessageFromObjC(messageJSON) {  
  23.         setTimeout(function _timeoutDispatchMessageFromObjC() {  
  24.             var message = JSON.parse(messageJSON)  
  25.             var messageHandler  
  26.               
  27.             if (message.responseId) {  
  28.                 //取出回调函数对象并执行  
  29.                 var responseCallback = responseCallbacks[message.responseId]  
  30.                 responseCallback(message.error, message.responseData)  
  31.                 delete responseCallbacks[message.responseId]  
  32.             } else {  
  33.                 var response  
  34.                 if (message.callbackId) {  
  35.                     var callbackResponseId = message.callbackId  
  36.                     response = {  
  37.                         respondWith: function(responseData) {  
  38.                             _doSend({ responseId:callbackResponseId, responseData:responseData })  
  39.                         },  
  40.                         respondWithError: function(error) {  
  41.                             _doSend({ responseId:callbackResponseId, error:error })  
  42.                         }  
  43.                     }  
  44.                 }  
  45.                   
  46.                 var handler = WebViewJavascriptBridge._messageHandler  
  47.                 //如果消息中已包含消息处理器,则使用该处理器;否则使用默认处理器  
  48.                 if (message.handlerName) {  
  49.                     handler = messageHandlers[message.handlerName]  
  50.                 }  
  51.                   
  52.                 try {  
  53.                     handler(message.data, response)  
  54.                 } catch(exception) {  
  55.                     console.log("WebViewJavascriptBridge: WARNING: javascript handler threw.", message, exception)  
  56.                 }  
  57.             }  
  58.         })  
  59.     }  
	/*	 *内部方法:消息的发送	 */	function _doSend(message, responseCallback) {		//如果定义了回调		if (responseCallback) {			//为回调对象产生唯一标识			var callbackId = ‘js_cb_‘+(uniqueId++)			//并存储到一个集合对象里			responseCallbacks[callbackId] = responseCallback			//新增一个key-value对- ‘callbackId‘:callbackId			message[‘callbackId‘] = callbackId		}		sendMessageQueue.push(JSON.stringify(message))		messagingIframe.src = http://www.mamicode.com/CUSTOM_PROTOCOL_SCHEME + ‘://‘ + QUEUE_HAS_MESSAGE"white-space: pre;">	/*	 *内部方法:处理来自objc的消息	 */	function _dispatchMessageFromObjC(messageJSON) {		setTimeout(function _timeoutDispatchMessageFromObjC() {			var message = JSON.parse(messageJSON)			var messageHandler						if (message.responseId) {				//取出回调函数对象并执行				var responseCallback = responseCallbacks[message.responseId]				responseCallback(message.error, message.responseData)				delete responseCallbacks[message.responseId]			} else {				var response				if (message.callbackId) {					var callbackResponseId = message.callbackId					response = {						respondWith: function(responseData) {							_doSend({ responseId:callbackResponseId, responseData:responseData })						},						respondWithError: function(error) {							_doSend({ responseId:callbackResponseId, error:error })						}					}				}								var handler = WebViewJavascriptBridge._messageHandler				//如果消息中已包含消息处理器,则使用该处理器;否则使用默认处理器				if (message.handlerName) {					handler = messageHandlers[message.handlerName]				}								try {					handler(message.data, response)				} catch(exception) {					console.log("WebViewJavascriptBridge: WARNING: javascript handler threw.", message, exception)				}			}		})	}

还有两个js方法是供native端直接调用的方法(它们本身也是为native端服务的):

[javascript] view plaincopyprint?
  1. <span style="white-space: pre;">    </span>/* 
  2.      *获得队列,将队列中的每个元素用分隔符分隔之后连成一个字符串【native端调用】 
  3.      */  
  4.     function _fetchQueue() {  
  5.         var messageQueueString = sendMessageQueue.join(MESSAGE_SEPARATOR)  
  6.         sendMessageQueue = []  
  7.         return messageQueueString  
  8.     }  
  9.   
  10.   
  11. <span style="white-space: pre;">    </span>/* 
  12.      *处理来自ObjC的消息【native端调用】 
  13.      */  
  14.     function _handleMessageFromObjC(messageJSON) {  
  15.         //如果接收队列对象存在则入队该消息,否则直接处理  
  16.         if (receiveMessageQueue) {  
  17.             receiveMessageQueue.push(messageJSON)  
  18.         } else {  
  19.             _dispatchMessageFromObjC(messageJSON)  
  20.         }  
  21.     }  
	/*	 *获得队列,将队列中的每个元素用分隔符分隔之后连成一个字符串【native端调用】	 */	function _fetchQueue() {		var messageQueueString = sendMessageQueue.join(MESSAGE_SEPARATOR)		sendMessageQueue = []		return messageQueueString	}	/*	 *处理来自ObjC的消息【native端调用】	 */	function _handleMessageFromObjC(messageJSON) {		//如果接收队列对象存在则入队该消息,否则直接处理		if (receiveMessageQueue) {			receiveMessageQueue.push(messageJSON)		} else {			_dispatchMessageFromObjC(messageJSON)		}	}

最后还有一段代码就是,定义一个事件并触发,同时设置设置上面定义的WebViewJavascriptBridge对象为事件的一个属性:

 

[javascript] view plaincopyprint?
  1. <span style="white-space: pre;">    </span>var doc = document  
  2.     _createQueueReadyIframe(doc)  
  3.     //创建并实例化一个事件对象  
  4.     var readyEvent = doc.createEvent(‘Events‘)  
  5.     readyEvent.initEvent(‘WebViewJavascriptBridgeReady‘)  
  6.     readyEvent.bridge = WebViewJavascriptBridge  
  7.     //触发事件  
  8.     doc.dispatchEvent(readyEvent)  
	var doc = document	_createQueueReadyIframe(doc)	//创建并实例化一个事件对象	var readyEvent = doc.createEvent(‘Events‘)	readyEvent.initEvent(‘WebViewJavascriptBridgeReady‘)	readyEvent.bridge = WebViewJavascriptBridge	//触发事件	doc.dispatchEvent(readyEvent)

Native端实现

 

其实大致跟上面的类似,只是因为语法不同(所以我上面才说两端是对等的):

WebViewJavascriptBridge.h/.m

它其实可以看作UIWebView的Controller,实现了UIWebViewDelegate协议:

[cpp] view plaincopyprint?
  1. @interface WebViewJavascriptBridge : NSObject <UIWebViewDelegate>  
  2. + (id)bridgeForWebView:(UIWebView*)webView handler:(WVJBHandler)handler;  
  3. + (id)bridgeForWebView:(UIWebView*)webView webViewDelegate:(id <UIWebViewDelegate>)webViewDelegate handler:(WVJBHandler)handler;  
  4. + (void)enableLogging;  
  5. - (void)send:(id)message;  
  6. - (void)send:(id)message responseCallback:(WVJBResponseCallback)responseCallback;  
  7. - (void)registerHandler:(NSString*)handlerName handler:(WVJBHandler)handler;  
  8. - (void)callHandler:(NSString*)handlerName;  
  9. - (void)callHandler:(NSString*)handlerName data:(id)data;  
  10. - (void)callHandler:(NSString*)handlerName data:(id)data responseCallback:(WVJBResponseCallback)responseCallback;  
  11. @end  
@interface WebViewJavascriptBridge : NSObject <UIWebViewDelegate>+ (id)bridgeForWebView:(UIWebView*)webView handler:(WVJBHandler)handler;+ (id)bridgeForWebView:(UIWebView*)webView webViewDelegate:(id <UIWebViewDelegate>)webViewDelegate handler:(WVJBHandler)handler;+ (void)enableLogging;- (void)send:(id)message;- (void)send:(id)message responseCallback:(WVJBResponseCallback)responseCallback;- (void)registerHandler:(NSString*)handlerName handler:(WVJBHandler)handler;- (void)callHandler:(NSString*)handlerName;- (void)callHandler:(NSString*)handlerName data:(id)data;- (void)callHandler:(NSString*)handlerName data:(id)data responseCallback:(WVJBResponseCallback)responseCallback;@end

方法的实现其实是跟前面类似的,这里我们只看一下UIWebView的一个协议方法

shouldStartLoadWithRequest:

 

[cpp] view plaincopyprint?
  1. - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {  
  2.     if (webView != _webView) { return YES; }  
  3.     NSURL *url = [request URL];  
  4.     if ([[url scheme] isEqualToString:CUSTOM_PROTOCOL_SCHEME]) {  
  5.         //队列中有数据  
  6.         if ([[url host] isEqualToString:QUEUE_HAS_MESSAGE]) {  
  7.             //刷出队列中数据  
  8.             [self _flushMessageQueue];  
  9.         } else {  
  10.             NSLog(@"WebViewJavascriptBridge: WARNING: Received unknown WebViewJavascriptBridge command %@://%@", CUSTOM_PROTOCOL_SCHEME, [url path]);  
  11.         }  
  12.         return NO;  
  13.     } else if (self.webViewDelegate) {  
  14.         return [self.webViewDelegate webView:webView shouldStartLoadWithRequest:request navigationType:navigationType];  
  15.     } else {  
  16.         return YES;  
  17.     }  
  18. }  
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {    if (webView != _webView) { return YES; }    NSURL *url = [request URL];    if ([[url scheme] isEqualToString:CUSTOM_PROTOCOL_SCHEME]) {		//队列中有数据        if ([[url host] isEqualToString:QUEUE_HAS_MESSAGE]) {			//刷出队列中数据            [self _flushMessageQueue];        } else {            NSLog(@"WebViewJavascriptBridge: WARNING: Received unknown WebViewJavascriptBridge command %@://%@", CUSTOM_PROTOCOL_SCHEME, [url path]);        }        return NO;    } else if (self.webViewDelegate) {        return [self.webViewDelegate webView:webView shouldStartLoadWithRequest:request navigationType:navigationType];    } else {        return YES;    }}

使用示例

UI端

 

 

[javascript] view plaincopyprint?
  1. <span style="white-space: pre;">    </span>//给WebViewJavascriptBridgeReady事件注册一个Listener  
  2.     document.addEventListener(‘WebViewJavascriptBridgeReady‘, onBridgeReady, false)  
  3.     <span style="white-space: pre;">    </span>//事件的响应处理  
  4.     function onBridgeReady(event) {  
  5.         var bridge = event.bridge  
  6.         var uniqueId = 1  
  7.         <span style="white-space: pre;">    </span>//日志记录  
  8.         function log(message, data) {  
  9.             var log = document.getElementById(‘log‘)  
  10.             var el = document.createElement(‘div‘)  
  11.             el.className = ‘logLine‘  
  12.             el.innerHTML = uniqueId++ + ‘. ‘ + message + (data ? ‘: ‘ + JSON.stringify(data) : ‘‘)  
  13.             if (log.children.length) { log.insertBefore(el, log.children[0]) }  
  14.             else { log.appendChild(el) }  
  15.         }  
  16.         <span style="white-space: pre;">    </span>//初始化操作,并定义默认的消息处理逻辑  
  17.         bridge.init(function(message) {  
  18.             log(‘JS got a message‘, message)  
  19.         })  
  20.         <span style="white-space: pre;">    </span>//注册一个名为testJavascriptHandler的处理器,并定义用于响应的处理逻辑  
  21.         bridge.registerHandler(‘testJavascriptHandler‘, function(data, response) {  
  22.             log(‘JS handler testJavascriptHandler was called‘, data)  
  23.             response.respondWith({ ‘Javascript Says‘:‘Right back atcha!‘ })  
  24.         })  
  25.   
  26.         <span style="white-space: pre;">    </span>//创建一个发送消息给native端的按钮  
  27.         var button = document.getElementById(‘buttons‘).appendChild(document.createElement(‘button‘))  
  28.         button.innerHTML = ‘Send message to ObjC‘  
  29.         button.ontouchstart = function(e) {  
  30.             e.preventDefault()  
  31.             <span style="white-space: pre;">        </span>//发送消息  
  32.             bridge.send(‘Hello from JS button‘)  
  33.         }  
  34.   
  35.         document.body.appendChild(document.createElement(‘br‘))  
  36.   
  37.         <span style="white-space: pre;">    </span>//创建一个用于调用native端处理器的按钮  
  38.         var callbackButton = document.getElementById(‘buttons‘).appendChild(document.createElement(‘button‘))  
  39.         callbackButton.innerHTML = ‘Fire testObjcCallback‘  
  40.         callbackButton.ontouchstart = function(e) {  
  41.             e.preventDefault()  
  42.             log("Calling handler testObjcCallback")  
  43.             //调用名为testObjcCallback的native端处理器,并传递参数,同时设置回调处理逻辑  
  44.             bridge.callHandler(‘testObjcCallback‘, {‘foo‘: ‘bar‘}, function(response) {  
  45.                 log(‘Got response from testObjcCallback‘, response)  
  46.             })  
  47.         }  
  48.     }  
	//给WebViewJavascriptBridgeReady事件注册一个Listener	document.addEventListener(‘WebViewJavascriptBridgeReady‘, onBridgeReady, false)    	//事件的响应处理	function onBridgeReady(event) {		var bridge = event.bridge		var uniqueId = 1        	//日志记录		function log(message, data) {			var log = document.getElementById(‘log‘)			var el = document.createElement(‘div‘)			el.className = ‘logLine‘			el.innerHTML = uniqueId++ + ‘. ‘ + message + (data ? ‘: ‘ + JSON.stringify(data) : ‘‘)			if (log.children.length) { log.insertBefore(el, log.children[0]) }			else { log.appendChild(el) }		}        	//初始化操作,并定义默认的消息处理逻辑		bridge.init(function(message) {			log(‘JS got a message‘, message)		})        	//注册一个名为testJavascriptHandler的处理器,并定义用于响应的处理逻辑		bridge.registerHandler(‘testJavascriptHandler‘, function(data, response) {			log(‘JS handler testJavascriptHandler was called‘, data)			response.respondWith({ ‘Javascript Says‘:‘Right back atcha!‘ })		})        	//创建一个发送消息给native端的按钮		var button = document.getElementById(‘buttons‘).appendChild(document.createElement(‘button‘))		button.innerHTML = ‘Send message to ObjC‘		button.ontouchstart = function(e) {			e.preventDefault()            		//发送消息			bridge.send(‘Hello from JS button‘)		}		document.body.appendChild(document.createElement(‘br‘))        	//创建一个用于调用native端处理器的按钮		var callbackButton = document.getElementById(‘buttons‘).appendChild(document.createElement(‘button‘))		callbackButton.innerHTML = ‘Fire testObjcCallback‘		callbackButton.ontouchstart = function(e) {			e.preventDefault()			log("Calling handler testObjcCallback")            //调用名为testObjcCallback的native端处理器,并传递参数,同时设置回调处理逻辑			bridge.callHandler(‘testObjcCallback‘, {‘foo‘: ‘bar‘}, function(response) {				log(‘Got response from testObjcCallback‘, response)			})		}	}

Native端

[cpp] view plaincopyprint?
  1. //实例化一个webview并加入到window中去  
  2.     UIWebView* webView = [[UIWebView alloc] initWithFrame:self.window.bounds];  
  3.     [self.window addSubview:webView];  
  4.       
  5.     //启用日志记录  
  6.     [WebViewJavascriptBridge enableLogging];  
  7.       
  8.     //实例化WebViewJavascriptBridge并定义native端的默认消息处理器  
  9.     _bridge = [WebViewJavascriptBridge bridgeForWebView:webView handler:^(id data, WVJBResponse *response) {  
  10.         NSLog(@"ObjC received message from JS: %@", data);  
  11.         UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"ObjC got message from Javascript:" message:data delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil];  
  12.         [alert show];  
  13.     }];  
  14.       
  15.     //注册一个供UI端调用的名为testObjcCallback的处理器,并定义用于响应的处理逻辑  
  16.     [_bridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponse *response) {  
  17.         NSLog(@"testObjcCallback called: %@", data);  
  18.         [response respondWith:@"Response from testObjcCallback"];  
  19.     }];  
  20.       
  21.     //发送一条消息给UI端并定义回调处理逻辑  
  22.     [_bridge send:@"A string sent from ObjC before Webview has loaded." responseCallback:^(id error, id responseData) {  
  23.         if (error) { NSLog(@"Uh oh - I got an error: %@", error); }  
  24.         NSLog(@"objc got response! %@ %@", error, responseData);  
  25.     }];  
  26.       
  27.     //调用一个在UI端定义的名为testJavascriptHandler的处理器,没有定义回调  
  28.     [_bridge callHandler:@"testJavascriptHandler" data:[NSDictionary dictionaryWithObject:@"before ready" forKey:@"foo"]];  
  29.       
  30.     [self renderButtons:webView];  
  31.     [self loadExamplePage:webView];  
  32.       
  33.     //单纯发送一条消息给UI端  
  34.     [_bridge send:@"A string sent from ObjC after Webview has loaded."];  
//实例化一个webview并加入到window中去    UIWebView* webView = [[UIWebView alloc] initWithFrame:self.window.bounds];    [self.window addSubview:webView];        //启用日志记录    [WebViewJavascriptBridge enableLogging];        //实例化WebViewJavascriptBridge并定义native端的默认消息处理器    _bridge = [WebViewJavascriptBridge bridgeForWebView:webView handler:^(id data, WVJBResponse *response) {        NSLog(@"ObjC received message from JS: %@", data);        UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"ObjC got message from Javascript:" message:data delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil];        [alert show];    }];        //注册一个供UI端调用的名为testObjcCallback的处理器,并定义用于响应的处理逻辑    [_bridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponse *response) {        NSLog(@"testObjcCallback called: %@", data);        [response respondWith:@"Response from testObjcCallback"];    }];        //发送一条消息给UI端并定义回调处理逻辑    [_bridge send:@"A string sent from ObjC before Webview has loaded." responseCallback:^(id error, id responseData) {        if (error) { NSLog(@"Uh oh - I got an error: %@", error); }        NSLog(@"objc got response! %@ %@", error, responseData);    }];        //调用一个在UI端定义的名为testJavascriptHandler的处理器,没有定义回调    [_bridge callHandler:@"testJavascriptHandler" data:[NSDictionary dictionaryWithObject:@"before ready" forKey:@"foo"]];        [self renderButtons:webView];    [self loadExamplePage:webView];        //单纯发送一条消息给UI端    [_bridge send:@"A string sent from ObjC after Webview has loaded."];

项目运行截图:

优秀开源代码解读之JS与iOS Native Code互调的优雅实现方案