OC与H5交互
交互的四种方式
- 有很多的app直接使用在webview的代理中通过拦截的方式与native进行交互，通常是通过拦截url scheme判断是否是我们需要拦截处理的url及其所对应的要处理的功能是什么。任意版本都支持。
- iOS7之后出了JavaScriptCore.framework用于与JS交互，但是不支持iOS6，对于还需要支持iOS6的app，就不能考虑这个了。若需要了解，看最后的推荐阅读。
- WebViewJavascriptBridge开源库使用，本质上，它也是通过webview的代理拦截scheme，然后注入相应的JS。
- react-native，这个没玩过（与前三种不同）。
1.UIWebView 和 js 交互
ViewController.m:
#import "WebViewController.h"
#import "WebViewModel.h"
@interface WebViewController ()
@property (nonatomic, strong) UIWebView *webView;
@property (nonatomic, strong) JSContext *jsContext;
@property (nonatomic, strong) WebViewModel *model;
@end
@implementation WebViewController
- (void)viewDidLoad {
[super viewDidLoad];
[self.view addSubview:self.webView]
}
// 通过懒加载创建webView
-(UIWebView *)webView {
if (_webView == nil) {
_webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
NSURL *url = [[NSBundle mainBundle] URLForResource:@"callEach" withExtension:@"html"];
[_webView loadRequest:[NSURLRequest requestWithURL:url]]；
//忽略web页面与_WebView组件的大小关系如果设置为YES可以执行缩放，但是web页面加载出来的时候，就会缩小到UIWebView组件的大小
_webView.scalesPageToFit = NO;
_webView.delegate = self;
}
return _webView;
}
pragma mark - UIWebViewDelegate
-(void)webViewDidFinishLoad:(UIWebView *)webView {
self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
WebViewModel *model = [[WebViewModel alloc] init];
self.jsContext[@"CallEachModel"] = model;
model.jsContext = self.jsContext;
model.webView = self.webView;
model.currentVC = self;
self.model = model;
self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
context.exception = exceptionValue;
NSLog(@"异常信息：%@", exceptionValue);
};
}
- (void)webViewDidStartLoad:(UIWebView *)webView {
}
@end
2. model.h:
#import
@protocol WebViewJSExport<JSExport>
/** 遵守了 协议后 这些方法就暴露给 js 调用 **/
/** jsCallOC **/
- (void)jsCallOC;
- (void)jsCallOCWithString:(NSString *)string;
//js调用时候取函数名就好了 不要冒号 jsCallOCWithTitleMessage
- (void)jsCallOCWithTitle:(NSString *)title message:(NSString *)msg;
- (void)jsCallOCWithDictionary:(NSDictionary *)dictionary;
- (void)jsCallOCWithArray:(NSArray *)array;
/** ocCallJS **/
- (void)ocCallJS;
- (void)ocCallJSWithString:(NSString *)string;
- (void)ocCallJSWithTitle:(NSString *)title message:(NSString *)message;
- (void)ocCallJSWithDictionary:(NSDictionary *)dictionary;
- (void)ocCallJSWithArray:(NSArray *)array;
/** callEach **/
- (void)jsCallOCAndOCCallJSWithParams:(NSDictionary *)params;
- (void)ocCallJSAndJSCallOCWithParams:(NSDictionary *)params;
@end
@class BaseViewController;
@interface WebViewModel : NSObject <WebViewJSExport>
@property (nonatomic, weak) JSContext *jsContext;
@property (nonatomic, weak) UIWebView *webView;
@property (nonatomic, weak) BaseViewController *currentVC;
@end
3.model.m
#import "WebViewModel.h"
#import "BaseViewController.h"
@implementation WebViewModel
#pragma mark - jsCallOC
- (void)jsCallOC {
dispatch_async(dispatch_get_main_queue(), ^{
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:nil
message:@"jsCallOC"
delegate:nil
cancelButtonTitle:@"I konw"
]
otherButtonTitles:nil, nil];
[alert show];
});
}
- (void)jsCallOCWithString:(NSString *)string {
dispatch_async(dispatch_get_main_queue(), ^{
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:string
message:nil
delegate:nil
cancelButtonTitle:@"I konw"
otherButtonTitles:nil, nil];
[alert show];
});
}
- (void)jsCallOCWithTitle:(NSString *)title message:(NSString *)msg {
dispatch_async(dispatch_get_main_queue(), ^{
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:title
message:msg
delegate:nil
cancelButtonTitle:@"I konw"
otherButtonTitles:nil, nil];
[alert show];
});
}
- (void)jsCallOCWithDictionary:(NSDictionary *)dictionary {
dispatch_async(dispatch_get_main_queue(), ^{
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:dictionary[@"title"]
message:dictionary[@"message"]
delegate:nil
cancelButtonTitle:@"I konw"
otherButtonTitles:nil, nil];
[alert show];
});
}
- (void)jsCallOCWithArray:(NSArray *)array {
dispatch_async(dispatch_get_main_queue(), ^{
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:array[0]
message:array[1]
delegate:nil
cancelButtonTitle:@"I konw"
otherButtonTitles:nil, nil];
[alert show];
});
}
//OC调用JS代理
- (void)ocCallJS {
JSValue *jsFunc = self.jsContext[@"func1"];
[jsFunc callWithArguments:nil];
}
- (void)ocCallJSWithString:(NSString *)string {
NSInteger arc = arc4random()%1000;
JSValue *jsFunc = self.jsContext[@"func2"];
[jsFunc callWithArguments:@[@{@"title": @"change--> myoctitle", @"message": @(arc)}]];
}
- (void)ocCallJSWithTitle:(NSString *)title message:(NSString * )message {
}
- (void)ocCallJSWithDictionary:(NSDictionary *)dictionary {
}
- (void)ocCallJSWithArray:(NSArray *)array {
}
pragma mark - callEach
- (void)jsCallOCAndOCCallJSWithParams:(NSDictionary *)params {
[self.currentVC createTopView];
self.currentVC.field.text = params[@"title"];
[self.currentVC setBlock:^(NSString *string){
if (string != nil && string.length > 0) {
JSValue *jsFunc = self.jsContext[@"func2"];
[jsFunc callWithArguments:@[@{@"title":@"js 调出来topView 输入填充到html：" , @"message": string}]];
}
}];
}
- (void)ocCallJSAndJSCallOCWithParams:(NSDictionary *)params {
JSValue *jsFunc = self.jsContext[@"func3"];
[jsFunc callWithArguments:@[@{@"title": @"myoctitle", @"message": @"myocmessage"}]];
}
@end
此文章有摘抄，如若侵权请通知我。
