WebViewJavascriptBridge使用总结

2017-01-14 10:01:55来源:http://www.jianshu.com/p/aea53fb753f8作者:Owen_Li人点击

WebViewJavascriptBridge

github地址:WebViewJavascriptBridge


使用实例

使用的WebViewJavascriptBridge版本为5.0.5。本文记录UIWebView和JS交互的基本使用,也算是对WebViewJavascriptBridge初步认识。


ViewController页面分析
初始化

创建WebViewJavascriptBridge


    _bridge = [WebViewJavascriptBridge bridgeForWebView:_webViewjs];
[_bridge setWebViewDelegate:self];

初始化方法:bridgeForWebView实现如下


+ (instancetype)bridgeForWebView:(WVJB_WEBVIEW_TYPE*)webView {
WebViewJavascriptBridge* bridge = [[self alloc] init];
[bridge _platformSpecificSetup:webView];
return bridge;
}
//调用如下方法
- (void) _platformSpecificSetup:(WVJB_WEBVIEW_TYPE*)webView {
_webView = webView;
_webView.delegate = self;
_base = [[WebViewJavascriptBridgeBase alloc] init];
_base.delegate = self;
}

内部初始化了一个WebViewJavascriptBridgeBase对象,并对_webView和_base赋值。


注册一个方法,用来响应JS调用
- (void)registShareFunction {
[_bridge registerHandler:@"ShareClick" handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"-----分享数据:%@", data);
//实现需要的操作
}];
}

参数:ShareClick是handler的名字,与网页中JS调用的handler名字相同(写错了就慢慢找吧,别问我是怎么知道的)。data是JS发送过来的数据。responseCallback回调数据给JS。


注册一个方法,用来调用JS
  [_bridge callHandler:@"OCtoJS" data:@"一个字符串" responseCallback:^(id responseData) {
NSLog(@"%@", responseData);
}];

参数说明:OCtoJS是handler名字。data发送给JS的数据。responseCallback响应JS的回调。


下面是ViewController完整代码
#import "ViewController.h"
#import <WebViewJavascriptBridge.h>
#import "SecondViewController.h"
@interface ViewController ()<UIWebViewDelegate>
@property (weak, nonatomic) IBOutlet UIWebView *webViewjs;
@property (nonatomic, strong) WebViewJavascriptBridge *bridge;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemDone target:self action:@selector(right)];
[WebViewJavascriptBridge enableLogging];
_bridge = [WebViewJavascriptBridge bridgeForWebView:_webViewjs];
[_bridge setWebViewDelegate:self];
[self loadExamplePage:_webViewjs];
[self registShareFunction];
}
- (void)right{
[_bridge callHandler:@"OCtoJS" data:@"一个字符串" responseCallback:^(id responseData) {
NSLog(@"%@", responseData);
}];
}
- (void)loadExamplePage:(UIWebView*)webView {
NSString* htmlPath = [[NSBundle mainBundle] pathForResource:@"jsDemo" ofType:@"html"];
NSString* appHtml = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];
NSURL *baseURL = [NSURL fileURLWithPath:htmlPath];
[webView loadHTMLString:appHtml baseURL:baseURL];
}
- (void)registShareFunction {
[_bridge registerHandler:@"ShareClick" handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"-----分享数据:%@", data);
//实现需要的操作
SecondViewController *secondVC = [[SecondViewController alloc] init];
UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:secondVC];
[self presentViewController:nav animated:YES completion:^{
responseCallback(@"分享成功");
}];
}];
}
@end

index.html页面分析
配置index.html

WebViewJavascriptBridge是通过拦截URL来实现调用原生功能。下面是html中必须配置的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 = 'wvjbscheme://__BRIDGE_LOADED__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}

具体如何实现的这里不多分析,请自行Google。


注册方法,用来OC响应调用。
setupWebViewJavascriptBridge(function(bridge) {
bridge.registerHandler('OCtoJS', function(data, responseCallback) {
alert('JS方法被调用' + data);
responseCallback('JS执行过了');
})
})

只有在setupWebViewJavascriptBridge中注册的方法才能被OC调用。可以在其中定义多个方法用来响应OC。注意OCtoJS和前面handler名称是对应的。


JS调用OC方法
function ShareClick(){
var item = '我是JS发送来的数据';
WebViewJavascriptBridge.callHandler('ShareClick',item, function(response){
alert('response');
})
}

index.html完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>测试</title>
</head>
<body>
<script type="text/javascript">
//监听程序
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)
}
setupWebViewJavascriptBridge(function(bridge) {
bridge.registerHandler('OCtoJS', function(data, responseCallback) {
alert('JS方法被调用' + data);
responseCallback('JS执行过了');
})
})
function ShareClick(){
var item = '我是JS发送来的数据';
WebViewJavascriptBridge.callHandler('ShareClick',item, function(response){
})
}
</script>
<button onclick="ShareClick()">点击调用支付宝</button>
</body>
</html>

小结

使用WebViewJavascriptBridge可以很方便的实现OC与JS之间交互。
另外使用在交互,获取参数方面都比较简洁。




最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台