JS与OC交互大总结之一-JS调用OC

前言###

最近公司项目进行比较激烈，没有时间写demo，但是时间就像是海绵里的水，挤挤总是会有的。在公司的项目中有用到JS与OC的交互，顺便就把这块的知识总结一下，希望对各位志同道合的朋友有帮助。要是各位有更好的方法可以一起交流交流。

demo截图：

Snip20160725_538.png
不想看原理的，喜欢简单直接的朋友可以直接下载代码，代码里面有详细的解释：LZBWebViewWithJSInteractive github下载链接

JS与OC交互的类别###

第一 ：JS调用OC的方法
1、采用传统的方法，加载WebView的时候截取URL的方式

2、利用苹果系统框架<JavaScriptCore/JavaScriptCore.h>的JSContext的block方式 或者JSExport协议方式

第二：OC调用JS的方法
1、采用stringByEvaluatingJavaScriptFromString写入JS代码，调用JS的方法

2、采用系统框架<JavaScriptCore/JavaScriptCore.h>的JSContext +evaluateScript调用JS代码

详细解说之JS调用OC方法####

第一种方法：截取URL的方法

在JS端可以这样写的：
比如点击跳转的时候加载一个URL（协议头可以与服务端自定义，参数包括在URL里面，我这里使用的zimu://（协议头）callName_（调用的OC方法名称）?（参数）http://www.jianshu.com/users/d21698127416/latest_articles

 <button type = "button" onclick = "locationFunction()" > 点击调用OC方法  </button>

    <script type = "text/javascript">
        function locationFunction()
        {
       //加载URL，协议头（zimu://）可以自定义
          window.location.href = "zimu://callName_?http://www.jianshu.com/users/d21698127416/latest_articles"
        }
    </script>

在OC端可以这样写：
在webView的代理中有这样的一个方法

 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType

这个方法可以控制是否加载URL

所以，通过这个方法我们可以获得加载的URL的字符串
，然后判断这个URL的协议头是否是我们自定义的协议，从而判断是加载这个URL还是响应方法

 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType

{
NSString *getURLString = [request.URL absoluteString];
NSLog(@"总的字符串：%@",getURLString);
NSString *htmlHeadString = @"zimu://";
//协议头可以自己定义
if([getURLString hasPrefix:htmlHeadString])
{
    NSString *subString = [getURLString substringFromIndex:htmlHeadString.length];
    NSArray *arrayStr = [subString componentsSeparatedByString:@"?"];
    NSString *fistStr = [arrayStr firstObject];
    NSString *methodName = [fistStr stringByReplacingOccurrencesOfString:@"_" withString:@":"];
  //调用方法
    SEL  selector = NSSelectorFromString(methodName);
#pragma clang diagnostic push
#pragma clang diagnostic ignored "-Warc-performSelector-leaks"
    //-Warc-performSelector-leaks为唯一的警告标识
   [self performSelector:selector withObject:[arrayStr lastObject]];
  #pragma clang diagnostic pop
    //注意：系统提供的方法最多只有两个参数，如果要多个参数，使用我的扩展类
   // - (id)performSelector:(SEL)aSelector withObjects:(NSArray *)objects
    return NO;
}
else
   return YES;
}

但是这样有一个问题是，系统提供给我们的performSelector方法传入参数是有限制的要是有多个参数就不好办了，怎么办呢？
我这里有一个方法可以参照（可以传入多个参数的调用哦）

要是传入的是多个参数可以参考我的扩展类：
使用performSelector方法调用多个参数

第二种方法：系统框架<JavaScriptCore/JavaScriptCore.h>的应用

利用苹果框架又有两种方式：
1、JSContext的block的方式（苹果框架）
2、JSExport协议方式 （苹果框架）
那么我就两种方式都介绍介绍，那么先说第一种方式JSContext的block的方式的过程：
① 通过webView加载网页

 [self.webView loadRequest:[NSURLRequest requestWithURL:localURL]];

② 拿到webView的JS执行环境

//拿到WebView执行JS的执行环境，很重要的东西

JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

③ 通过context 的block的方式调用方法
有参数的情况

 //点击传参数 jstoocHavePrams方法名称
context[@"jstoocHavePrams"] = ^(){
   //调用方法处理内容
    //获得参数数组
    NSArray *prams = [JSContext currentArguments];
    NSString *arraySting = [[NSString alloc]init];
    for (id obj in prams) {
        NSLog(@"====%@",obj);
        arraySting = [arraySting stringByAppendingFormat:@"%@,",obj];
    }
    dispatch_async(dispatch_get_main_queue(), ^{
        [LZBAlterView lzb_alterViewWithText:@"点击了传参数按钮" OneTitle:arraySting TwoTitle:@"知道了" ThreeTitle:nil handleBlock:^(LZBAlterView *alterView, NSInteger btntag) {
            [alterView removeAlterView];
        }];
    }); 
};

无参数的情况

 //点击了无参数，jstoocNoPrams是JS的方法名称

context[@"jstoocNoPrams"] = ^(){
    //调用方法处理内容
    NSLog(@"点击了没有传参数按钮");
    dispatch_async(dispatch_get_main_queue(), ^{
        [LZBAlterView lzb_alterViewWithText:@"点击了没有参数按钮" OneTitle:@"知道了" TwoTitle:nil ThreeTitle:nil handleBlock:^(LZBAlterView *alterView, NSInteger btntag) {
            [alterView removeAlterView];
        }];
    });  
};

2、JSExport协议方式（苹果框架）

首先：自定义协议，并且协议遵守<JSExport>协议
并且定义协议方法(就是JS调用的OC方法)

@protocol LZBJSExport <JSExport>

 - (void)callChangeColor；
 @end

然后，在加载WebView之后注册协议

- (void)regiseterResponser

   {
     JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
   //change类似于JS里面的标识（change字符是自定义的，只要和JS中得一样就可以）
     [context setObject:self forKeyedSubscript:@"change"];
   }

最后，实现协议方法，（你要通过JS调用OC做什么,比如改变背景颜色）

- (void)callChangeColor

{
   self.webView.backgroundColor = [self getRandColor];
 }

JS中的实现：

  //block方式 <button type = "button" onclick = "locationFunction()" > JS调OC第二法无参数 </button>  

  //block方式 <button type = "button" onclick = "locationFunction2()" > JS调OC第二法传参数 </button>  
  //JSExport协议的方式<button type = "button" onclick = "change.callChangeColor()" > 点击改变颜色</button>  
    <script type = "text/javascript">
        function locationFunction()
        {
            //调用OC的方法,没有参数
            jstoocNoPrams();
        }
        function locationFunction2()
        {
          //调用OC的第二个方法
          jstoocHavePrams('参数1','参数2','参数3');
        }
    </script>

能看到这里的朋友我觉得已经很有耐心，感觉要是接着写下一篇JS与OC交互大总结之二 OC调用JS会显得篇幅比较大，那么就在下一页才写OC调用JS的方法吧。但是这里也可以直接跳转哦
JS与OC交互大总结之二 OC调用JS

小结一下####

JS调用OC有三个方法：
第一个 ：截取URL，太繁琐。
第二个：block形式，我个人比较喜欢
第三个：自定义JSExport协议

如果有兴趣的朋友可以直接下载源码了解：
LZBWebViewWithJSInteractive github下载链接