WebViewJavascriptBridge初识

摘要: 网上关于原生和JS的调用的介绍很多，github上使用方法介绍的很清晰，本文只是对其整理，方便以后查看。

1、WebViewJavascriptBridge资源 github代码资源

原理:

2、使用Usage

2.1 导入头文件

import "WebViewJavascriptBridge.h// 声明变量@property WebViewJavascriptBridge* bridge;

2.2 将创建的webview 添加桥接

self.bridge = [WebViewJavascriptBridge bridgeForWebView:webView];

2.3 原生

---

registerHandler~~~原生处理
callHandler~~~JS处理

---

原生响应JS调用 和 原生调用JS

// 原生响应JS：原生注册testObjcCallback方法，当JS被触发时，原生可以响应并处理；[self.bridge registerHandler:@"testObjcCallback"                     handler:^(id data, WVJBResponseCallback responseCallback){    NSLog(@"testObjcCallback called: %@", data);    responseCallback(data);}];// 原生调用JS: 当原生被触发时，原生调用testJavascriptHandler，JS可以响应并处理[self.bridge callHandler:@"testJavascriptHandler"                   data:nil        responseCallback:^(id responseData){    NSLog(@"testJavascriptHandler responded: %@", responseData);}];

2.4 JS处理

2.4.1 将下面一段代码Copy到你的JS中

 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 = 'http://__bridge_loaded__';    document.documentElement.appendChild(WVJBIframe);    setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)}

2.4.2 最后, JS 中实现 setupWebViewJavascriptBridge 方法，并且用桥接去注册方法和实现ObjC方法响应

setupWebViewJavascriptBridge(function(bridge) {    /* Initialize your app here */     // JS调用原生：    bridge.registerHandler('testObjcCallback', function(data, responseCallback) {        console.log("JS testObjcCallback called with:", data)        responseCallback(data)    })     //JS响应原生调用 :/    bridge.callHandler('testJavascriptHandler', {'key':'value'}, function responseCallback(responseData) {        console.log("JS received response:", responseData)    })})

3、优缺点

【优】可以实现原生和H5之间的交互
【缺】每次新加方法必须更新原生，不能实现热更新

4、值得看的博客

http://www.cnblogs.com/TheYouth/p/5854467.html