iOS和JS交互(含OC、html、js)代码

本文首发地址

最近研究研究OC和JS互动的WebViewJavascriptBridge的用法

网上似乎有好多的关于OC和js互动的例子，但是没有一个完成的。今天我就把我的OC代码和Html代码统统的放出来。在说说网上的例子都是一个样没有一点区别，其实你关注洲洲哥的就够了。
github地址：https://github.com/7General/WebViewJS

今天以WebViewJavascriptBridge的5.0.5也就是最新的版本来示范。

跟着我的代码一块来

1. 使用CocoaPods导入WebViewJavascriptBridge

这里我们使用最新版本

pod 'WebViewJavascriptBridge', '~> 5.0.5'

导入工程的shell命令这里我就不多说了。

2. 编写OC代码（先写oc代码还是Js代码都可）

1. 引入头文件#import "WebViewJavascriptBridge.h"
2. 创建两个属性

@property (nonatomic, strong) UIWebView * webView;

@property WebViewJavascriptBridge* bridge;

3. 初始化WebView和WebViewJavascriptBridge

  self.webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
  [self.view addSubview:self.webView];
  /**开启日志*/
  [WebViewJavascriptBridge enableLogging];
  /**初始化-WebViewJavascriptBridge*/
  self.bridge = [WebViewJavascriptBridge bridgeForWebView:self.webView];
  [self.bridge setWebViewDelegate:self];

3. JS调用OC代码

NOTICE:我们在写这里的调用代码之前，我们一定要知道前端js函数里一定要知道函数名称。这个很重要。
这里我们假设前端有个函数名称是callViewLoad他要调用OC的代码给返回来的数据最列表处理。

看看OC的代码如何处理Js发来的请求

[self.bridge registerHandler:@"callViewLoad" handler:^(id data, WVJBResponseCallback responseCallback) {
    NSLog(@"前端发送的数据 %@", data);
    if (responseCallback) {
    // respons给前端的数据
    responseCallback(@{@"UName": @"洲洲哥的技术博客",@"URLS":@"http://www.jianshu.com/users/1338683b18e0/latest_articles"});
    }
    }];

来说说这里的参数说明
handler的回调中有data、responseCallback两个参数

1. 这其中的data是前端js函数给后端传送的数据：比如在登陆的时候，就要把账户信息和用户密码传入后端，给后端处理。这里的data就是存放着两个数据的
2. responseCallback是我们要给前端js函数返回的数据内容，前端给我们传入了用户名和密码，我们调用接口之后返回登陆结果给前端就是要用他了。但是以字典形式返回。

到这里我们的JS调用OC，oc端的代码已经说完了。

前端JS代码的写法

1. html的代码写法

    
        
        
    
    
        JS/OC互动
    

我们这里主要看html代码中的callViewLoad函数。这个就是他调用oc函数证明。这里的callHandler的里的参数可以看看

1. 第一个参数callViewLoad :函数名
2. {'blogURL': 'http://www.henishuo.com'}:表示给OC代码传入的数据
3. function(responseCallback) : 接受成功返回的JS函数这里可以在后端成功返回之后在这里我们可以监听到。和OC的Block类似。

这个函数的说明：JS给ObjC提供公开的API，ObjC端通过注册，就可以在JS端调用此API时，得到回调。ObjC端可以在处理完成后，反馈给JS，这样写就是在载入页面完成时就先调用。

NOTICE:这里只说了JS调用OC代码的声明。间间单单的介绍了一个方法的使用。但是我们也看到了再写前端JS函数的时候，有那么一大坨代码是必须要写的。不然是不会产生联合效果的。

如有问题可添加我的QQ：1290925041
还可添加QQ群:234812704（洲洲哥学院）
欢迎各位一块学习，提高逼格！
也可以添加洲洲哥的微信公众号

更多消息

更多信iOS开发信息 请以关注洲洲哥 的微信公众号，不定期有干货推送：

这里写图片描述