1. 首先引入JavaScriptCore庫
使用的時候導入頭文件#import <JavaScriptCore/JavaScriptCore.h>
2. 本地一個html文件用做測試
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>OC與JS交互</title>
<script>
function showAlert(){
ios_showMessage("點擊了彈框按鈕", arr);
}
function submit(){
alert('submit');
}
function ios_ocCalljs(dict, str){
var name = dict['name'];
var age = dict['age'];
alert(name + age + str);
// 傳回去
showDict(dict)
}
</script>
</head>
<body>
<input id="submit" type="submit" value="我是提交" onclick="submit()"><br/>
<input type="button" value="彈框" onclick="showAlert()" /><br/>
<div/>
</body>
</html>
3. JavaScriptCore的OC與JS交互
// 加載完成
- (void)webViewDidFinishLoad:(UIWebView *)webView {
// OC 調用 JS --> stringByEvaluatingJavaScriptFromString
NSString *title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
self.navigationItem.title = title;
NSLog(@"****************華麗的分界線****************");
NSLog(@"加載完成咯!!!!");
// JSContext就為其提供著運行環境 H5上下文
JSContext *jsContext = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
// 保存全局變量
self.jsContext = jsContext;
// 異常處理
self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exception) {
NSLog(@"context = %@", context);
NSLog(@"exception = %@", exception);
};
// 提供全局變量
[self.jsContext evaluateScript:@"var arr = ['apple', 'orange', 'banna'];"];
// JS 調用 OC
self.jsContext[@"ios_showMessage"] = ^() {
NSLog(@"來了");
NSArray *args = [JSContext currentArguments];
NSLog(@"args = %@", args);
//OC調用JS 傳參
NSDictionary *dict = @{@"name":@"spirej", @"age":@18};
[[JSContext currentContext][@"ios_ocCalljs"] callWithArguments:@[dict, @"love"]];
};
}
3.1 拿到H5上下文JSContext
// JSContext就為其提供著運行環境 H5上下文
JSContext *jsContext = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
3.2 JS調用OC
// JS 調用 OC
self.jsContext[@"ios_showMessage"] = ^() {
NSLog(@"來了");
NSArray *args = [JSContext currentArguments];
NSLog(@"args = %@", args);
};
ios_showMessage()是JS里定義的方法
3.3 OC調用JS
NSString *jsFunctStr = [NSString stringWithFormat:@"showAlert()"];
[self.jsContext evaluateScript:jsFunctStr];
ios_ocCalljs()是JS里定義的方法，OC調用并可傳參
4. JS操作OC對象
4.1 聲明一個SP_JSObject類
#import <Foundation/Foundation.h>
#import <JavaScriptCore/JavaScriptCore.h>
NS_ASSUME_NONNULL_BEGIN
@protocol SPProtocol <JSExport>
- (void)doSomething;
- (void)doSomething2:(NSString *)str;
// 協議 - 協議方法
JSExportAs(getS, - (int)getSum:(int)num1 num2:(int)num2);
@end
@interface SP_JSObject : NSObject<SPProtocol>
@end
NS_ASSUME_NONNULL_END
自定義的協議方法
- (void)doSomething {
NSLog(@"doSomething 來了");
}
- (void)doSomething2:(NSString *)str {
NSLog(@"doSomething2 來了 -- %@", str);
}
- (int)getSum:(int)num1 num2:(int)num2 {
NSLog(@"getSum 來了");
// int (nil) - jsvalue (0)
NSLog(@"num1 = %d, num2 = %d", num1, num2);
return num1+num2;
}
JS里面有這樣一個方法，分別調用了SP_JSObject對象的協議方法
function controlObject(){
spObject.doSomething();
spObject.doSomething2("艾歐尼亞");
spObject.getS(10, 20);
}
在OC端初始化SP_JSObject對象，并賦給JS端，JS端就可調起SP_JSObject的對象方法
// JS 操作對象
SP_JSObject *spObject = [[SP_JSObject alloc] init];
self.jsContext[@"spObject"] = spObject;
4. demo JS與OC交互，打開手機相冊
4.1 JS端有一個打開相冊的button和響應方法，還有一個顯示圖片的方法
function openAlbumImage(){
getImage();
}
function showImage(imageDataStr){
var tz_img = document.getElementById("tz_image");
tz_img.innerHTML = "<image style='width:200px;' src='data:image/png;base64,"+imageDataStr+"'>";
}
<input type="button" value="打開相冊" onclick="openAlbumImage()" /><br />
4.2 遵循協議，并聲明相冊控制器
<UIImagePickerControllerDelegate, UINavigationControllerDelegate>
@property (nonatomic,strong) UIImagePickerController *imagePicker;
4.3 JS交互OC，初始化相冊控制器
// 打開相冊
__weak typeof(self) weakSelf = self;
self.jsContext[@"getImage"] = ^() {
weakSelf.imagePicker = [[UIImagePickerController alloc] init];
weakSelf.imagePicker.delegate = weakSelf;
weakSelf.imagePicker.allowsEditing = YES;
weakSelf.imagePicker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
[weakSelf presentViewController:weakSelf.imagePicker animated:YES completion:nil];
};
4.4 實現協議方法，最后OC調JS傳圖片給JS顯示
#pragma mark -- UIImagePickerDelegate
- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary<NSString *,id> *)info {
NSLog(@"info---%@",info);
UIImage *resultImage = [info objectForKey:@"UIImagePickerControllerEditedImage"];
NSData *imgData = UIImageJPEGRepresentation(resultImage, 0.01);
NSString *encodedImageStr = [imgData base64EncodedStringWithOptions:NSDataBase64Encoding64CharacterLineLength];
[self removeSpaceAndNewline:encodedImageStr];
[self dismissViewControllerAnimated:YES completion:nil];
NSString *imageString = [self removeSpaceAndNewline:encodedImageStr];
// 拿到圖片后，調用JS方法，把圖片傳給JS顯示
NSString *jsFunctStr = [NSString stringWithFormat:@"showImage('%@')",imageString];
[self.jsContext evaluateScript:jsFunctStr];
}
- (NSString *)removeSpaceAndNewline:(NSString *)str
{
NSString *temp = [str stringByReplacingOccurrencesOfString:@" " withString:@""];
temp = [temp stringByReplacingOccurrencesOfString:@"\r" withString:@""];
temp = [temp stringByReplacingOccurrencesOfString:@"\n" withString:@""];
return temp;
}
文中所有示例demo可以在這里下載
https://github.com/SPIREJ/OCJS
