前言
本文主要是为了iOS开发人员和H5开发的交互的方案
iOS使用的是JavaScript Core的官方框架
H5使用的是vue框架
接下来会分别展示iOS调用H5和H5调用iOS的方法，并附两端的代码
H5调用iOS
1.首先在iOS端注册事件，并处理回调
#import <JavaScriptCore/JavaScriptCore.h>
//创建 JSContext对象
@property (nonatomic, strong) JSContext *context;
//创建webview
UIWebView *webView = [[UIWebView alloc] init];
webView.frame = self.view.bounds;
[self.view addSubview:webView];
//初始化context对象
self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//加载url 这里我H5项目也发布在本地，就直接localhost了
[webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://localhost:8081"]]];
//注入js事件，jsCalliOS就是和H5通信的函数名 block回调就是js调用该函数后的事件
self.context[@"jsCalliOS"] = ^(NSString *message) {
//因为block内部不是主线程，若有刷新UI事件需要在主线程进行
dispatch_async(dispatch_get_main_queue(), ^{
//打印从js拿到的结果
NSLog(@"接收到了js的事件:%@",message);
});
};
2.在H5项目中调用该事件
HTML
<span>测试JS调用iOS</span>
<button @click="btnClick">调用iOS</button>
JS
methods: {
btnClick() {
jsCalliOS('success')
}
},
接下来就是在iOS模拟器上看结果了。。
当点击了事件以后可以在Xcode控制台看到log的消息
2018-12-07 16:14:39.832982+0800 Demo[53887:16447994] 接收到了js的事件:success
至此，就成功的在H5端调用到了iOS端的方法
iOS调用H5
1.在H5端声明函数
main.js 文件中
window.iOSCallJS = function() {
alert('接收到了iOS的事件')
}
2.在iOS中调用JS函数
//创建button
UIButton *btn = [UIButton buttonWithType:UIButtonTypeSystem];
btn.frame = CGRectMake(100, 100, 80, 50);
[btn setTitle:@"调用JS事件" forState:UIControlStateNormal];
[self.view addSubview:btn];
[btn addTarget:self action:@selector(btnClick) forControlEvents:UIControlEventTouchUpInside];
//button点击事件
- (void)btnClick {
//调用JS函数
[self.context evaluateScript:@"iOSCallJS()"];
}
接下来就在iOS模拟器上点击button，触发JS里的alert事件了！！！
