前言###

當(dāng)下,很多APP里面都會(huì)有HTML5網(wǎng)頁(yè),我們除了簡(jiǎn)單的用WebView加載顯示外，很多情況下，我們還需要和WebView進(jìn)行交互,比如點(diǎn)擊WebView上面的按鈕調(diào)用OC端的函數(shù)實(shí)現(xiàn)具體操作。

因此今天為大家介紹一個(gè)優(yōu)秀的開源小項(xiàng)目,就是我們今天的主角--WebViewJavascriptBridge。它主要幫助我們優(yōu)雅的實(shí)現(xiàn)OC與JS的交互,非常方便簡(jiǎn)潔。

當(dāng)然,有很多優(yōu)秀的開發(fā)者寫過(guò)WebViewJavascriptBridge的使用包括實(shí)現(xiàn)原理,首先表示感激和敬意。但是作為一個(gè)初學(xué)者或者一個(gè)急于實(shí)現(xiàn)功能的人來(lái)說(shuō),大部分時(shí)候我們更希望一個(gè)直奔主題的文章。所以,本文的核心就是WebViewJavascriptBridge在實(shí)際開發(fā)中的使用。

使用步驟####

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

1.png

• 在需要使用WebViewJavascriptBridge的類文件中引入頭文件WebViewJavascriptBridge.h
• 加載UIWebView,遵守<UIWebViewDelegate>協(xié)議

具體使用####

• 創(chuàng)建并初始化WebJavaScriptBridge實(shí)例

     #import "ExampleUIWebViewController.h"
   #import "WebViewJavascriptBridge.h"
  
   @interface ExampleUIWebViewController ()
       //聲明`WebViewJavascriptBridge`對(duì)象為屬性
     @property WebViewJavascriptBridge* bridge;
  
    @end
  
        - (void)viewWillAppear:(BOOL)animated {
  
         //用UIWebView加載web
          UIWebView* webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
    
       //設(shè)置能夠進(jìn)行橋接 
          [WebViewJavascriptBridge enableLogging];
       // 初始化*WebViewJavascriptBridge*實(shí)例,設(shè)置代理,進(jìn)行橋接
         _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?

    舉個(gè)例子來(lái)說(shuō)就是在網(wǎng)頁(yè)中有一個(gè)登錄按鈕,點(diǎn)擊登錄按鈕后,具體的登錄功能是由OC端實(shí)現(xiàn)的,即登錄功能實(shí)現(xiàn)需要我們?cè)诠こ汤镉幸粋€(gè)類似loginMethod的函數(shù)去具體操作。

  • 工作流程

    站在實(shí)際開發(fā)的角度來(lái)解釋,就是假如現(xiàn)在有一個(gè)網(wǎng)頁(yè),在網(wǎng)頁(yè)中有個(gè)登錄按鈕需要通過(guò)JS調(diào)OC的方式實(shí)現(xiàn)。那么我們首先需要跟負(fù)責(zé)網(wǎng)頁(yè)編碼的人員(一般是后臺(tái))商定出一個(gè)方法名稱,也就是給這個(gè)登錄按鈕點(diǎn)擊事件取個(gè)名字,例如叫l(wèi)oginCallBack。然后我們需要在代碼里注冊(cè)這個(gè)事件并負(fù)責(zé)它的具體實(shí)現(xiàn)。當(dāng)用戶點(diǎn)擊這個(gè)登錄按鈕的時(shí)候,后臺(tái)就會(huì)通知給這個(gè)事件的注冊(cè)者去執(zhí)行,有點(diǎn)像block的執(zhí)行順序。

  • 代碼實(shí)現(xiàn)

    假如我們現(xiàn)在商定了一個(gè)事件名稱為loginFunc,我們來(lái)看一下代碼實(shí)現(xiàn)。

        /***
        /@param registerHandler 要注冊(cè)的事件名稱(這里我們?yōu)閘oginFunc)
        /@param handel 回調(diào)block函數(shù) 當(dāng)后臺(tái)觸發(fā)這個(gè)事件的時(shí)候會(huì)執(zhí)行block里面的代碼
        ***/
        [_bridge registerHandler:@"loginFunc" handler:^(id data, WVJBResponseCallback responseCallback) {
         // data 后臺(tái)傳過(guò)來(lái)的參數(shù),例如用戶名、密碼等
    
       NSLog(@"testObjcCallback called: %@", data);
       
         //具體的登錄事件的實(shí)現(xiàn),這里的login代表實(shí)現(xiàn)登錄功能的一個(gè)OC函數(shù)。
                    [self login];   
       
         // responseCallback 給后臺(tái)的回復(fù) 
    
            responseCallback(@"Response from testObjcCallback");
          }];
    

