iOS JS与OC交互

博文参考：

链接1： iOS与网页JS交互,3中方法实现
链接2：IOS中 使用JavaScriptCore 实现OC与JS的交互
链接3：WebViewJavascriptBridge的基本原理

我要实现的功能：

给web页传入经纬度和城市名字，显示出该城市的地铁线路图，效果如下

实现过程

这里实现OC与JS的交互使用的是第三方：WebViewJavascriptBridge，简单方便，既然是第三方，那么使用cocoapods导入最方便
1.准备工作
首先新建工程，使用cocoapods导入WebViewJavascriptBridge

platform :ios,'10.0'
target 'OCAndJS’ do
 pod "WebViewJavascriptBridge",'~>5.0.5'
end

然后在需要使用的第三方API的地方引入头文件

#import <WebViewJavascriptBridge/WebViewJavascriptBridge.h>

最后将H5界面对应的文件拖入到工程中

2.OC代码
首先添加webView，遵循UIWebViewDelegate

//添加webView
self.webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 20, kScreenWidth, kScreenHeight)];
self.webView.delegate = self;
[self.view addSubview:self.webView];
//加载H5页面
NSString *resoucePath = [[NSBundle mainBundle] resourcePath];
NSString * filePath = [resoucePath stringByAppendingPathComponent:@"index.html"];
NSString * html = [[NSString alloc] initWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];
[self.webView loadHTMLString:html baseURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]]];

添加OC和JS桥接对象

@property(nonatomic,strong)WebViewJavascriptBridge * bridge;//桥接对象

开启桥接对象，关联OC和JS

    //js与oc交互传值---打开方式WebViewJavascriptBridge
    [WebViewJavascriptBridge enableLogging];//开启日志
    self.bridge = [WebViewJavascriptBridge bridgeForWebView:self.webView];// 给哪个webview建立JS与OjbC的沟通桥梁
    [_bridge setWebViewDelegate:self];//设置webView代理
    //js与oc交互传值---OC给JS传值
    [self.bridge callHandler:@"testJavascriptHandler" data:@{@"latitude":[NSNumber numberWithFloat:28.199439],@"lontitude":[NSNumber numberWithFloat:113.022366],@"cityName":@"长沙"}];
    //js与oc交互传值---注册接收从js传传过来的值的理者，唯一标识是“ testObjcCallback”，与js中代码相对应
    [self.bridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) {
        //这里面获取在H5界面返回的值，在data中
        NSLog(@"%@",data);
        responseCallback(@"Response from testObjcCallback");//block里面的值可以传到js中去，可以不写
    }];

3.JS代码
首先是公共代码

//与OC交互的所有JS方法都要放在此处注册，才能调用通过JS调用OC或者让OC调用这里的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)
      }

绑定的弹出框事件

    function bindEvent(){
        setupWebViewJavascriptBridge(function(bridge) {
            bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
                city = data.cityName;
                bdLng = data.lontitude;
                bdLat = data.latitude;
                                   
                window.cbk();
            });

            $('.js_start_tap').off('touchstart').on('touchstart', function(event) {
                var name = $(this).attr('data-name');
                bridge.callHandler('testObjcCallback', {'name':name, 'type':'start'}, function(response) {});
            });
            $('.js_end_tap').off('.touchstart').on('touchstart', function(event) {
                var name = $(this).attr('data-name');
                bridge.callHandler('testObjcCallback', {'name':name,'type':'end'}, function(response) {});
            });
        });
    }

其中js传值到oc的代码

//这部分的代码写在H5中需要传值的操作处
bridge.callHandler('testObjcCallback', {'name':name,'type':'end'}, function(response) {});

而js获取oc中的值的代码

//写到合适的地方就可以
bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
                city = data.cityName;
                bdLng = data.lontitude;
                bdLat = data.latitude; 
                window.cbk();
            });

Demo下载地址