WebView与原生交互JavaScriptCore

JavaScriptCore简介

JavaScriptCore是苹果Safari浏览器的JavaScript引擎，就跟Google的V8引擎一样用来解析js代码，苹果在iOS7引入了JavaScriptCore框架，使得Objective-C 和 JavaScript 代码直接的交互变得更加的简单方便。

简单使用

     //1.创建JS上下文（()
     JSContext *ctx = [[JSContext alloc] init];
     //定义js异常处理器
     ctx.exceptionHandler = ^(JSContext *context, JSValue *exception){
       NSLog(@"js异常:%@",exception);//当执行js出现异常时会在控制台上打印
     };
     //2.定义执行的js脚本
     NSString *script;
     //3.定义js变量
     JSValue *result;
     //js脚本
     script = @"1 + 2";
     result = [ctx evaluateScript:script];//执行js脚本
     NSLog(@"script.result = %lf",[result toDouble]);

以上就是JavaScriptCore框架最简单的使用，定义了一段js脚本然后执行，这里可以初步认识到JSContext，顾名思义就是JS上下文，你可以把它理解为js的执行环境，evaluateScript为执行js脚本的方法，JSValue就是js变量，JSValue与Native OC中的变量有相关的对应关系，如json对象对应着Dictonary，js数组对应着NSArray等，调用相对应的方法可转为对应的OC变量，如上调用了toDouble转为double类型。

定义函数

     JSContext *ctx = [[JSContext alloc] init];
     //js函数以block的形式在Native的呈现
     //在ctx中定义一个sum函数
     ctx[@"sum"] = ^(int a,int b){
       return a + b;
     };
     result = [ctx evaluateScript:@"sum(1,5)"];

以上是用OC代码来定义一个js函数，sum函数在JSContext的存在形式为"function sum(a,b){return a + b}"，可以很清晰的找到对应关系。

定义一个类对象，供js使用

     JSContext *ctx = [[JSContext alloc] init];
    //定义一个Point3D对象
     Point3D *point3D = [[Point3D alloc] initWithContext:ctx];
     ctx[@"point3D"] = point3D;//在JSContext中声明该对象，然后就可以在js中使用了
     point3D.x = 3;
     point3D.y = 4;
     point3D.z = 5;
     
     script = @"point3D.lenght()";
     result = [ctx evaluateScript:script];
     
     NSLog(@"script.result = %lf",[result toDouble]);

Point3D.h

#import 
#import 

@protocol Point3DExport 
//在此协议定义的东西都可以在JS中调用
@property (nonatomic, assign) double x;
@property (nonatomic, assign) double y;
@property (nonatomic, assign) double z;
- (double) length;
@end

@interface Point3D : NSObject{
    JSContext *context;
}
- (id)initWithContext:(JSContext *)ctx;

@end

Point3D.m

#import "Point3D.h"
@implementation Point3D

@synthesize x;
@synthesize y;
@synthesize z;

- (id)initWithContext:(JSContext *)ctx{
    if (self = [super init]) {
        context = ctx;
        //在JS上下文中声明该类
        context[@"Point3D"] = [Point3D class];
    }
    return self;
}

- (double) length{
    return (self.x * self.y * self.z);
}

以上就是通过JSExport 协议定义了一个Point3D对象供js中使用，JSExport 协议可以将OC对象暴露给JS使用，注意将要供js使用的参数和方法写在协议中，然后该类遵循协议，实现协议中的参数和方法。

实际运用

实际运用最多的应该就是WebView与原生的交互了，OC调用JS方法相对简单，这里只简述JS调用原生以及怎样获取返回值。获取WebView中的JSContext是我们的首要任务，我们可以通过KVC的方式在WebView的代理方法webViewDidFinishLoad中获得JSContext。

- (void)webViewDidFinishLoad:(UIWebView *)webView{
    //获取webView的JSContext，然后就可以为所欲为喇
    self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
}

场景假设：获取用户信息。

jsBridge.api(1, JSON.stringify({}),(function(res){
  //这里获取到用户信息res，json对象，做出相关处理
  }).toString());
}

以上是js调用获取原生App用户信息的方法，第一个参数为接口编号，这里将1定为获取用户信息，后续有其他接口可增加相应编号，第二个为传入参数，为json字符串，第三个为回调函数，用来接收返回值，并做出相应处理。这里转为string是为了兼容android，因为android无法直接解析函数。

原生端实现

JsBrige.h

#import 
#import 
@protocol JSBridgeExport
- (void)api;
@end

@interface JSBridge : NSObject{
    JSContext *context;
}
- (instancetype)initWithContext:(JSContext *)context;

@end

JsBrige.m

#import "JSBridge.h"
@implementation JSBridge
- (id)initWithContext:(JSContext *)ctx{
    if (self = [super init]) {
        context = ctx;
        //在JS上下文中声明该类
        context[@"JSBridge"] = [JSBridge class];
    }
    return self;
}

- (void)api{
    //动态参数数组
    NSArray *args = [JSContext currentArguments];
    if (args.count < 3) return;
    
    //获取接口编号
    JSValue *apiIdValue = args.firstObject;
    int apiId = apiIdValue.toInt32;
    
    //获取传入参数的json对象
    JSValue *paramsJSValue = args[1];
    NSDictionary *params = paramsJSValue.toString.mj_keyValues;
    
    //获取回调方法
    JSValue *backFunc = args.lastObject;
    NSString *backFuncStr = backFunc.toString;
    
    if (apiId == 1) {//根据apiID调用不同的接口，可定义一个枚举来接收该值，此处为了简便
        User *user = [UserTool getUser];//模拟用户信息
        //调用回调函数，返回用户信息
        //将返回参数拼接上去
        [NSString stringWithFormat:@"(%@)(JSON.stringify(%@))",backFuncStr,user.mj_JSONString];
        [context evaluateScript:script];//执行回调函数
    }
}

@end

在项目中，我采用了这种方式来实现JS与原生的通信，采用回调函数来接收返回值，是因为有时信息并非同步返回，而是通过异步方式来获取，使用回调函数就很好解决了这个问题，需要注意的是js匿名函数的执行方式为“(匿名函数体)(传入参数)”。