前言

當下,很多APP裡面都會有HTML5網頁,我們除了簡單的用WebView載入顯示外，很多情況下，我們還需要和WebView進行互動,比如點選WebView上面的按鈕呼叫OC端的函式實現具體操作。

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

當然,有很多優秀的開發者寫過WebViewJavascriptBridge的使用包括實現原理,首先表示感激和敬意。但是作為一個初學者或者一個急於實現功能的人來說,大部分時候我們更希望一個直奔主題的文章。所以,本文的核心就是WebViewJavascriptBridge在實際開發中的使用。

使用步驟

• 去Github上下載WebJavaScriptBridge
• 解壓縮包,將WebViewJavascriptBridge
  資料夾拖到你的工程中

• 在需要使用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。

  • OC呼叫JS

    和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檢視原始碼。