現(xiàn)在的項(xiàng)目中，界面越來越復(fù)雜，混合編程已成一個(gè)趨勢，項(xiàng)目中嵌入H5已是必然的事，那么OC與H5交互就成一個(gè)問題了。其實(shí)交互就是OC與JS交互。
展示網(wǎng)頁可以使用UIWebView和WKWebView兩個(gè)控件，UIWebView占用的內(nèi)存大，這里我們使用WKWebView來完成交互。
1.導(dǎo)入WebViewJavascriptBridge
使用cocoapods導(dǎo)入，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發(fā)送給OC的數(shù)據(jù)
? ? ? ? NSLog(@"----------%@", data);
? ? ? ? //OC調(diào)用JS
? ? ? ? [_bridge callHandler:@"getData" data:@"OC傳來的數(shù)據(jù)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調(diào)用JS
? ? ? ? setupWebViewJavascriptBridge(function(bridge) {
?? ? ? ? ? ? bridge.registerHandler('getData',function(data, responseCallback) {
? ? ? ? ? ? ? ? //這里的data為OC發(fā)送給JS的數(shù)據(jù)
? ? ? ? ? ? ? ? document.getElementById('content').innerHTML = data;
? ? ? ? ? ? })
?? ? ? ? })
? ? ? ? //按鈕點(diǎn)擊事件
? ? ? ? functiongetData() {
? ? ? ? ? ? //JS調(diào)用OC
? ? ? ? ? ? window.WebViewJavascriptBridge.callHandler('setData','點(diǎn)擊了按鈕的事件');
? ? ? ? }
Demo地址：Demo地址
如有不同意見請指出，共同改正。
