WebViewJavascriptBridge实现JS和OC的相

目前很多APP都是 原生+H5开发的，这种混合开发模式经常需要进行一些JS和OC的相互调用，而WebViewJavascriptBridge就是用来解决这个问题的。它的使用也是非常简单的，下面分两种情况展示一下我是如何使用的。

准备工作

• 在JS文件或者HTML文件的script 标签中添加下面的代码片段，用来设置JS和OC相互调用的上下文环境 ，这里是在HTML的script标签中添加的。
  <script>
  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 = 'wvjbscheme://__BRIDGE_LOADED__'; document.documentElement.appendChild(WVJBIframe); setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0) }
  </script>
• 在controller的.m中导入头文件 WebViewJavascriptBridge.h，添加一个UIWebView属性和一个WebViewJavascriptBridge的成员变量_bridge
  { WebViewJavascriptBridge *_bridge; } @property(nonatomic, strong)UIWebView *webView;
  初始化WebViewJavascriptBridge代码如下
  [WebViewJavascriptBridge enableLogging];//打印日志 _bridge = [WebViewJavascriptBridge bridgeForWebView:self.webView webViewDelegate:self handler:^(id data, WVJBResponseCallback responseCallback) { }];
  至此，JS与OC相互调用的环境就配置好了，接下来实现如何调用。

JS调用OC

• 首先在viewDidLoad方法中注册需要在JS代码中调用的函数，代码如下
  [_bridge registerHandler:@"backAction" handler:^(id data, WVJBResponseCallback responseCallback) { //ToDo }
  在html中有个按钮的id 是backicon，点击按钮的时候这样来调用OC的代码
  $('#backicon').click(function() { setupWebViewJavascriptBridge(function(bridge) {
  bridge.callHandler('backAction', function responseCallback(responseData) {
  });
  });
  });
  $符号表示jQuery,这里是一种简写的形式。

OC调用JS

• 首先在JS文件或者HTML文件中注册需要在OC中调用的函数
  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)
  })这里注册了一个名为 testJavascriptHandler 的JS函数，下面在OC中调用该函数[_bridge callHandler:@"testJavascriptHandler" data:@{ @"foo":@"before ready" }];`

为了方便查看输出日志，上面用到了log方法，该方法是这样定义的
var uniqueId = 1 function log(message, data) { var log = document.getElementById('log') var el = document.createElement('div') el.className = 'logLine' el.innerHTML = uniqueId++ + '. ' + message + ':<br/>' + JSON.stringify(data) if (log.children.length) { log.insertBefore(el, log.children[0]) } else { log.appendChild(el) } }

希望了解更多关于WebViewJavascriptBridge的朋友可以点击下面的连接到github上详细了解WebViewJavascriptBridge 。