WebViewJavascriptBridge使用分析

WebViewJavascriptBridge为JS与HTML交互的第三方，本质上，它也是通过webview的代理拦截scheme，然后注入相应的JS。我们今天来了解它的基本使用流程。
我们需要创建本地html文件，html内部填写交互的方法。总的来说就是Data+模板生成html：通过处理接收到的JSON数据+本地的html模板，生成可以显示内容的html串，然后用webView加载即可。

一、开启日志

// 1、开启日志，方便调试
[WebViewJavascriptBridge enableLogging];

二、OC和JS建立桥梁

// 2、给webview建立JS与OjbC的沟通桥梁  
self.bridge = [WebViewJavascriptBridge bridgeForWebView:webView];  
   
// 设置代理，如果不需要实现，可以不设置  
[self.bridgesetWebViewDelegate:self];  

三、注册HandleName，用于给JS端调用iOS端

/*
     3、JS主动调用OC的方法  JS会调动testObjcCallback方法，这是OC注册给JS调用的。JS需要回调，当然JS也可以传参数过来。data就是JS所传的参数，不一定需要传。（OC端和H5约定好的方法）
        OC端通过responseCallback回调JS端，JS就可以得到所需要的数据。
     *  有Javascript环境注入的提供给OC调用的方法registerHandler，javascript调用OC环境方法的callHandler。
     */
  [_bridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) {
    NSLog(@"testObjcCallback called: %@", data);
      //4、反馈给JS
    responseCallback(@"Response from testObjcCallback");
  }];
}

四、html中的交互方法

重点：HTML中的事件方法要和OC开发者约定好才能监控到点击事件。

  
    
    
mainnews
  

五、使用获取的信息和html进行拼接，然后加载网页

这里有一点需要特别注意：

• (void)loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL;
  这个方法需要将httml文件读取为字符串，其中baseURL是我们自己设置的一个路径，用于寻找html文件中引用的图片等素材。

 NSString* htmlPath = [[NSBundle mainBundle] pathForResource:@"webViewHtml" ofType:@"html"];
      NSMutableString* appHtml = [NSMutableString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];
      
      NSRange range = [appHtml rangeOfString:@"
mainnews
"];
#warning 使用JS的内容和HTML拼接。然后再加载数据。
      [appHtml replaceOccurrencesOfString:@"
mainnews
" withString:str5 options:NSCaseInsensitiveSearch range:range];
      NSURL *baseURL = [NSURL fileURLWithPath:htmlPath];        
      
        //这个方法用于直接加载html代码。如果html没有存在文件中，推荐使用这种方法。当然你也可以用这个方法从本地html读取代码，然后加载。但此时请注意baseURL要传对，否则html中引用的资源是找不到的。       
      [_webView loadHTMLString:appHtml baseURL:baseURL];

内容拼接appHtml如下图所示：

appHtml.png

显示内容如下：

轻松一刻.png

参考资料：
徐坤：http://386502324.blog.163.com/blog/static/11346937720154293438399/
黄仪标：http://blog.csdn.net/gezhenrong/article/details/60134343