iOS開發使用WebViewJavascriptBridge實現OC與JS交互

[iOS] 使用WebViewJavascriptBridge實現OC與JS交互
前言
當下,很多APP裏面都會有HTML5網頁,我們除了簡單的用WebView加載顯示外，很多情況下，我們還需要和WebView進行交互,比如點擊WebView上面的按鈕調用OC端的函數實現具體操作。

因此今天爲大家介紹一個優秀的開源小項目,就是我們今天的主角--WebViewJavascriptBridge。它主要幫助我們優雅的實現OC與JS的交互,非常方便簡潔。

當然,有很多優秀的開發者寫過WebViewJavascriptBridge的使用包括實現原理,首先表示感激和敬意。但是作爲一個初學者或者一個急於實現功能的人來說,大部分時候我們更希望一個直奔主題的文章。所以,本文的核心就是WebViewJavascriptBridge在實際開發中的使用。
使用步驟
去Github上下載WebJavaScriptBridge
解壓縮包,將WebViewJavascriptBridge文件夾拖到你的工程中

1.png
在需要使用WebViewJavascriptBridge的類文件中引入頭文件WebViewJavascriptBridge.h
加載UIWebView,遵守<UIWebViewDelegate>協議
具體使用
創建並初始化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調用OC

什麼是JS調用OC?

舉個例子來說就是在網頁中有一個登錄按鈕,點擊登錄按鈕後,具體的登錄功能是由OC端實現的,即登錄功能實現需要我們在工程裏有一個類似loginMethod的函數去具體操作。
工作流程

站在實際開發的角度來解釋,就是假如現在有一個網頁,在網頁中有個登錄按鈕需要通過JS調OC的方式實現。那麼我們首先需要跟負責網頁編碼的人員(一般是後臺)商定出一個方法名稱,也就是給這個登錄按鈕點擊事件取個名字,例如叫loginCallBack。然後我們需要在代碼裏註冊這個事件並負責它的具體實現。當用戶點擊這個登錄按鈕的時候,後臺就會通知給這個事件的註冊者去執行,有點像block的執行順序。
代碼實現

假如我們現在商定了一個事件名稱爲loginFunc,我們來看一下代碼實現。
      /***
      /@param registerHandler 要註冊的事件名稱(這裏我們爲loginFunc)
      /@param handel 回調block函數 當後臺觸發這個事件的時候會執行block裏面的代碼
     ***/
     [_bridge registerHandler:@"loginFunc" handler:^(id data, WVJBResponseCallback responseCallback) {
     // data 後臺傳過來的參數,例如用戶名、密碼等

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

     //具體的登錄事件的實現,這裏的login代表實現登錄功能的一個OC函數。
                [self login];   

     // responseCallback 給後臺的回覆    

        responseCallback(@"Response from testObjcCallback");
      }];
OC調用JS

什麼是OC調用JS

如果你理解了JS調用OC,那麼OC調用JS就應該差不多懂了。同樣舉個例子,我們的原生APP上有個輸入框,我們輸入完成後,讓它顯示在網頁上面的用戶名處。這樣,我們就是OC要實現的一個事件讓網頁去真正實現了,也就是OC調用JS。
JS調用OC

和JS調用OC的流程大致一樣,還是需要和網頁編寫人員商定出一個事件名,然後在網頁裏面先把註冊這樣一個事件並把實現體寫好,等到我們OC去觸發這個事件(比如點擊按鈕)就會去網頁裏面找到這個事件的實現體並執行。
代碼實現

假如我們現在商定了一個註冊事件,事件名稱爲registerFunc,我
們來代碼實現一下
     //不需要傳參數,不需要後臺返回執行結果
      [_bridge callHandler:@"registerFunc"];

    //需要傳參數,不需要從後臺返回執行結果
      /***
       @param callHandler 商定的事件名稱,用來調用網頁裏面相應的事件實現
       @param data id類型,相當於我們函數中的參數,向網頁傳遞函數執行需要的參數
     ***/

     [_bridge callHandler:@"registerFunc" data:@"name"];

    //需要傳參數,需要從後臺返回執行結果

     [_bridge callHandler:@"registerFunc" data:@"name" responseCallback:^(id responseData) {

        NSLog(@"後臺執行完成後返回的數據");

      }];
發送消息

概述

我們可以單純地向JS發送數據,比如我們可以在網頁加載完成後向網頁發送一條加載完成的消息,或者傳一個標題。
代碼實現

  //不需要後臺返回執行結果或數據
      [_bridge send:@"紅色"];

  //需要後臺返回執行結果或數據
        [_bridge send:@"紅色" responseCallback:^(id responseData) {

        NSLog(@"後臺執行完成後返回的數據 %@", responseData);

       }];
注意點
一定要注意和網頁端商定的方法名必須要保證OC代碼 裏和網頁編碼裏統一。在調用之前,必須要先註冊事件,寫好實現體。
總結
本文只是簡單地介紹了WebViewJavascriptBridge在實際開發中常用的幾個方法,還有一些方法沒有意義詳講,希望大家在掌握了這幾個方法的使用後也去研究一下里面的其他方法。另外,本文重點是讓ios工程師能快速使用,一些原理的東西還有JS方面的編碼都省略了,可能文中有些地方理解不當或者不夠深入,後期會再完善修改.最後,希望大家多提寶貴意見。

大家可去gitHub下載demo查看源碼。