最近公司接了一个项目，是要把原本运行在微信的程序跑在原生程序上，之前的各种功能通过微信的js文档就可以运行了，现在各种功能（比如调用摄像头）必须要通过自己写方法调用了，因此研究了一下JS与OC之间的交互，通过JS来完成网页与手机之间的交互
参考了一些前辈的经验
OC与JS互相调用
JavaScript与Objective-C之间的通信
首先是调用原生控件，这里我翻看了很多资料发现大家的写法都是在button上加上JS方法，通过JS来发起一段request，具体网页写法如下
<html>
<header>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript"
function loadURL(url) {
var iFrame;
iFrame = document.createElement("iframe");
iFrame.setAttribute("src", url);
iFrame.setAttribute("style", "display:none;");
iFrame.setAttribute("height", "0px");
iFrame.setAttribute("width", "0px");
iFrame.setAttribute("frameborder", "0");
document.body.appendChild(iFrame);
// 发起请求后这个 iFrame 就没用了，所以把它从 dom 上移除掉
iFrame.parentNode.removeChild(iFrame);
iFrame = null;
}
function click() {
loadURL("firstClick://shareClick?param1=111¶m2=222¶m3=333");
}
</script>
</header>
<body style="width:100%; height:100%;">
<h2> 点击响应 </h2>
<br/>
<br/>
<button type="button" onclick="click()">Click Me!</button>
</body>
</html>
这里可以看到原作者用了很大一段来发起一段request的请求，所以完全可以直接在click（）这个方法里发起请求就可以了，我改进后的方法页面如下
<html>
<header>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function click() {
location.href="firstClick://shareClick?param1=111¶m2=222¶m3=333"
}
</script>
</header>
<body>
<h2> 点击响应</h2>
<br/>
<br/>
<button type="button" onclick="click()">Click Me!</button>
</body>
</html>
效果都是一样的，都是为了发起一段request
这样当webview开始载入链接进行跳转时，我们就可以在代理方法里面拦截url进行解析，然后进行原生控件的操作，手机端代码如下
#pragma mark - UIWebViewDelegate
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
NSURL * url = [request URL];
if ([[url scheme] isEqualToString:@"firstclick"]) {//这里注意不管原来是否有大小写，协议名全部都是小写，否则进不来
NSArray *params =[url.query componentsSeparatedByString:@"&"];//这里获取链接里后缀的参数
//在这里做原生操作，比如调用摄像头，选择照片等等
//在这里return NO是让链接不再继续跳转，否则会调到错误页面
return NO;
}
return YES;
}
在ios7以上苹果添加了JavaScriptCore.framework，这个库里的方法可以不再通过拦截url的方式来与JS互动，这样网页写起来也更加方便，快捷，代码如下
<html>
<header>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function click() {
doSome('param1','param2','param3');
}
</script>
</header>
<body>
<h2> 点击响应 </h2>
<br/>
<br/>
<button type="button" onclick="click()">Click Me!</button>
</body>
</html>
而手机端代码如下
JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//定义好JS要调用的方法, share就是调用的share方法名
context[@"dosome"] = ^() {
NSArray *args = [JSContext currentArguments];
for (JSValue *jsVal in args) {
NSLog(@"%@", jsVal.toString);//这里输出的就是网页里面的参数param1,2,3等等
}
//在这个回调里做原生的操作，比如调用摄像头等
};
可以看到第二种方法比第一种简洁明了的多
然后就是手机端通过JS来将本地处理的数据传给网页，或者是希望网页完成一些事情，这里就需要在网页上增加一个JS的方法来响应手机端的调用，代码如下
<html>
<header>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function showAlert(res){
alert(res);
}
</script>
</header>
</html>
在网页上增加一个名叫showAlert的方法,将接收到的res给弹出显示
而在手机端则只需要将希望传递的数据放到res里，调用网页上的这个showAlert的方法就可以了
调用代码如下
NSString *jsStr = [NSString stringWithFormat:@"showAlert('%@')",@"这里是JS中alert弹出的message"];
[_webView stringByEvaluatingJavaScriptFromString:jsStr];
如果有添加JavaScriptCore.framework，则可以通过JSContext来调用，代码如下
JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
NSString *textJS = @"showAlert('这里是JS中alert弹出的message')";
[context evaluateScript:textJS];
==17年4月7号更新==
之前因为业务原因对JavaScriptCore.framework的研究只是浅尝辄止,这两天回过头来研究 RN 时又有了新的收获.
首先是JavaScriptCore中类及协议如下：
JSContext：给JavaScript提供运行的上下文环境
JSValue：JavaScript和Objective-C数据和方法的桥梁
JSManagedValue：管理数据和方法的类
JSVirtualMachine：处理线程相关，使用较少
JSExport：这是一个协议，如果采用协议的方法交互，自己定义的协议必须遵守此协议
之前的研究只是停留在JSContext 的应用上,其他类和协议并没有了解,这次补充主要讲下JSValue和JSExport
先看下代码:
ViewController中的代码
#import "ViewController.h"
#import <JavaScriptCore/JavaScriptCore.h>
@protocol JSObjcDelegate <JSExport>
- (void)loginOut;
@end
@interface ViewController () <UIWebViewDelegate, JSObjcDelegate>
@property (nonatomic, strong) JSContext *jsContext;
@property (weak, nonatomic) IBOutlet UIWebView *webView;
@end
@implementation ViewController
#pragma mark - Life Circle
- (void)viewDidLoad {
[super viewDidLoad];
NSURL *url = [[NSBundle mainBundle] URLForResource:@"test" withExtension:@"html"];
[self.webView loadRequest:[[NSURLRequest alloc] initWithURL:url]];
}
#pragma mark - UIWebViewDelegate
- (void)webViewDidFinishLoad:(UIWebView *)webView {
self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
self.jsContext[@"IOS"] = self;
self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
context.exception = exceptionValue;
NSLog(@"异常信息：%@", exceptionValue);
};
}
#pragma mark - JSObjcDelegate
- (void)loginOut {
NSLog(@"loginOut");
//做原生操作
JSValue *shareCallback = self.jsContext[@"Callback"];// callback 是网页上回调 JS
[shareCallback callWithArguments:nil];//nil 是要回传参数
}
@end
我们在 ios 端自定义JSObjcDelegate协议，而且此协议必须遵守JSExport这个协议，自定义协议中的方法就是暴露给web页面的方法。在webView加载完毕的时候获取JavaScript运行的上下文环境，然后再注入桥梁对象名为IOS，承载的对象为self即为此控制器，控制器遵守此自定义协议实现协议中对应的方法。在JavaScript调用完本地应用的方法做完相对应的事情之后，又回调了JavaScript中对应的方法，从而实现了web页面和本地应用之间的通讯。
网页端代码如下图:
lALOu0RNcc0Bdc0B9g_502_373.png_620x10000q90g.jpg
这是一个网页弹窗的 function, 可以看到点击确定时直接用中间桥 IOS调用 ios 的本地原生loginOut 方法.
遇到问题：
当刷新WebView或者重载webView之后，js就调不到OC方法了。
解决方法：
项目中嵌入了UIWebView-TS_JavaScriptContext 开源库。
具体的可以参考这两篇文章:
JavaScript和Objective-C交互的那些事(续)
JS和UIWebview通过JavaScriptCore无法执行iOS本地方法解决方案
这两篇文章很好的解决了我在研究时遇到的问题,希望对你们也有帮助
网友评论