进入15年以后，在我们天朝越来越流行混编！尤其是腾讯的 变态APP微信小程序一出，撑起了混编的半边天！ 废话不多说，现在的你应该懂得H5技术了，就算不懂得，最起码的交互应该懂得的！这几天研究了一下 iOS原生与JS交互技术，一点心得，写下来与大家共同分享！
一、UIWebView ：OC与JS交互
1、OC调用JS
NSLog(@"OC调用JS 传参数 ！！");
/*OC调用JS篇
方式一 无参数 通过webView自带的方法来执行JS
*/
//@"OCToJSWithNil('')"这个就是OC让JS执行的Js代码，我们要执行JS方法，前提JS中的方法名你得知道，这样你就可以把JS方法使用拼成字符串，然后使用webView自带stringByEvaluatingJavaScriptFromString来执行JS代码的方法来执行JS方法
NSString *jsStr = [NSString stringWithFormat:@"OCToJSWithNil('')"];//[NSString stringWithFormat:@"showAlert('%@')",@"这里是JS中alert弹出的message"];
[_webView stringByEvaluatingJavaScriptFromString:jsStr];
//注意：该方法会同步返回一个字符串，因此是一个同步方法，可能会阻塞UI。
/*方式二 通过 JavaScriptCore 来执行JS
继续使用JavaScriptCore库来做JS交互。
*/
//必须先获取JS上下文，找到要执行的JS中的方法名，利用evaluateScript执行JS
//JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
NSString *textJS = @"OCToJSWithString('这里是JS中alert弹出的message')";
//调用JS代码 返回的是 JSValue ------> 可转换 成 对应的OC对象
[_jsContext evaluateScript:textJS];
2、JS调用OC
// ******************* JS调用原生OC （本质：重写JS的方法） *******************
//第一种 通过重写 JS方法
/*
JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//定义好JS要调用的方法, picCallback就是调用的picCallback方法名
//类似JS定义好一个方法，但是方法里面内容是空的， 我们在这里来 重写 该方法的内容， 当 JS 执行命令是 来 调用 我们重写的该方法的内容
context[@"JSToOCWithNil"] = ^() {
NSLog(@"+++++++Begin Log+++++++");
NSArray *args = [JSContext currentArguments];
dispatch_async(dispatch_get_main_queue(), ^{
UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"方式二" message:@"这是OC原生的弹出窗" delegate:self cancelButtonTitle:@"收到" otherButtonTitles:nil];
[alertView show];});
for (JSValue *jsVal in args) {
NSLog(@"------>%@", jsVal.toString);
}
NSLog(@"-------End Log-------");
};
//第二种 通过代理 调用OC重写JS的方法
#import@protocol JSObjcDelegate//这是JS中的 &&&&&&标签对应的名字 value对应的名字&&&&&&/*
*/- (void)callCamera;
- (void)share:(NSString *)shareString;
@end
//获取JS上下文
self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
self.jsContext[@"Toyun"] = self;
self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
context.exception = exceptionValue;
NSLog(@"异常信息：%@", exceptionValue);
};
#pragma mark - JSObjcDelegate
/*
JavaScript调用本地方法是在子线程中执行的，这里要根据实际情况考虑线程之间的切换，而在回调JavaScript方法的时候最好是在刚开始调用此方法的线程中去执行那段JavaScript方法的代码，我在实际运用中开始没注意，就被坑惨了啊
*/
- (void)callCamera {
NSLog(@"callCamera");
// 获取到照片之后在回调js的方法picCallback把图片传出去
JSValue *JSToOCWithNil = self.jsContext[@"JSToOCWithNil"];
[JSToOCWithNil callWithArguments:@[@"photos"]];
}
- (void)share:(NSString *)shareString {
NSLog(@"share:%@", shareString);
// 分享成功回调js的方法shareCallback
JSValue *JSToOCWithString = self.jsContext[@"JSToOCWithString"];
[JSToOCWithString callWithArguments:nil];
}
二、WKWebView ：OC与JS交互
1、OC 调JS 类似 webVIew的方法
//替换第一个P元素内容
NSString *tempString = [NSString stringWithFormat:@"document.getElementsByTagName('p')[0].innerHTML ='%@';",self.someString];
[self.myWebView evaluateJavaScript:tempString completionHandler:^(id item, NSError * _Nullable error) {
}];
2、JS调OC
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
config.userContentController = [[WKUserContentController alloc] init];
// 注入JS对象Native，
// 声明WKScriptMessageHandler 协议
// ！！！！！！！ 注册监听的 JS方法名：Native和 Pay ，只要名为Native或者 Pay的 回调代理 则会触发，在代理里面进行 方法名的判断 进行处理
[config.userContentController addScriptMessageHandler:self name:@"Native"];
//本人喜欢只定义一个MessageHandler协议 当然可以定义其他MessageHandler协议
[config.userContentController addScriptMessageHandler:self name:@"Pay"];
self.myWebView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];
self.myWebView.UIDelegate = self;
[self.view addSubview:self.myWebView];
[self loadTouched:nil];
#pragma mark - WKScriptMessageHandler
- (void)userContentController:(WKUserContentController *)userContentController
didReceiveScriptMessage:(WKScriptMessage *)message {
NSDictionary *bodyParam = (NSDictionary*)message.body;
NSString *func = [bodyParam objectForKey:@"function"];
NSLog(@"MessageHandler Name:%@", message.name);
NSLog(@"MessageHandler Body:%@", message.body);
NSLog(@"MessageHandler Function:%@",func);
//本人喜欢只定义一个MessageHandler协议 当然可以定义其他MessageHandler协议
if ([message.name isEqualToString:@"Native"])
{
///参数
NSDictionary *parameters = [bodyParam objectForKey:@"parameters"];
//调用本地函数1
if([func isEqualToString:@"addSubView"])
{
Class tempClass = NSClassFromString([parameters objectForKey:@"view"]);
CGRect frame = CGRectFromString([parameters objectForKey:@"frame"]);
if(tempClass && [tempClass isSubclassOfClass:[UIWebView class]])
{
UIWebView *tempObj = [[tempClass alloc] initWithFrame:frame];
tempObj.tag = [[parameters objectForKey:@"tag"] integerValue];
NSURL *url = [NSURL URLWithString:[parameters objectForKey:@"urlstring"]];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[tempObj loadRequest:request];
[self.myWebView addSubview:tempObj];
}
}
//调用本地函数2
else if([func isEqualToString:@"alert"])
{
[self showMessage:@"来自网页的提示" message:[parameters description]];
}
//调用本地函数3
else if([func isEqualToString:@"callFunc"])
{
}
//调用本地函数4
else if([func isEqualToString:@"testFunc"])
{
[self showMessage:@"来自网页的字典" message:[parameters description]];
}
}
else if ([message.name isEqualToString:@"Pay"]) {
//如果是自己定义的协议, 再截取协议中的方法和参数, 判断无误后在这里进行逻辑处理
} else if ([message.name isEqualToString:@"dosomething"]) {
//........
}
}
网友评论