iOS 使用WebViewJavascriptBridge完成OC与H5交互

现在的项目中，界面越来越复杂，混合编程已成一个趋势，项目中嵌入H5已是必然的事，那么OC与H5交互就成一个问题了。其实交互就是OC与JS交互。

展示网页可以使用UIWebView和WKWebView两个控件，UIWebView占用的内存大，这里我们使用WKWebView来完成交互。

1.导入WebViewJavascriptBridge

使用cocoapods导入，pod ‘WebViewJavascriptBridge’

2.引入头文件

#import "WKWebViewJavascriptBridge.h"

///WKWebView

@property (nonatomic, strong) WKWebView *webView;

@property (nonatomic, strong) WKWebViewJavascriptBridge *bridge;

3.这是OC中的代码

    self.webView = [[WKWebView alloc]initWithFrame:self.view.bounds];

    NSURLRequest *request = [NSURLRequest requestWithURL:[[NSBundle mainBundle] URLForResource:@"demo" withExtension:@"html"]];

    [self.webViewloadRequest:request];

    [self.viewaddSubview:self.webView];

    //初始化bridge

    self.bridge = [WKWebViewJavascriptBridge bridgeForWebView:self.webView];

    [self.bridgeregisterHandler:@"setData"handler:^(iddata,WVJBResponseCallbackresponseCallback) {

        //这里的data为JS发送给OC的数据

        NSLog(@"----------%@", data);

        //OC调用JS

        [_bridge callHandler:@"getData" data:@"OC传来的数据l, 哈哈哈"];

    }];

4.这是HTML中的代码

        //必须添加的代码

        functionsetupWebViewJavascriptBridge(callback) {

            if(window.WebViewJavascriptBridge) {returncallback(WebViewJavascriptBridge); }

            if(window.WVJBCallbacks) {returnwindow.WVJBCallbacks.push(callback); }

            window.WVJBCallbacks = [callback];

            varWVJBIframe = 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

        setupWebViewJavascriptBridge(function(bridge) {

             bridge.registerHandler('getData',function(data, responseCallback) {

                //这里的data为OC发送给JS的数据

                document.getElementById('content').innerHTML = data;

            })

         })

        //按钮点击事件

        functiongetData() {

            //JS调用OC

            window.WebViewJavascriptBridge.callHandler('setData','点击了按钮的事件');

        }

点击效果前

点击效果后

Demo地址：Demo地址

如有不同意见请指出，共同改正。