前言:js交互问题在很多app种都能用到,面试中也经常被问到,我做的项目中也用到了交互,今天就总结下,希望能帮助到有需要的人.
上图中就是我所做的app中涉及到交互的页面,点击不同的按钮能跳转到不同的页面,下面做具体的分析.
理论段落
在ios7以前,苹果还没有推出JavaScriptCore的时候,我们对js的操作只有在webview里面的一个函数stringByEvaluatingJavaScriptFromString,js对oc的回调都是基于URL的拦截进行的操作,一般我们都借用一些三方库,我当时用的是WebViewJavascriptBridge.那在ios7之后,我们对js的操作就会相对方便.我先介绍几个关键词
JSContext:JS的执行环境,是通过JSVirtualMachine管理这所有对象的生命周期,每个JSValue都和JSContext相关联着
JSValue: JS对象在JSVirtualMachine中的一个强引用.我们对JS的操作都是通过它的.并且每个JSValue都强引用这一个JSContext.同时OC和JS对象之间的转换也是通过它.
JSVirtualMachine: JS运行的虚拟机,有独立的堆空间和垃圾回收机制.
JSExport:一个协议,如果JS想直接调用oc对象里面的方法和属性,那么这个OC对象只需要实现这个JSExport协议方法就可以
============================我是分割线=============================
1.OC调用JS(我们不在通过URL拦截,我们直接取UIWebView的context,然后进行js操作)
- (void)webViewDidFinishLoad:(UIWebView *)webView {
[SVProgressHUD dismiss];
//oc通过stringByEvaluatingJavaScriptFromString这个方法来调用js的
self.navigationItem.title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
//获取js的上下文
self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//给js传用户id
[self appToJs:@"user_id" data:SALFSTR(User_ID)];
//给js传版本号
[self appToJs:@"versionCode" data:[UIApplication sharedApplication].appVersion];
//给js传token
[self appToJs:@"token" data:SALFSTR(User_Token)];
//设置 app 交互代理
self.context[@"app"] = self;
self.context.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
context.exception = exceptionValue;
//打印异常信息
NSLog(@"异常信息：%@", exceptionValue);
};
}
//交互的方法
- (void)appToJs:(NSString *)type data:(NSString *)data{
NSString * H5Str = [NSString stringWithFormat:@"appToJs('%@','%@')",type,data];
[self.context evaluateScript:H5Str];
}
2.JS调用OC有两种方法:block和JSExport协议,我用的是后者
.h文件中
#import "BaseViewController.h"
#import <JavaScriptCore/JavaScriptCore.h>
@protocol HomeWebViewJSExport <JSExport>
//协议方法
- (void)js:(NSString *)type App:(NSString *)data;
@end
@interface HomeWebViewController : BaseViewController<UIWebViewDelegate,HomeWebViewJSExport>
@property(strong,nonatomic)NSString *webUrl;
@end
.m文件中 主要是对协议方法的实现
- (void)js:(NSString *)type App:(NSString *)data {
NSLog(@"%@ %@",type,data);
dispatch_async(dispatch_get_main_queue(), ^{
if ([type isEqualToString:@"scenic"]) {
//进入景区详情
[self jumpScenicViewWithID:data];
}else if ([type isEqualToString:@"url"]){
//进入专题页
[self pushToBannerWithID:data];
}
});
}
参考资料:葵花宝典书籍.
