iOS和JS互動(含OC、html、js)程式碼不使用第三方庫(二)
阿新 • • 發佈：2019-01-01
最近研究研究OC和JS互動的WebViewJavascriptBridge的用法
網上似乎有好多的關於OC和js互動的例子，但是沒有一個完成的。今天我就把我的OC程式碼和Html程式碼統統的放出來。在說說網上的例子都是一個樣沒有一點區別，其實你關注洲洲哥的簡書就夠了。
github地址：https://github.com/7General/WebViewJS
今天以WebViewJavascriptBridge的5.0.5也就是最新的版本來示範。
跟著我的程式碼一塊來
1. 使用CocoaPods匯入WebViewJavascriptBridge
這裡我們使用最新版本
pod 'WebViewJavascriptBridge' 匯入工程的shell命令這裡我就不多說了。
2. 編寫OC程式碼（先寫oc程式碼還是Js程式碼都可）
- 引入標頭檔案
#import "WebViewJavascriptBridge.h" -
建立兩個屬性
@property (nonatomic, strong) UIWebView * webView; @property WebViewJavascriptBridge* bridge; - 初始化
WebView和WebViewJavascriptBridgeself.webView = [[UIWebView alloc] initWithFrame:self.view.bounds]; [self.view addSubview:self.webView]; /**開啟日誌*/ [WebViewJavascriptBridge enableLogging]; /**初始化-WebViewJavascriptBridge*/ self.bridge = [WebViewJavascriptBridge bridgeForWebView:self.webView]; [self.bridge setWebViewDelegate:self];3.
JS呼叫OC程式碼NOTICE:我們在寫這裡的呼叫程式碼之前，我們一定要知道前端js函式裡一定要知道函式名稱。這個很重要。
這裡我們假設前端有個函式名稱是callViewLoad他要呼叫OC的程式碼給返回來的資料最列表處理。
看看OC的程式碼如何處理Js發來的請求
[self.bridge registerHandler:@"callViewLoad" handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"前端傳送的資料 %@", data);
if (responseCallback) {
// respons給前端的資料
responseCallback(@{@"UName": @"洲洲哥的技術部落格",@"URLS":@"http://www.jianshu.com/users/1338683b18e0/latest_articles"});
}
}];
來說說這裡的引數說明
handler的回撥中有data、responseCallback兩個引數
- 這其中的
data是前端js函式給後端傳送的資料：比如在登陸的時候，就要把賬戶資訊和使用者密碼傳入後端，給後端處理。這裡的data就是存放著兩個資料的 responseCallback是我們要給前端js函式返回的資料內容，前端給我們傳入了使用者名稱和密碼，我們呼叫介面之後返回登陸結果給前端就是要用他了。但是以字典形式返回。
到這裡我們的JS呼叫OC，oc端的程式碼已經說完了。
前端JS程式碼的寫法
-
html的程式碼寫法<html> <head> <title>OC和JS互動Web</title> <script> /*這段程式碼是固定的，必須要放到js中*/ 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) } /**與OC互動的所有JS方法都要放在此處註冊，才能呼叫通過JS呼叫OC或者讓OC呼叫這裡的JS*/ setupWebViewJavascriptBridge(function(bridge) { /**OC呼叫JS程式碼不含引數*/ bridge.registerHandler('UserLogin', function() { alert('UserLogin') }) /**OC呼叫JS程式碼含引數*/ bridge.registerHandler('UserLoginInfo', function(data, responseCallback) { responseCallback({'userId': '123456', 'Names': 'ZHOUZHOUGEDEBOKE'}) }) // **********************************JS呼叫OC bridge.callHandler('callViewLoad', {'blogURL': 'http://www.henishuo.com'}, function(responseCallback){ alert(responseCallback.UName) }) }) </script> </head> <body> <button style = "background: yellow; height: 50px; width: 100px;">JS/OC互動</button> </body> </html>我們這裡主要看html程式碼中的
callViewLoad函式。這個就是他呼叫oc函式證明。這裡的callHandler的裡的引數可以看看 - 第一個引數
callViewLoad:函式名 - function(responseCallback) : 接受成功返回的
JS函式這裡可以在後端成功返回之後在這裡我們可以監聽到。和OC的Block類似。
這個函式的說明：JS給ObjC提供公開的API，ObjC端通過註冊，就可以在JS端呼叫此API時，得到回撥。ObjC端可以在處理完成後，反饋給JS，這樣寫就是在載入頁面完成時就先呼叫。
NOTICE:這裡只說了JS呼叫OC程式碼的宣告。間間單單的介紹了一個方法的使用。但是我們也看到了再寫前端JS函式的時候，有那麼一大坨程式碼是必須要寫的。不然是不會產生聯合效果的。
如有問題可新增我的QQ：1290925041
還可新增QQ群:234812704（洲洲哥學院）
歡迎各位一塊學習，提高逼格！
更多訊息
更多信iOS開發資訊 請以關注洲洲哥 的微信公眾號，不定期有乾貨推送：
這裡寫圖片描述