WebViewJavascriptBridge使用說明（iOS）

因爲如今不少產品都是有安卓版跟ios版，就意味着同同樣東西要出兩套，由兩組人去完成，不只增長了開發成本，也大大加重了維護成本。聰明的coder想出了跨平臺的思路，用html寫頁面，分別用webview（ios）/（安卓）來加載，對某些html沒法調用的硬件，經過雙方的交互來實現方法的互調和傳值。這個過程就是跨平臺。

下面來講一下WebViewJavascriptBridge在ios端怎麼樣使用。

首先確保一份已經配好功能的html文件。（html還在學習階段，暫時就不賣弄了。。。）

1.初始化一個webview（viewdidload）

OC代碼

UIWebView* webView = [[UIWebView alloc] initWithFrame:self.view.bounds];

[self.view addSubview:webView];

2.將此webview與WebViewJavascriptBridge關聯（viewdidload）

OC代碼

if (_bridge) { return; }

[WebViewJavascriptBridge enableLogging];

_bridge = [WebViewJavascriptBridge bridgeForWebView:webView 

                                                      webViewDelegate:self 

                                                      handler:^(id data, WVJBResponseCallback responseCallback) {

                                                              NSLog(@"ObjC received message from JS: %@", data);

                                                              responseCallback(@"Response for message from ObjC");

}];

ps：此時你的webview就與js搭上橋了。下面就是方法的互調和參數的互傳。

（1） js調oc方法（能夠經過data給oc方法傳值，使用responseCallback將值再返回給js）

OC代碼

[_bridge registerHandler:@"testObjcCallback"

              handler:^(id data, WVJBResponseCallback responseCallback) {

                          NSLog(@"testObjcCallback called: %@", data);

                          responseCallback(@"Response from testObjcCallback");

}];

這裏注意testObjcCallback這個方法的標示。html那邊的命名要跟ios這邊相同，才能調到這個方法。固然這個名字能夠兩邊商量着自定義。簡單明確便可。

（2）oc調js方法（經過data能夠傳值，經過response能夠接受js那邊的返回值）

OC代碼

id data = @{ @"greetingFromObjC": @"Hi there, JS!"};

[_bridge callHandler:@"testJavascriptHandler"

              data:data 

              responseCallback:^(id response) {

                        NSLog(@"testJavascriptHandler responded: %@", response);

}];

注意這裏的testJavascriptHandler也是個方法標示。

（3）oc給js傳值（經過response接受返回值）

OC代碼

[_bridge send:@"A string sent from ObjC to JS"

              responseCallback:^(id response) {

                        NSLog(@"sendMessage got response: %@", response);

}];

（4）oc給js傳值（無返回值）

OC代碼

[_bridge send:@"A string sent from ObjC after Webview has loaded."];

暫時總結了這麼些。下面有demo你們能夠本身看看。有什麼不懂的歡迎留言。

文／Stevin_Y（簡書做者） 原文連接：http://www.jianshu.com/p/b723e2be37c7 著做權歸做者全部，轉載請聯繫做者得到受權，並標註「簡書做者」。