目前很多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 。
网友评论