H5与App的交互（WebViewJavascriptBridge）

最近有时间整理下H5与APP的交互框架（WebViewJavascriptBridge），既可以和ios交互也可以和安卓交互，我只做了和IOS的交互，所以只阐述和IOS的交互。

1:JS端的操作

/* WebViewJavascriptBridge框架使用  这段代码是固定的，必须要放到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)
        }


	/*与OC交互的所有JS方法都要放在此处注册，才能调用通过JS调用OC或者让OC调用这里的JS*/
         setupWebViewJavascriptBridge(function(bridge) {
                         
	   //js调用oc的方法  clickHeadImage(方法名与APP端保持一致)  大括号内是传递参数的方式
           window.WebViewJavascriptBridge.callHandler('clickHeadImage', {"userId":1}, function(response) {
                 console.log('JS got response', response);
            });

         //oc调用Js的方法，并且有返回函数   callHeandler(方法名与app端保持一致)  data（IOS传过来的数据）
           bridge.registerHandler('callHandler', function(data, responseCallback) {
                                
           //js回调函数返回数据
            var responseData = { 'Javascript Says':'I am Js, CallBack Now!!!!!' }
            responseCallback(responseData,data)

             })
       });

2：IOS端的操作，因为我不是很懂IOS，所以只能贴出自己找的方法了，仅供参考。

1:导入头文件
#import "WebViewJavascriptBridge.h"
@property WebViewJavascriptBridge* bridge;

2:实例化这个_bridge

//开启调试信息
 [WebViewJavascriptBridge enableLogging];

//关联webView
 _bridge = [WebViewJavascriptBridge bridgeForWebView:_webview];

3:(1)在oc中注册 & (2)在js中处理回调 

  //点击js事件 js向oc通信(触发oc事件)
    [_bridge registerHandler:@"registerHandler" handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@"datattatatatat=== %@",[NSString stringWithFormat:@"%@",data]);

        UIAlertView *aler = [[UIAlertView alloc]initWithTitle:nil message:@"js调用oc的按钮提示" delegate:self      cancelButtonTitle:@"取消" otherButtonTitles:nil];
        aler.tag = 100;

        [aler show];

    }];

    id data = @{@"信息来源:":@"点击oc事件,oc向js发送信息并得到js反馈"};
    [_bridge callHandler:@"callHandler" data:data responseCallback:^(id responseData) {
        NSLog(@"   =========  %@",responseData);
        self.lab.text = [NSString stringWithFormat:@"btn2 获得js反馈 %@",responseData];
    }];

WebViewJavascriptBridge这个H5与APP交互的框架还是挺不错的，既可以和IOS交互也可以和安卓交互，因为我做的是H5端的，安卓和IOS不是很懂，所以有说的不对的地方还希望有看到朋友指教下。