簡述：
隨著h5開發(fā)需求量的逐漸增多，如何才能更好地在原生上實現(xiàn)h5界面開發(fā)，讓app不僅擁有原生的體驗感，還能保證h5的界面靈活性，現(xiàn)提供一套實用的iOS與原生的交互代碼，親測可用，歡迎大家指導(dǎo)建議。
首先采用的框架是WebViewJavascriptBridge，采用這套框架可以方便的使iOS與JS交互
一.?流程圖（主要介紹思路）
二.iOS端如何使用
首先導(dǎo)入#import"WebViewJavascriptBridge.h"文件
第一步：開啟日志
//?開啟日志，方便調(diào)試
[WebViewJavascriptBridge enableLogging];
第二步：給ObjC與JS建立橋梁
//?給哪個webview建立JS與OjbC的溝通橋梁
self.bridge = [WebViewJavascriptBridgebridgeForWebView:webView];
//?設(shè)置代理，如果不需要實現(xiàn)，可以不設(shè)置
[self.bridge setWebViewDelegate:self];
第三步：注冊HandleName，用于給JS端調(diào)用iOS端
// JS主動調(diào)用OjbC的方法
//?這是JS會調(diào)用getUserIdFromObjC方法，這是OC注冊給JS調(diào)用的
// JS需要回調(diào)，當(dāng)然JS也可以傳參數(shù)過來。data就是JS所傳的參數(shù)，不一定需要傳
// OC端通過responseCallback回調(diào)JS端，JS就可以得到所需要的數(shù)據(jù)
[self.bridge registerHandler:@"getUserIdFromObjC"handler:^(iddata, WVJBResponseCallback responseCallback) {
??? NSLog(@"js call getUserIdFromObjC, data from js is %@", data);
?if(responseCallback) {
?//?反饋給JS
????? responseCallback(@{@"userId":?@"123456"});
??? }
}];
[self.bridge registerHandler:@"getBlogNameFromObjC"handler:^(iddata, WVJBResponseCallback responseCallback) {
??? NSLog(@"js call getBlogNameFromObjC, data from js is %@", data);
?if(responseCallback) {
?//?反饋給JS
????? responseCallback(@{@"blogName":?@"星仔"});
??? }
}];
第四步：直接調(diào)用JS端注冊的HandleName
[self.bridge callHandler:@"getUserInfos"data:@{@"name":?@"ddsds"}responseCallback:^(idresponseData) {
??? NSLog(@"from js: %@", responseData);
}];
三.JS端如何使用
??? <script>
????? window.onerror = function(err) {
??????? log('window.onerror: '+ err)
????? }
?/*這段代碼是固定的，必須要放到j(luò)s中*/
????? function setupWebViewJavascriptBridge(callback) {
?if(window.WebViewJavascriptBridge) {?returncallback(WebViewJavascriptBridge); }
?if(window.WVJBCallbacks) {?returnwindow.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)
????? }
?/*與OC交互的所有JS方法都要放在此處注冊，才能調(diào)用通過JS調(diào)用OC或者讓OC調(diào)用這里的JS*/
????? setupWebViewJavascriptBridge(function(bridge) {
var uniqueId =?1
?????? function log(message, data) {
???????? var log = document.getElementById('log')
???????? var el = document.createElement('div')
el.className =?'logLine'
el.innerHTML = uniqueId++ +?'. '+ message +?':<br/>'+ JSON.stringify(data)
?if(log.children.length) {
??????????? log.insertBefore(el, log.children[0])
}?else{
?????????? log.appendChild(el)
???????? }
?????? }
?/* Initialize your app here */
?/*我們在這注冊一個js調(diào)用OC的方法，不帶參數(shù)，且不用ObjC端反饋結(jié)果給JS：打開本demo對應(yīng)的博文*/
???? bridge.registerHandler('openWebviewBridgeArticle', function() {
???????? log("openWebviewBridgeArticle was called with by ObjC")
???? })
?/*JS給ObjC提供公開的API，在ObjC端可以手動調(diào)用JS的這個API。接收ObjC傳過來的參數(shù)，且可以回調(diào)ObjC*/-
????? bridge.registerHandler('token', function(data, responseCallback) {
???????? log("G星爺: ", data)
?????? responseCallback({這里給我返回拼接后的地址})
???? })
?/*JS給ObjC提供公開的API，ObjC端通過注冊，就可以在JS端調(diào)用此API時，得到回調(diào)。ObjC端可以在處理完成后，反饋給JS，這樣寫就是在載入頁面完成時就先調(diào)用*/
?????? bridge.callHandler('getUserIdFromObjC', function(responseData) {
??????? log("JS call ObjC's getUserIdFromObjC function, and js received response:", responseData)
????? })
?????? document.getElementById('blogIds').onclick = function (e) {
???????? log('js call objc: getBlogNameFromObjC')
???????? bridge.callHandler('ww', {'blogdURL':?'weidsfdl'}, function(response) {
????????????????????????? log('JS got response', response)
????????????????????????? })
?????? }
???? })
??? </script>
四.注意事項
1.當(dāng)出現(xiàn)這樣的提示的話，說明JS那邊已經(jīng)實現(xiàn)了名字為‘ww’的方法，但是iOS這邊沒有注冊，
具體實現(xiàn)是：
[self.bridgeregisterHandler:@"ww"handler:^(id data, WVJBResponseCallback responseCallback) {
??? NSLog(@"js call getBlogNameFromObjC, data from js is %@", data);
??? if (responseCallback) {
????? // 反饋給JS
????? responseCallback(@{@"blogName": @"星仔"});
??? }
}];
2. 當(dāng)在push或者說頁面消失的時候，將bridge對象置為空。
五.防止WebView長按實現(xiàn)的方法如下：
- (void)webViewDidFinishLoad:(UIWebView *)webView{
?//?禁用頁面元素選擇
??? [webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.style.webkitUserSelect='none';"];
//?禁用長按彈出ActionSheet
??? [webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.style.webkitTouchCallout='none';"];
}
js文件下載地址：
