iOS WebViewJavascriptBridge使用

企业在开始阶段一般为了节约开发成本一般会开发以webView为主体的App甚至是纯webApp，但这类型App的用户体验差。当企业规模慢慢做起来的时候会将自身的App慢慢向原生或混合模式HybridApp转变。而在hybridApp中，原生与JS交互则是绕不开的，而使用原生自带的交互方式未免有些繁琐，因此轻量级的JSBridge则是较为推荐的第三方通信框架。
Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。

JSBridge

1011485-20170709223110275-1352860935.png

主要调用方法

//初始化方法
+ (instancetype)bridgeForWebView:(WKWebView*)webView;
+ (void)enableLogging;

//注册函数名
- (void)registerHandler:(NSString*)handlerName handler:(WVJBHandler)handler;

//调用函数名
- (void)callHandler:(NSString*)handlerName;
- (void)callHandler:(NSString*)handlerName data:(id)data;
- (void)callHandler:(NSString*)handlerName data:(id)data responseCallback:(WVJBResponseCallback)responseCallback;

//重置
- (void)reset;

//设置WKNavigationDelegate
- (void)setWebViewDelegate:(id<WKNavigationDelegate>)webViewDelegate;

---

具体使用

#import "WebViewJavascriptBridge.h"

@property WebViewJavascriptBridge* bridge;




WKWebView* webView = [[NSClassFromString(@"WKWebView") alloc] initWithFrame:self.view.bounds];
webView.navigationDelegate = self;
[self.view addSubview:webView];

//UIWebView* webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
//[self.view addSubview:webView];


[WebViewJavascriptBridge enableLogging];//初始化
_bridge = [WebViewJavascriptBridge bridgeForWebView:webView];//连接webView
[_bridge setWebViewDelegate:self];//设置代理

JS调用OC

/**
     JS调用OC

     @param registerHandler 要注册的事件名称(与后台统一的自定义方法名)
     @param handler 回调block函数 当触发这个事件的时候会执行block里面的代码
     handler->data: js页面传过来的值，利用值处理页面功能及逻辑
     handler->responseCallback: OC收到值后给JS返回的回调

*/
[_bridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) {
    NSLog(@"testObjcCallback called: %@", data);
    responseCallback(@"Response from testObjcCallback");
}];

OC调用JS

/**
     OC调用JS

     @param callHandler 商定的事件名称,用来调用网页里面相应的事件实现(与后台统一的自定义方法名)
     @param data 向网页传递函数执行需要的参数（如将网页上输入框输入的内容传给后台处理）
     @param responseCallback->response(视情况选择需不需要) 后台获得所需参数时响应返回执行结果 
*/
[_bridge callHandler:@"testJavascriptHandler" data:@{@"foo":@"before ready" }];

//带有JS响应回调的方式
[_bridge callHandler:@"testJavascriptHandler" data:@{@"greetingFromObjC":@"Hi there, JS!" } responseCallback:^(id response) {
    NSLog(@"testJavascriptHandler responded: %@", response);
}];

WebViewJavascriptBridge
pod 'WebViewJavascriptBridge'
https://github.com/marcuswestin/WebViewJavascriptBridge