JavaScriptCore与iOS和Android交互
16lz
2021-01-26
简介
- 本文主要解决的是iOS和Android与JS交互,提供统一解决方案.
- 关注点是以最简洁的代码和逻辑来解决三端的交互.
- 讨论偏重iOS与JS交互 但会涉及到部分Android代码.
iOS与JS交互的解决方案(本文讨论JavaScriptCore)
- JavaScriptCore
- WebViewJavascriptBridge
- WKWebview
关于JavaScriptCore
-
JSContext代表JS的执行环境，通过-evaluateScript:方法就可以执行JS代码 -
JSValue封装了JS与ObjC中的对应的类型，以及调用JS的API等 -
JSExport是一个协议，遵守此协议，就可以定义我们自己的协议，在协议中声明的API都会在JS中暴露出来，才能调用
iOS调用JS代码并传参数
// 一个JSContext对象，就类似于JS中的Window，只需要创建一次即可 self.jsContext = [[JSContext alloc] init]; // jscontext可以直接执行JS代码 [self.jsContext evaluateScript:@"var num = 10"]; [self.jsContext evaluateScript:@"var names = ['Same','Jack','Bob']"]; [self.jsContext evaluateScript:@"var squareFunc = function(value) { return value * 2 }"]; // 计算正方形的面积方法 JSValue *square = [self.jsContext evaluateScript:@"squareFunc(num)"]; // 通过下标的方式获取到方法 JSValue *squareFunc = self.jsContext[@"squareFunc"]; // 获取数组中第一个参数 JSValue *names = self.jsContext[@"names"]; JSValue *initialName = names[0]; //JSValue包装了一个JS函数，我们可以从OC代码中使用Foundation类型作为参数来直接调用该函数 JSValue *value = [squareFunc callWithArguments:@[@"20"]]; // 输出JS调用结果 NSLog(@"%@", square.toNumber); NSLog(@"%d", value.toInt32); NSLog(@"%@", initialName.toString);JS调用iOS (Blocks)
// 获取当前JS运行环境 self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]; // 将block被赋给JSContext里的一个标识符,JavaScriptCore 会自动的把block封装在JavaScript函数里。这使得在JavaScript中可以简单的使用Foundation和Cocoa类,本例中将韩语参数传入通过CFStringTransform()转义 self.jsContext[@"simplifyString"] = ^(NSString *input) { NSMutableString *mutableString = [input mutableCopy]; CFStringTransform((__bridge CFMutableStringRef)mutableString, NULL, kCFStringTransformToLatin, NO); CFStringTransform((__bridge CFMutableStringRef)mutableString, NULL, kCFStringTransformStripCombiningMarks, NO); return mutableString; }; //调用JS代码并且返回参数 NSLog(@"%@", [self.jsContext evaluateScript:@"simplifyString('안녕하새요!')"]);JS调用iOS (JSExport)
声明实现JSExport协议的协议TestJSObjectProtocol 并声明实现TestJSObjectProtocol协议的类JSNativeMethod
//首先创建一个实现了JSExport协议的协议@protocol TestJSObjectProtocol //此处我们测试几种参数的情况- (NSString *)imgCallBack:(NSString *)url;// 通过JSON传过来- (void)callWithDict:(NSDictionary *)params;// JS调用此方法来调用OC的系统相册方法- (void)callSystemCamera;// JS调用Oc，然后在OC中通过调用JS方法来传值给JS。- (void)jsCallObjcAndObjcCallJsWithDict:(NSDictionary *)params;// 在JS中调用时，函数名应该为showAlertMsg(arg1, arg2)// 这里是只两个参数的。- (void)showAlert:(NSString *)title msg:(NSString *)msg;@end@interface JSNativeMethod : NSObject@property (nonatomic, weak) JSContext *jsContext;@end 实现遵循JSExport协议的协议方法
#import "JSNativeMethod.h"@implementation JSNativeMethod- (NSString *)imgCallBack:(NSString *)url { NSLog(@"touch image %@",url); return @"iOS To H5";}- (void)callWithDict:(NSDictionary *)params { NSLog(@"Js调用了OC的方法，参数为：%@", params);}// Js调用了callSystemCamera- (void)callSystemCamera { NSLog(@"JS调用了OC的方法，调起系统相册"); // JS调用后OC后，又通过OC调用JS，但是这个是没有传参数的 JSValue *jsFunc = self.jsContext[@"jsFunc"]; [jsFunc callWithArguments:nil];}- (void)jsCallObjcAndObjcCallJsWithDict:(NSDictionary *)params { NSLog(@"jsCallObjcAndObjcCallJsWithDict was called, params is %@", params); // 调用JS的方法 JSValue *jsParamFunc = self.jsContext[@"jsParamFunc"]; [jsParamFunc callWithArguments:@[@{@"age": @10, @"name": @"lili", @"height": @158}]];}- (void)showAlert:(NSString *)title msg:(NSString *)msg { dispatch_async(dispatch_get_main_queue(), ^{ UIAlertView *a = [[UIAlertView alloc] initWithTitle:title message:msg delegate:nil cancelButtonTitle:@"Ok" otherButtonTitles:nil, nil]; [a show]; });}@end把JSNativeMethod封装到JavaScript函数AndroidCall()中
JSNativeMethod *call = [[JSNativeMethod alloc] init]; //将JSNativeMethod封装到JavaScript函数AndroidCall()中 self.jsContext[@"AndroidCall"] = call; call.jsContext = self.jsContext;异常处理
// JSContext 还有另外一个有用的招数：通过设置上下文的 exceptionHandler 属性，你可以观察和记录语法，类型以及运行时错误。 exceptionHandler 是一个接收一个 JSContext 引用和异常本身的回调处理 self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) { context.exception = exceptionValue; NSLog(@"异常信息：%@", exceptionValue); };Android对应实现
protected void addJsMethod() {wv_content.addJavascriptInterface(new JSNativeMethod(), "AndroidCall");}final class JSNativeMethod {@JavascriptInterfacepublic String imgCallBack(String url) {Toast.makeText(mContext, url, Toast.LENGTH_SHORT).show();return "test android";}}public void test(View view) {wv_content.loadUrl("javascript:test()");}JavaScript对应实现
//点击图片事件  //点击按钮事件 //app端callback callSystemCamera()function callSystemCamera() { log("callSystemCamera()"); window.AndroidCall.callSystemCamera();}//app端callback showAlertMsg()function showAlertMsg(a,b) { log(JSON.stringify(a)); log(JSON.stringify(b)); window.AndroidCall.showAlertMsg(a,b);}//app端callback callWithDict()function callWithDict(a) { log(JSON.stringify(a)); window.AndroidCall.callWithDict(a);}//app端callback jsCallObjcAndObjcCallJsWithDict()function jsCallObjcAndObjcCallJsWithDict(a) { log(JSON.stringify(a)); window.AndroidCall.jsCallObjcAndObjcCallJsWithDict(a);}//点击图片事件function imgCallBack(src) { log("click img"); log(JSON.stringify(src)); if (window.AndroidCall) { log("called>>>>>"); log(window.AndroidCall.imgCallBack('http://huizuche.com/Content/Images/recommend/car/Jeep_Grand%20Cherokee_L.jpg')); } else { alert("window.AndroidCall is nil"); } }源代码
https://github.com/iStig/JavaScriptCoreDemo
扩展阅读
NSHipster
OC JavaScriptCore与js交互
Android
更多相关文章
- android中正确保存view的状态
- 【Android】短信管理代码
- Android之TextView动态设置图片
- 已解决：android 模拟器调用本地的webservice 引用不到
- Android之Intent显示和隐式调用
- Android的图形API调用（一）
- Android(安卓)SurfaceView onDraw()绘图问题
- android关于View的截图
- Android中webview和js之间的交互及注意事项