iOS与H5交互之WebViewJavascriptBridge

开发中可能会遇到与H5页面交互的情况,在这里就简单介绍一下怎么与H5交互

iOS与HTML5的交互方式

iOS与H5的交互方式大概有以下5种:

• 利用WKWebView进行交互(系统API)
• 利用UIWebView进行交互(系统API)
• 苹果的javascriptcore.framework框架;
• 跨平台cordova框架;
• 第三方WebViewJavascriptBridge

本篇文章就来讲讲WebViewJavascriptBridge的简单使用。

WebViewJavascriptBridge的使用

• 在Github上下载WebJavaScriptBridge
• 解压缩包,将WebViewJavascriptBridge文件夹拖到你的工程中
• 在需要使用WebViewJavascriptBridge的类文件中引入头文件WebViewJavascriptBridge.h

使用方式

HTML页面中需要完成的工作

1.在HTML文件中添加下方代码,这段代码是固定的,必须添加的：

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)
            }

2.设置JS与OC交互时的命令字：

//              无参数时,用下列方式
                window.WebViewJavascriptBridge.callHandler('Set')
//              单个参数时,用下列方式
//              window.WebViewJavascriptBridge.callHandler('Set','参数')
//              多参数时,用下列方式
//              window.WebViewJavascriptBridge.callHandler('Set', {'参数1': '111', '参数

3.设置OC与JS交互时的接收方法与命令字：

setupWebViewJavascriptBridge(function(bridge) {
                bridge.registerHandler('Get', function(data, responseCallback) {
                alert(data);
                })
            })

OC控制器中需要完成的工作

1.向控制器中引入文件WebViewJavascriptBridge.h
2.加载HTML文件

[self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"WebViewJavascriptBridgeDemo" ofType:@"html"]]]];

3.初始化WebViewJavascriptBridge

@property (nonatomic, strong) WebViewJavascriptBridge *bridge;
...
self.bridge = [WebViewJavascriptBridge bridgeForWebView:self.webView];
//    若要实现WebViewDelegate要添加这句绑定代码
//    [self.bridge setWebViewDelegate:self];

4.根据命令字设置JS发数据给OC的方法

[self.bridge registerHandler:@"Set" handler:^(id data, WVJBResponseCallback responseCallback) {
       //这里的data为JS发送给OC的数据
    }];

5.根据命令字设置OC发数据给JS的方法

[self.bridge callHandler:@"Get" data:@"OC已接受"];

效果如下：

希望这篇文章对各位看官有所帮助，Demo下载地址：Demo