iOS与H5交互方案

前言

本文主要是为了iOS开发人员和H5开发的交互的方案
iOS使用的是JavaScript Core的官方框架
H5使用的是vue框架
接下来会分别展示iOS调用H5和H5调用iOS的方法，并附两端的代码

H5调用iOS

1.首先在iOS端注册事件，并处理回调

#import 

//创建 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
测试JS调用iOS
调用iOS

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事件了！！！