iOS JavaScriptCore使用

JavaScriptCore是apple推出的为了解决ios与js交互的框架,功能强大而实用。

JavaScriptCore中主要的类

1、JSContext --- 在OC中创建JavaScript运行的上下文环境

 - (instancetype)init; // 创建JSContext对象,获得JavaScript运行的上下文环境

 // 在特定的对象空间上创建JSContext对象,获得JavaScript运行的上下文环境
 - (instancetype)initWithVirtualMachine:(JSVirtualMachine *)virtualMachine;

 // 运行一段js代码,输出结果为JSValue类型
 - (JSValue *)evaluateScript:(NSString *)script;

 // iOS 8.0以后可以调用此方法
 - (JSValue *)evaluateScript:(NSString *)script withSourceURL:(NSURL *)sourceURL NS_AVAILABLE(10_10, 8_0);

 // 获取当前正在运行的JavaScript上下文环境
 + (JSContext *)currentContext;

 // 返回结果当前执行的js函数 function () { [native code] } ,iOS 8.0以后可以调用此方法
  + (JSValue *)currentCallee NS_AVAILABLE(10_10, 8_0);

  // 返回结果当前方法的调用者[object Window]
  + (JSValue *)currentThis;

  // 返回结果为当前被调用方法的参数
  + (NSArray *)currentArguments;

  // js的全局变量 [object Window]
  @property (readonly, strong) JSValue *globalObject;

2、JSValue --- JavaScript中的变量和方法,可以转成OC数据类型,每个JSValue都和JSContext相关联并且强引用context

   oc与js类型对照:
      @textblock
     Objective-C type  |   JavaScript type
   --------------------+---------------------
           nil         |     undefined
          NSNull       |        null
         NSString      |       string
         NSNumber      |   number, boolean
       NSDictionary    |   Object object
         NSArray       |    Array object
          NSDate       |     Date object
         NSBlock (1)   |   Function object (1)
            id (2)     |   Wrapper object (2)
          Class (3)    | Constructor object (3)
      @/textblock

  //此方法会转换self为JS对象,但是self中必须实现指定的方法和协议
  + (JSValue *)valueWithObject:(id)value inContext:(JSContext *)context;

  // 在context创建BOOL的JS变量
  + (JSValue *)valueWithBool:(BOOL)value inContext:(JSContext *)context;

  // 将JS变量转换成OC中的BOOL类型
  - (BOOL)toBool;

  // 修改JS对象的属性的值
  - (void)setValue:(id)value forProperty:(NSString *)property;

  // JS中是否有这个对象
  @property (readonly) BOOL isUndefined;

  // 比较两个JS对象是否相等
  - (BOOL)isEqualToObject:(id)value;

  // 调用者JSValue为JS中的方法,arguments为参数,执行调用者JSValue,并传递参数arguments,@[@"a",@"b"@"c"]
  - (JSValue *)callWithArguments:(NSArray *)arguments;

 // 调用者JSValue为JS中的全局对象名称,method为全局对象的方法名称,arguments为参数
  - (JSValue *)invokeMethod:(NSString *)method withArguments:(NSArray *)arguments;

 // JS中的结构体类型转换为OC
  + (JSValue *)valueWithPoint:(CGPoint)point inContext:(JSContext *)context;
JSExport --- JS调用OC中的方法和属性写在继承自JSExport的协议当中,OC对象实现自定义的协议
 // textFunction -- JS方法
 // - (void) ocTestFunction:(NSNumber *)value sec:(NSNumber *)number -- OC方法
 JSExportAs (textFunction,- (void) ocTestFunction:(NSNumber *)value sec:(NSNumber *)number);
JSManagedValue --- JS和OC对象的内存管理辅助对象,主要用来保存JSValue对象,解决OC对象中存储js的值,导致的循环引用问题

 JSManagedValue *_jsManagedValue = [JSManagedValue managedValueWithValue:jsValue];
