OC与JS数据交互

• iOS7之后有了JavaScriptCore框架使得OC与JS的交互变得简单了起来.
• 在学习webView的时候，发现OC与JS做交互时用的是截取webView的响应来获得想要的数据(不得不佩服，办法很高端)。感觉这种办法太蛋疼了，于是抱着试一试的心态到官方文档搜索JavaScript关键字，于是出来了下面一段

QQ20160518-0.png

• 看到了这句话很是兴奋啊！于是又往下继续找

QQ20160518-1.png

• 竟然还有例子耶，来试试吧！

  • 结果可想而知，并没有什么卵用webView根本没有windowScriptObject方法
  • 回头一看还有一句 any WebKit-based OS X application原来是OS X才能用

• 然后继续上网找资料啊

  • 找到了这样一个博客
    http://blog.csdn.net/lwjok2007/article/details/47058101/
    讲了在OC执行JS
    http://blog.csdn.net/lwjok2007/article/details/47058795
    讲了在JS调用OC方法
    里面写了怎样使用JavaScriptCore框架让OC和JS的交互，我就不搬运了。里面的关于导入框架，介绍JavaScriptCore的使用等等一些东西写的都比较清楚了。
    然后我把里面的东西拿出来验证了一下，也把JSExport用法写的更详细了一点，block的方式没有使用。上面的文章里面没有讲到 JSExportAs宏，所以JS函数名称比较恶心

• JS与OC的数据类型对应如下有描述

QQ20160518-2.png

• 要说的都在注释里了，OC代码如下(HTML在最下面):

#import "ViewController.h"
#import 

//自己定义一个协议遵守JSExport协议，然后想要导出这些方法的类再遵守这个协议就可以了
@protocol ObjcExportMethod 

//JSExportAs宏将 "- showNumber1:andNumber2:"方法名 转换为showNumber(param1, param2)
//如果不使用JSExportAs转换，那么在js中调用的函数名为showNumber1AndNumber2(param1, param2);
//注意：JSExportAs宏只适合转换有参的方法，不能转换无参的方法
JSExportAs(showNumber,
- (void)showNumber1:(NSNumber *)n1 andNumber2:(NSNumber *)n2
);

JSExportAs(returnSum,
- (NSNumber *)returnSumWithNum1:(NSNumber *)n1 andNum2:(NSNumber *)n2
);

JSExportAs(dictTest,
- (void)dictTest:(NSDictionary *)dict
);

JSExportAs(arrayTest,
- (void)arrayTest:(NSArray *)array
);

- (void)show;
- (NSString *)returnString;
- (NSDictionary *)returnDict;
- (NSArray *)returnArray;
@end

/**
  * UIViewController
  */
@interface ViewController () 
@property (weak, nonatomic) IBOutlet UIWebView *webView;
@end


@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //加载本地测试网页
    [self.webView loadRequest:[NSURLRequest requestWithURL:[[NSBundle mainBundle] URLForResource:@"index" withExtension:@"html"]]];

}

#pragma mark - 

/**
 *  无参导出方法
 */
- (void)show
{
    NSLog(@"%s", __func__);
}
/**
 *  返回一个OC字符串到JavaScript
 */
- (NSString *)returnString
{
    return @"从OC返回成功";
}
/**
 *  返回一个OC数组到JavaScript
 */
- (NSArray *)returnArray
{
    return @[@(1), @"hello"];
}
/**
 *  返回一个OC字典到JavaScript
 */
- (NSDictionary *)returnDict
{
    return @{
             @"name" : @"jack",
             @"date" : @[@(1), @"hello"]
             };
}
/**
 *  从JavaScript接收两个NSNumber参数，计算他们的和并返回计算结果到JS
 */
- (NSNumber *)returnSumWithNum1:(NSNumber *)n1 andNum2:(NSNumber *)n2
{
    return @(n1.intValue + n2.intValue);
}
/**
 *  从JavaScript接收两个NSNumber类型的值，打印出来
 */
- (void)showNumber1:(NSNumber *)n1 andNumber2:(NSNumber *)n2
{
    NSLog(@"number1 = %@, number2 = %@", n1, n2);
}
/**
 *  从JavaScript接收一个字典
 */
- (void)dictTest:(NSDictionary *)dict
{
    NSLog(@"%@",dict);
}
/**
 *  从JavaScript接收一个数组
 */
- (void)arrayTest:(NSArray *)array
{
    NSLog(@"%@", array);
}


#pragma mark - 

/**
 *  完成加载
 */
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    //得到当前页面的JSContext，如果不在这里获得当前网页的context可能有问题
    JSContext *js = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    //设置 js 代码中的method对象为控制器
    js[@"method"] = self;
    
    //在OC中执行js并取得js返回的数据
    //方式1 使用JSContext的对象方法执行JS脚本
    NSString *jsScript = @"document.title";     //获取网页标题
    //evaluateScript方法返回的是JSValue类型的对象，需要将类型转换为OC对象
    NSString *title = [js evaluateScript:jsScript].toString;
    self.navigationItem.title = title;
    NSLog(@"evaluateScript --->  %@",title);

    //方式2 使用webView的对象方法执行js，该方法返回的数据类型始终是NSString，不管JS实际传递过来的是什么类型，
    //如JS传递过来的是10 那么该方法的返回值任然是字符串
    title = [webView stringByEvaluatingJavaScriptFromString:jsScript];
    NSLog(@"stringByEvaluating ---> %@", title);
}

@end

• 测试用HTML代码如下:

    
    
    
    
    
    

    
        
调用OC无参无返回值方法
        
从OC返回字符串
        
传递2个整数到OC
        
传递2个整数到OC，得到他们的和
        
传递数组到OC
        
传递字典到OC
        
从OC返回字典
        
从OC返回数组