開(kāi)發(fā)中可能會(huì)遇到與H5頁(yè)面交互的情況,在這里就簡(jiǎn)單介紹一下怎么與H5交互
iOS與HTML5的交互方式
iOS與H5的交互方式大概有以下5種:
- 利用WKWebView進(jìn)行交互(系統(tǒng)API)
- 利用UIWebView進(jìn)行交互(系統(tǒng)API)
- 蘋(píng)果的javascriptcore.framework框架;
- 跨平臺(tái)cordova框架;
- 第三方WebViewJavascriptBridge
本篇文章就來(lái)講講WebViewJavascriptBridge的簡(jiǎn)單使用。
WebViewJavascriptBridge的使用
- 在Github上下載
WebJavaScriptBridge - 解壓縮包,將
WebViewJavascriptBridge文件夾拖到你的工程中 - 在需要使用
WebViewJavascriptBridge的類文件中引入頭文件WebViewJavascriptBridge.h
使用方式
HTML頁(yè)面中需要完成的工作
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.設(shè)置JS與OC交互時(shí)的命令字：
// 無(wú)參數(shù)時(shí),用下列方式
window.WebViewJavascriptBridge.callHandler('Set')
// 單個(gè)參數(shù)時(shí),用下列方式
// window.WebViewJavascriptBridge.callHandler('Set','參數(shù)')
// 多參數(shù)時(shí),用下列方式
// window.WebViewJavascriptBridge.callHandler('Set', {'參數(shù)1': '111', '參數(shù)
3.設(shè)置OC與JS交互時(shí)的接收方法與命令字：
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];
// 若要實(shí)現(xiàn)WebViewDelegate要添加這句綁定代碼
// [self.bridge setWebViewDelegate:self];
4.根據(jù)命令字設(shè)置JS發(fā)數(shù)據(jù)給OC的方法
[self.bridge registerHandler:@"Set" handler:^(id data, WVJBResponseCallback responseCallback) {
//這里的data為JS發(fā)送給OC的數(shù)據(jù)
}];
5.根據(jù)命令字設(shè)置OC發(fā)數(shù)據(jù)給JS的方法
[self.bridge callHandler:@"Get" data:@"OC已接受"];
效果如下：
希望這篇文章對(duì)各位看官有所幫助，Demo下載地址：Demo
