iOS oc与js的交互之WebviewJavaScripteBridge

在app中嵌套webview，让js和oc之间的交互是一种很灵活的应用，特别是在电商这一块。

先看看不使用第三方框架时oc和js之间是怎么调用的：

1、oc调用js：

通过webview的stringbyEvaluteJavaScriptFromString:

- (nullableNSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;

比如：获取网页的title：

NSString *title = [webview stringByEvaluatingJavaScriptFromString:@"document.title"];

2、js调用oc：

这个需要用到webview的代理方法：shouldStartLoadWithRequest：

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;

这个代理是在 [webView loadRequest :request];之后被触发，不论有没有网络。

所以我们可以在这里拦截网页上的点击事件，并根据request的url进行判断调用oc的那个方法。

虽然原生的应用能解决oc和js之间的一些简单互动，但是缺点也是显而易见的，比如oc调用js是以string的形式执行脚本，这些脚本应该是网页人员编写的，大部分ios开发人员是不懂js的，就算懂网代码里边写一堆的js，也不美观。 oc这边应该只管调用，网页那边也没必要公开源码对吧？再说js调oc的，oc端也不可能事先知道所有的链接，从而对链接一一判断，所以，WebviewJavaScripteBridge登场了。

WebviewJavaScripteBridge代码托管在：https://github.com/marcuswestin/WebViewJavascriptBridge，上面的例子很详细。

虽然我没看过WebViewJavascriptBridge的源码，但调试代码的时候发现也是调用上面的两种方法，也好理解，因为归根到底还是得通过webview的api和代理来实现oc和js的相互调用，从名字也看的出来（webviewJavascript Bridge）是webview和Javascript的桥接。

这里只说一下使用步骤：

一、定义桥接对象。

@property WebViewJavascriptBridge* bridge;

二、通过webview实例化桥接对象

self.bridge = [WebViewJavascriptBridge bridgeForWebView:webView];

三、接下来就是oc和js之间的相互调用了：

1、js调用oc ：

只需要用registerHandler像js注册方法：

- (void)registerHandler:(NSString *)handlerName handler:(WVJBHandler)handler；

比如：网页需要知道原生是否已经登录：则

[_bridge registerHandler:@"islogin"handler:^(id data,WVJBResponseCallback responseCallback) {

        if (_isLogin) {

            responseCallback(@"1");

        } else{

            responseCallback(@"0");

        }

}

方法islogan是iOS开发人员和网页开发商定的名字，网页只要调用islogin方法，就会执行block里面的方法。

说说上面的两个参数：

data是网页传过来的参数，responseCallback是回调方法，通过它来像网页传回数据。

2、oc调用js

上面的js调oc，oc需要注册方法，同样的，oc调用js，js那边也需要注册方法，并把方法名告诉你，你只需调用方法就行了。

比如原生支付后，网页想知道支付结果：

 [_bridgecallHandler:@"payresult"data:[NSStringstringWithFormat:@"%d", payCode]]; // payresult网页定的方法名

执行这个方法就会马上执行网页的payresult方法。

如果想了解更多请到WebViewJavascriptBridge官网：

https://github.com/marcuswestin/WebViewJavascriptBridge