在App开发中,会遇到不少和H5交互的问题,双方之间须要能互相调用方法,并接收回调,WebViewJavascriptBridge是一个很不错的选择,它只须要经过在JS中注入少许代码,就能够实现上面的操做。下面,就让咱们一块儿来看看它是如何使用的吧。git
App中先初始化WebViewJavascriptBridge:github
self.bridge = WebViewJavascriptBridge(bridgeForWebView:webView) 复制代码
App中注册事件、调用JS中的事件:web
self.bridge.registerHandler("ObjC Echo", handler: { data, responseCallback) in NSLog(@"ObjC Echo called with: %@", data) responseCallback(data) }) self.bridge.callHandler("JS Echo", data:nil responseCallback: { responseData in NSLog(@"ObjC received response: %@", responseData) }) 复制代码
JS中放入如下固定方法:swift
function setupWebViewJavascriptBridge(callback) { if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); } if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); } window.WVJBCallbacks = [callback]; var WVJBIframe = document.createElement('iframe'); WVJBIframe.style.display = 'none'; WVJBIframe.src = 'https://__bridge_loaded__'; document.documentElement.appendChild(WVJBIframe); setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0) } 复制代码
JS中注册事件、调用App中的事件:markdown
setupWebViewJavascriptBridge(function(bridge) { /* Initialize your app here */ bridge.registerHandler('JS Echo', function(data, responseCallback) { console.log("JS Echo called with:", data) responseCallback(data) }) bridge.callHandler('ObjC Echo', {'key':'value'}, function responseCallback(responseData) { console.log("JS received response:", responseData) }) }) 复制代码
知道如何使用以后,让咱们来了解一下它运行的基本流程。主要能够分为三个部分:初始化、App调用H5,JS调用H5。app
下面让咱们仔细来分析它的源码实现。ide
#define kOldProtocolScheme @"wvjbscheme" #define kNewProtocolScheme @"https" #define kQueueHasMessage @"__wvjb_queue_message__" //表示有H5调用App的事件待处理 #define kBridgeLoaded @"__bridge_loaded__" var id <WebViewJavascriptBridgeBaseDelegate> delegate var startupMessageQueue: [] var responseCallbacks: [:] var messageHandlers: [:] var messageHandler: WVJBHandler func enableLogging() func setLogMaxLength(length: Int) func reset() func sendData(data: Any, responseCallback: WVJBResponseCallback, handlerName: String) func flushMessageQueue(messageQueueString: String) func injectJavascriptFile() func isWebViewJavascriptBridgeURL(url: URL) -> Bool func isQueueMessageURL(url: URL) -> Bool func isBridgeLoadedURL(url: URL) -> Bool func logUnkownMessage(url: URL) func webViewJavascriptCheckCommand() -> String func webViewJavascriptFetchQueyCommand -> String func disableJavscriptAlertBoxSafetyTimeout() 复制代码
Inject Javascript:向H5注入JS方法oop
func injectJavascriptFile() func _dispatchMessage(message: WVJBMessage) 在主线程执行JS方法"WebViewJavascriptBridge._handleMessageFromObjC('\(JSON(message))');" 复制代码
Send Data:从App向H5发送一条消息事件fetch
func sendData(data: Any, responseCallback: WVJBResponseCallback, handlerName: String) message: { data: data, callbackId: String = "objc_cb_\(++_uniqueId)", handlerName: handlerName } 复制代码
Flush Message Queue:处理从H5向App发来的消息lua
func flushMessageQueue(messageQueueString: String) message: { responseId: String?, responseData: Any, handlerName: handlerName, callbackId: String? } messgeCallback: { responseId: callbackId, responseData: responseData } 复制代码
NSString * WebViewJavascriptBridge_js(void); 复制代码
给window的WebViewJavascriptBridge赋值
window.WebViewJavascriptBridge = { registerHandler: registerHandler, callHandler: callHandler, disableJavscriptAlertBoxSafetyTimeout: disableJavscriptAlertBoxSafetyTimeout, _fetchQueue: _fetchQueue, _handleMessageFromObjC: _handleMessageFromObjC }; 复制代码
变量
var messagingIframe; var sendMessageQueue = []; var messageHandlers = {}; var CUSTOM_PROTOCOL_SCHEME = 'https'; var QUEUE_HAS_MESSAGE = '__wvjb_queue_message__'; var responseCallbacks = {}; var uniqueId = 1; var dispatchMessagesWithTimeoutSafety = true; 复制代码
registerHandler:messageHandlers追加handler
function registerHandler(handlerName, handler) { messageHandlers[handlerName] = handler; } 复制代码
callHandler:H5调用App事件
function callHandler(handlerName, data, responseCallback) { if (arguments.length == 2 && typeof data == 'function') { responseCallback = data; data = null; } _doSend({ handlerName:handlerName, data:data }, responseCallback); } function _doSend(message, responseCallback) { if (responseCallback) { var callbackId = 'cb_'+(uniqueId++)+'_'+new Date().getTime(); responseCallbacks[callbackId] = responseCallback; message['callbackId'] = callbackId; } sendMessageQueue.push(message); messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE; } 复制代码
_fetchQueue:把sendMessageQueue的队列所有消费
function _fetchQueue() { var messageQueueString = JSON.stringify(sendMessageQueue); sendMessageQueue = []; return messageQueueString; } 复制代码
_handleMessageFromObjC:接受从App发来的消息
function _handleMessageFromObjC(messageJSON) { if (dispatchMessagesWithTimeoutSafety) { setTimeout(_doDispatchMessageFromObjC); } else { _doDispatchMessageFromObjC(); } function _doDispatchMessageFromObjC() { 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]; } else { if (message.callbackId) { var callbackResponseId = message.callbackId; responseCallback = function(responseData) { _doSend({ handlerName:message.handlerName, responseId:callbackResponseId, responseData:responseData }); }; } var handler = messageHandlers[message.handlerName]; if (!handler) { console.log("WebViewJavascriptBridge: WARNING: no handler for message from ObjC:", message); } else { handler(message.data, responseCallback); } } } } 复制代码
_callWVJBCallbacks:将window的全部WVJBCallbacks调用,并传入WebViewJavascriptBridge
function _callWVJBCallbacks() { var callbacks = window.WVJBCallbacks; delete window.WVJBCallbacks; for (var i=0; i<callbacks.length; i++) { callbacks[i](WebViewJavascriptBridge); } } 复制代码
init(bridgeForWebView: WebView) init(bridge: WebView) func enableLogging() func setLogMaxLength(length: Int) func registerHandler(handlerName: String, handler: WVJBHandler) func removeHandler(handlerName: String) func callHandler(handlerName: String) func callHandler(handlerName: String, data:Any) func callHandler(handlerName: String, data:Any, responseCallback: WVJBResponseCallback) func setWebViewDelegate(webViewDelegate: Any) func disableJavscriptAlertBoxSafetyTimeout() 复制代码
init(bridgeForWebView: WebView) func enableLogging() func registerHandler(handlerName: String, handler: WVJBHandler) func removeHandler(handlerName: String) func callHandler(handlerName: String) func callHandler(handlerName: String, data:Any) func callHandler(handlerName: String, data:Any, responseCallback: WVJBResponseCallback) func setWebViewDelegate(webViewDelegate: Any) func disableJavscriptAlertBoxSafetyTimeout() 复制代码
BridgeForWebView:初始化
init(bridgeForWebView: WebView) - (void) _setupInstance:(WKWebView*)webView { _webView = webView; _webView.navigationDelegate = self; _base = [[WebViewJavascriptBridgeBase alloc] init]; _base.delegate = self; } 复制代码
Register Handler:注册事件
func registerHandler(handlerName: String, handler: WVJBHandler) 复制代码
Remove Handler:移除事件
func removeHandler(handlerName: String) 复制代码
Call Handler:App调用H5方法
func callHandler(handlerName: String, data:Any, responseCallback: WVJBResponseCallback) 复制代码
Flush Message Queue:消费H5调用App方法的消息
func WKFlushMessageQueue() 复制代码
WebView decidePolicyForNavigationAction
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler 复制代码
setWebViewDelegate:透传WebView Delegate
- (void)setWebViewDelegate:(id<WKNavigationDelegate>)webViewDelegate 复制代码
简而言之,App和H5双方都注册本身的方法事件,App经过webView提供的stringByEvaluatingJavaScriptFromString方法来调用H5,H5则经过更改隐藏iframe中的src来触发iframe刷新,让App接收到更新信号,而后App再从H5拉取消息。这样就能实现App和H5之间的双向通讯了。