當下,很多APP里面都會有HTML5網(wǎng)頁,我們除了簡單的用WebView加載顯示外瞻鹏，很多情況下，我們還需要和WebView進行交互,比如點擊WebView上面的按鈕調(diào)用OC端的函數(shù)實現(xiàn)具體操作。
因此今天為大家介紹一個優(yōu)秀的開源小項目,就是我們今天的主角--WebViewJavascriptBridge吆倦。它主要幫助我們優(yōu)雅的實現(xiàn)OC與JS的交互,非常方便簡潔。
當然,有很多優(yōu)秀的開發(fā)者寫過WebViewJavascriptBridge的使用包括實現(xiàn)原理,首先表示感激和敬意。但是作為一個初學者或者一個急于實現(xiàn)功能的人來說,大部分時候我們更希望一個直奔主題的文章死宣。所以,本文的核心就是WebViewJavascriptBridge在實際開發(fā)中的使用。
使用步驟
去Github上下載WebJavaScriptBridge
解壓縮包,將WebViewJavascriptBridge文件夾拖到你的工程中
962036-d0cc63546084da33.jpeg
在需要使用WebViewJavascriptBridge的類文件中引入頭文件WebViewJavascriptBridge.h
加載UIWebView,遵守<UIWebViewDelegate>協(xié)議
具體使用
創(chuàng)建并初始化WebJavaScriptBridge實例
import "ExampleUIWebViewController.h"
import "WebViewJavascriptBridge.h"
@interface ExampleUIWebViewController ()
//聲明WebViewJavascriptBridge對象為屬性
@property WebViewJavascriptBridge* bridge;
@end
- (void)viewWillAppear:(BOOL)animated {
//用UIWebView加載web
UIWebView* webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
//設置能夠進行橋接
[WebViewJavascriptBridge enableLogging];
// 初始化*WebViewJavascriptBridge*實例,設置代理,進行橋接
_bridge = [WebViewJavascriptBridge bridgeForWebView:webView webViewDelegate:self handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"ObjC received message from JS: %@", data);
responseCallback(@"Response for message from ObjC");
}];
}
JS調(diào)用OC
什么是JS調(diào)用OC?
舉個例子來說就是在網(wǎng)頁中有一個登錄按鈕,點擊登錄按鈕后,具體的登錄功能是由OC端實現(xiàn)的,即登錄功能實現(xiàn)需要我們在工程里有一個類似loginMethod的函數(shù)去具體操作碴开。
工作流程
站在實際開發(fā)的角度來解釋,就是假如現(xiàn)在有一個網(wǎng)頁,在網(wǎng)頁中有個登錄按鈕需要通過JS調(diào)OC的方式實現(xiàn)毅该。那么我們首先需要跟負責網(wǎng)頁編碼的人員(一般是后臺)商定出一個方法名稱,也就是給這個登錄按鈕點擊事件取個名字,例如叫l(wèi)oginCallBack。然后我們需要在代碼里注冊這個事件并負責它的具體實現(xiàn)潦牛。當用戶點擊這個登錄按鈕的時候,后臺就會通知給這個事件的注冊者去執(zhí)行,有點像block的執(zhí)行順序眶掌。
代碼實現(xiàn)
假如我們現(xiàn)在商定了一個事件名稱為loginFunc,我們來看一下代碼實現(xiàn)。
/***
/@param registerHandler 要注冊的事件名稱(這里我們?yōu)閘oginFunc)
/@param handel 回調(diào)block函數(shù) 當后臺觸發(fā)這個事件的時候會執(zhí)行block里面的代碼
***/
[_bridge registerHandler:@"loginFunc" handler:^(id data, WVJBResponseCallback responseCallback) {
// data 后臺傳過來的參數(shù),例如用戶名巴碗、密碼等
NSLog(@"testObjcCallback called: %@", data);
//具體的登錄事件的實現(xiàn),這里的login代表實現(xiàn)登錄功能的一個OC函數(shù)朴爬。
[self login];
// responseCallback 給后臺的回復
responseCallback(@"Response from testObjcCallback");
}];
OC調(diào)用JS
什么是OC調(diào)用JS
如果你理解了JS調(diào)用OC,那么OC調(diào)用JS就應該差不多懂了。同樣舉個例子,我們的原生APP上有個輸入框,我們輸入完成后,讓它顯示在網(wǎng)頁上面的用戶名處橡淆。這樣,我們就是OC要實現(xiàn)的一個事件讓網(wǎng)頁去真正實現(xiàn)了,也就是OC調(diào)用JS召噩。
和JS調(diào)用OC的流程大致一樣,還是需要和網(wǎng)頁編寫人員商定出一個事件名,然后在網(wǎng)頁里面先把注冊這樣一個事件并把實現(xiàn)體寫好,等到我們OC去觸發(fā)這個事件(比如點擊按鈕)就會去網(wǎng)頁里面找到這個事件的實現(xiàn)體并執(zhí)行。
代碼實現(xiàn)
假如我們現(xiàn)在商定了一個注冊事件,事件名稱為registerFunc,我們來代碼實現(xiàn)一下
//不需要傳參數(shù),不需要后臺返回執(zhí)行結(jié)果
[_bridge callHandler:@"registerFunc"];
//需要傳參數(shù),不需要從后臺返回執(zhí)行結(jié)果
/***
@param callHandler 商定的事件名稱,用來調(diào)用網(wǎng)頁里面相應的事件實現(xiàn)
@param data id類型,相當于我們函數(shù)中的參數(shù),向網(wǎng)頁傳遞函數(shù)執(zhí)行需要的參數(shù)
***/
[_bridge callHandler:@"registerFunc" data:@"name"];
//需要傳參數(shù),需要從后臺返回執(zhí)行結(jié)果
[_bridge callHandler:@"registerFunc" data:@"name" responseCallback:^(id responseData) {
NSLog(@"后臺執(zhí)行完成后返回的數(shù)據(jù)");
}];
發(fā)送消息
我們可以單純地向JS發(fā)送數(shù)據(jù),比如我們可以在網(wǎng)頁加載完成后向網(wǎng)頁發(fā)送一條加載完成的消息,或者傳一個標題逸爵。
代碼實現(xiàn)
//不需要后臺返回執(zhí)行結(jié)果或數(shù)據(jù)
[_bridge send:@"紅色"];
//需要后臺返回執(zhí)行結(jié)果或數(shù)據(jù)
[_bridge send:@"紅色" responseCallback:^(id responseData) {
NSLog(@"后臺執(zhí)行完成后返回的數(shù)據(jù) %@", responseData);
}];
注意點
一定要注意和網(wǎng)頁端商定的方法名必須要保證OC代碼 里和網(wǎng)頁編碼里統(tǒng)一具滴。在調(diào)用之前,必須要先注冊事件,寫好實現(xiàn)體。
