[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 著做权归做者全部，转载请联系做者得到受权，并标注“简书做者”。