• OC調(diào)用JS

  • 什么是OC調(diào)用JS

    如果你理解了JS調(diào)用OC,那么OC調(diào)用JS就應(yīng)該差不多懂了。同樣舉個(gè)例子,我們的原生APP上有個(gè)輸入框,我們輸入完成后,讓它顯示在網(wǎng)頁(yè)上面的用戶名處。這樣,我們就是OC要實(shí)現(xiàn)的一個(gè)事件讓網(wǎng)頁(yè)去真正實(shí)現(xiàn)了,也就是OC調(diào)用JS。

  • OC調(diào)用JS

  和JS調(diào)用OC的流程大致一樣,還是需要和網(wǎng)頁(yè)編寫人員商定出一個(gè)事件名,然后在網(wǎng)頁(yè)里面先把注冊(cè)這樣一個(gè)事件并把實(shí)現(xiàn)體寫好,等到我們OC去觸發(fā)這個(gè)事件(比如點(diǎn)擊按鈕)就會(huì)去網(wǎng)頁(yè)里面找到這個(gè)事件的實(shí)現(xiàn)體并執(zhí)行。

  • 代碼實(shí)現(xiàn)

    假如我們現(xiàn)在商定了一個(gè)注冊(cè)事件,事件名稱為registerFunc,我
    們來(lái)代碼實(shí)現(xiàn)一下

         //不需要傳參數(shù),不需要后臺(tái)返回執(zhí)行結(jié)果
          [_bridge callHandler:@"registerFunc"];
    
        //需要傳參數(shù),不需要從后臺(tái)返回執(zhí)行結(jié)果
          /***
           @param callHandler 商定的事件名稱,用來(lái)調(diào)用網(wǎng)頁(yè)里面相應(yīng)的事件實(shí)現(xiàn)
           @param data id類型,相當(dāng)于我們函數(shù)中的參數(shù),向網(wǎng)頁(yè)傳遞函數(shù)執(zhí)行需要的參數(shù)
         ***/
    
         [_bridge callHandler:@"registerFunc" data:@"name"];
    
        //需要傳參數(shù),需要從后臺(tái)返回執(zhí)行結(jié)果
    
         [_bridge callHandler:@"registerFunc" data:@"name" responseCallback:^(id responseData) {
    
            NSLog(@"后臺(tái)執(zhí)行完成后返回的數(shù)據(jù)");
              
          }];
    

• 發(fā)送消息

  • 概述

    我們可以單純地向JS發(fā)送數(shù)據(jù),比如我們可以在網(wǎng)頁(yè)加載完成后向網(wǎng)頁(yè)發(fā)送一條加載完成的消息,或者傳一個(gè)標(biāo)題。

  • 代碼實(shí)現(xiàn)

    //不需要后臺(tái)返回執(zhí)行結(jié)果或數(shù)據(jù)
        [_bridge send:@"紅色"];
    
    //需要后臺(tái)返回執(zhí)行結(jié)果或數(shù)據(jù)
            [_bridge send:@"紅色" responseCallback:^(id responseData) {
    
            NSLog(@"后臺(tái)執(zhí)行完成后返回的數(shù)據(jù) %@", responseData);
       
           }];
    

注意點(diǎn)

一定要注意和網(wǎng)頁(yè)端商定的方法名必須要保證OC代碼 里和網(wǎng)頁(yè)編碼里統(tǒng)一。在調(diào)用之前,必須要先注冊(cè)事件,寫好實(shí)現(xiàn)體。

總結(jié)####

本文只是簡(jiǎn)單地介紹了WebViewJavascriptBridge在實(shí)際開發(fā)中常用的幾個(gè)方法,還有一些方法沒有意義詳講,希望大家在掌握了這幾個(gè)方法的使用后也去研究一下里面的其他方法。另外,本文重點(diǎn)是讓ios工程師能快速使用,一些原理的東西還有JS方面的編碼都省略了,可能文中有些地方理解不當(dāng)或者不夠深入,后期會(huì)再完善修改.最后,希望大家多提寶貴意見。

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