[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。

  • 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查看源碼。

 

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