混合开发native和h5交互之WebViewJavascriptBridge

https://github.com/marcuswestin/WebViewJavascriptBridge
1.库文件 （WKWebView是ios8才支持的，可以替换UIWebView，大家可以暂时不管）

Paste_Image.png

2.使用如下

//  WebViewController.h
@interface WebViewController : UIViewController
@end

//  WebViewController.m
#import "WebViewController.h"

#import "WebViewJavascriptBridge.h"

@interface WebViewController ()
@property (strong, nonatomic) UIWebView *webView;
@property (nonatomic, strong) WebViewJavascriptBridge * bridge;

@end

@implementation WebViewController

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
    if (_bridge) { return; }

    [self bindWebViewBridge];
    [self injectJSMonitoringFuction];

    [self loadExamplePage:webView];
}

- (void)bindWebViewBridge
{
    //1.启动标志
    [WebViewJavascriptBridge enableLogging];
    //2.创建绑定webView  WebViewJavascriptBridge
    _bridge = [WebViewJavascriptBridge bridgeForWebView:self.webView webViewDelegate:self handler:^(id data, WVJBResponseCallback responseCallback) {
        //        NSLog(@"ObjC received message from JS: %@", data);
        responseCallback(@"Response for message from ObjC");
    }];

}

- (void)injectJSMonitoringFuction
{
    //3.js调用oc的方法 （注意html里也要有对应的jsFinishWebView函数，data是js返回给oc,responseCallback可以将值返回给html）
    WS(weakSelf)
    [_bridge registerHandler:@"jsFinishWebView" handler:^(id data, WVJBResponseCallback responseCallback) {
        NSDictionary * dic = data;
        [weakSelf handleWithJSONString:dic[@"action"] withData:dic[@"data"] callBack:responseCallback];
    }];

}
//4.oc调用js的方法
 - (void)OCProvideDatatoJS
{
    //4.0 oc调用js的方法  (什么都不传)
    [_bridge send:@"A string sent from ObjC after Webview has loaded."];
    //4.1 oc调用js的方法  (带参数)
    [_bridge callHandler:@"testJavascriptHandler" data:@{ @"foo":@"before ready" }];
    //4.2 oc调用js的方法 (带参数，同时接收js返回的值response)
    id data = @{ @"greetingFromObjC": @"Hi there, JS!" };
    [_bridge callHandler:@"testJavascriptHandler" data:data responseCallback:^(id response) {
        NSLog(@"testJavascriptHandler responded: %@", response);
    }];
}

- (void)handleWithJSONString:(NSString *)string withData:(id)info callBack:(WVJBResponseCallback)responseCallback
{
    //改变navigation上的title
    if ([string isEqualToString:@"title"]) {
        if (self.navigationController) {
//            self.navigationItem.title = info;
        }
        if (self.webViewType == TypeFromBanner) {
            responseCallback(@"进入到了app里，不需要再显示返回按钮");
        }
    }

}

- (void)loadExamplePage:(UIWebView*)webView {
    NSString* htmlPath = [[NSBundle mainBundle] pathForResource:@"ExampleApp" ofType:@"html"];
    NSString* appHtml = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];
    NSURL *baseURL = [NSURL fileURLWithPath:htmlPath];
    [webView loadHTMLString:appHtml baseURL:baseURL];
}

#pragma mark - LazyLoading
- (UIWebView *)webView
{
    if (!_webView) {
        if (self.webViewType == TypeFromLanuch) {
            _webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, HHBWIDTH, HHBHEIGHT)];
            [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleDefault];
        }
        if (self.webViewType == TypeFromBanner) {
            _webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, HHBWIDTH, HHBHEIGHT - 15)];
        }
        _webView.backgroundColor = [UIColor whiteColor];
        [self.view addSubview:_webView];
    }
    return _webView;
}

@end

js调用native代码：
h5页面一般这样写就可以（ios需要转换下）

Paste_Image.png

如果您发现本文对你有所帮助，如果您认为其他人也可能受益，请把它分享出去。