[_context.virtualMachine addManagedReference:_jsManagedValue];
JSManagedValue本身只弱引用js值,需要调用JSVirtualMachine的addManagedReference:withOwner:把它添加到JSVirtualMachine中,这样如果JavaScript能够找到该JSValue的Objective-C owner,该JSValue的引用就不会被释放。
JSVirtualMachine --- JS运行的虚拟机,有独立的堆空间和垃圾回收机制,运行在不同虚拟机环境的JSContext可以通过此类通信。

下面记录一下使用方法:

一、简单的情况,JS中,点击事件直接调用方法方式

1.1 JS代码如下:



    
    


    
    


1.2 oc代码如下:

- (void)doSomeJsThings{
    
    self.jsContext = [_webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exception) {
        NSLog(@"出现异常,异常信息:%@",exception);
    };
    
    //oc调用js
    JSValue * nativeCallJS = self.jsContext[@"nativeCallJS"];
    [nativeCallJS callWithArguments:@[@"hello word"]];//调用了js中方法"nativeCallJS",并且传参数@"hello word"
    
    //在本地生成js方法,供js调用
    self.jsContext[@"jsCallNative"] = ^(NSString *paramer){
        JSValue *currentThis = [JSContext currentThis];
        JSValue *currentCallee = [JSContext currentCallee];
        NSArray *currentParamers = [JSContext currentArguments];
        dispatch_async(dispatch_get_main_queue(), ^{
            /**
             *  js调起OC代码,代码在子线程,更新OC中的UI,需要回到主线程
             */
            NSLog(@"js传过来:%@",paramer);
        });
        NSLog(@"JS paramer is %@",paramer);
        NSLog(@"currentThis is %@",[currentThis toString]);
        NSLog(@"currentCallee is %@",[currentCallee toString]);
        NSLog(@"currentParamers is %@",currentParamers);
    };//生成native的js方法,方法名:@"jsCallNative",js可直接调用此方法
}
2017-11-15 13:30:37.715810+0800 WebView+image[2940:337555] js传过来:jsParameter
2017-11-15 13:30:37.715759+0800 WebView+image[2940:337892] JS paramer is jsParameter
2017-11-15 13:30:37.716007+0800 WebView+image[2940:337892] currentThis is [object Window]
2017-11-15 13:30:37.716337+0800 WebView+image[2940:337892] currentCallee is function () {
    [native code]
}
2017-11-15 13:30:37.716743+0800 WebView+image[2940:337892] currentParamers is (
    jsParameter
)

以上就是简单的调用。

二、复杂调用,JS中,点击事件等事件通过调用全局对象的方法调用方法,JS和Native代码的互调如下:

2.1 JS代码如下:



    
    


    
    
    
    


2.2 oc代码如下:

//声明的协议,当前viewController必须遵守
@protocol JSObjcDelegate 

- (void)jsCallNative;
- (void)shareString:(NSString *)shareString;

@end

//方法实现,在webViewDidFinishLoad中调用
- (void)doSomeJsThings{
    
    self.jsContext = [_webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exception) {
        NSLog(@"出现异常,异常信息:%@",exception);
    };
    
    //oc调用js
    JSValue * jsObj = self.jsContext[@"globalObject"];//拿到js中要调用方法的全局对象
    //jsObj执行其方法nativeCallJS
    JSValue * returnValue = [jsObj invokeMethod:@"nativeCallJS" withArguments:@[@"hello word"]];
   //调用了js中方法"nativeCallJS",并且传参数@"hello word",这里returnValue是调用之后的返回值,可能为nil
    NSLog(@"returnValue:%@",returnValue);
    
    //写法1
    JSValue * jsCallNative = [JSValue valueWithObject:self inContext:self.jsContext];//此方法会转换self为JS对象,但是self中必须实现指定的方法和协议
    self.jsContext[@"NativeObject"] = jsCallNative;
    //写法2
    //self.jsContext[@"NativeObject"] = self;
    //注:写法1和写法2效果相同,推荐写法1,毕竟系统方法
}

- (void)jsCallNative{//在本地生成js方法,供js调用
    
    JSValue *currentThis = [JSContext currentThis];
    JSValue *currentCallee = [JSContext currentCallee];
    NSArray *currentParamers = [JSContext currentArguments];
    dispatch_async(dispatch_get_main_queue(), ^{
        /**
         *  js调起OC代码,代码在子线程,更新OC中的UI,需要回到主线程
         */
    });
    NSLog(@"currentThis is %@",[currentThis toString]);
    NSLog(@"currentCallee is %@",[currentCallee toString]);
    NSLog(@"currentParamers is %@",currentParamers);
    
}


- (void)shareString:(NSString *)shareString{//在本地生成js方法,供js调用
    
    JSValue *currentThis = [JSContext currentThis];
    JSValue *currentCallee = [JSContext currentCallee];
    NSArray *currentParamers = [JSContext currentArguments];
    dispatch_async(dispatch_get_main_queue(), ^{
        /**
         *  js调起OC代码,代码在子线程,更新OC中的UI,需要回到主线程
         */
        NSLog(@"js传过来:%@",shareString);
    });
    NSLog(@"JS paramer is %@",shareString);
    NSLog(@"currentThis is %@",[currentThis toString]);
    NSLog(@"currentCallee is %@",[currentCallee toString]);
    NSLog(@"currentParamers is %@",currentParamers);
}

打印的log:

2017-11-15 14:02:18.695352+0800 WebView+image[3257:377010] currentThis is [object SecondViewController]
2017-11-15 14:02:18.695745+0800 WebView+image[3257:377010] currentCallee is function () {
    [native code]
}
2017-11-15 14:02:18.695936+0800 WebView+image[3257:377010] currentParamers is (
)
2017-11-15 14:02:50.904847+0800 WebView+image[3257:376893] js传过来:jsParameter
2017-11-15 14:02:50.904842+0800 WebView+image[3257:377010] JS paramer is jsParameter
2017-11-15 14:02:50.905124+0800 WebView+image[3257:377010] currentThis is [object SecondViewController]
2017-11-15 14:02:50.905607+0800 WebView+image[3257:377010] currentCallee is function () {
    [native code]
}
2017-11-15 14:02:50.906052+0800 WebView+image[3257:377010] currentParamers is (
    jsParameter
)

三,特殊要求

3.1 、JS中对象已经生成,需要OC生成对应的方法实现,JS去调用
JS代码如下:



    
    

    
    
    
    
    


以上JS中globalObject对象已经存在,但是在没有实现creatJSMethod方法,在按钮"oc生成JS方法"却调用了此方法。
OC代码:

- (void)doSomeJsThings{
    
    self.jsContext = [_webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exception) {
        NSLog(@"出现异常,异常信息:%@",exception);
    };
    
    //oc调用js
    JSValue * jsObj = self.jsContext[@"globalObject"];//拿到JS中已经存在的对象
    //为jsObj对应的方法提供方法实现
    jsObj[@"creatJSMethod"] = ^(NSString * parameter){
        NSLog(@"方法生成成功:%@",parameter);
    };
  }

log:

2017-11-15 14:47:08.126160+0800 WebView+image[3661:435044] 方法生成成功:jsParameter

3.2、oc重写js本地的方法,与生成一样,上面的代码:

 jsObj[@"creatJSMethod"] = ^(NSString * parameter){
    NSLog(@"方法生成成功:%@",parameter);
 };

既能生成,也能重写。

这些基本就是全部的情况了,当然还有一些线程问题等,等有需要再总结。

总结:

oc与js交互,先看js是调oc还是oc调用js,再看js中方法是全局方法还是全局属性方法(可能说的不是很准确)。清楚了这些就好实现了!!!

iOS WKWebView与JS交互

你可能感兴趣的:(iOS JavaScriptCore使用)