iOS WebView（WKWebView） js与OC的交互问题

简述

如今很多复杂的页面，为了进度，选择了H5页面开发，所以就必须在oc中嵌套使用H5页面，这样更快的促进项目。但是对于交互问题，自己遇到的一些问题记录一下。
1.webview的创建 实例化

_webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, 0, 
[UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)];
_webView.delegate = self;
_webView.backgroundColor = [UIColor grayColor];
[_webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@'http://192.168.1.23:3000/prop/?user_id=37&token=e06a6842be6b1729da0bbd25c78ae896ead061e4']]];
[self.view addSubview:_webView];

2.在H5中点击不同的位置跳转到不同的oc界面
正常情况下，我们一般只需要和前端配合商量好，点击位置触发代理

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType

从代理中我们可以拿到 NSString *string = [[request URL]absoluteString]; 接着通过字符串的判断 hasfix，加上和前端的商量我们可以通过url判断你点击的位置

if( [path hasPrefix:@"http://gm_app_client/detail_video/"] ){
        NSString * pageId = [path substringFromIndex:@"http://gm_app_client/detail_video/".length];
        [self showDetailPage:pageId other:1];
}

这样就能在事件中跳转到我们的OC代码了。
3.还有一种情况，就是前端没做一些处理，需要我们配合前端使用js进行交互，这时候就需要用到一个JSContext
@property (nonatomic,strong)JSContext *context;
在网络加载完成之后代理中

-(void)webViewDidFinishLoad:(UIWebView *)webView 
{
  1. //iOS调用js  
  2.  //首先创建JSContext 对象（此处通过当前webView的键获取到jscontext）  
3.JSContext *context=[_webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]; 
4.//// 打印异常,由于JS的异常信息是不会在OC中被直接打印的,所以我们在这里添加打印异常信息,
self.context.exceptionHandler =
    ^(JSContext *context, JSValue *exceptionValue)
    {
        context.exception = exceptionValue;
        NSLog(@"%@", exceptionValue);
    };
//js调用recharge方法时会走block回调
    __weak typeof(self) weakSelf = self;
    self.context[@"recharge"] = ^(){
        NSArray *args = [JSContext currentArguments];
        PKRechargeController *rechageVC = [[PKRechargeController alloc]init];
       
        [weakSelf presentViewController:rechageVC animated:YES completion:nil];
        NSLog(@"这是一条测试数据 哈哈哈哈....");
    };
其中recharge就是网页js中添加的方法，这样就能实时监听一样 只要你在H5中点击出发这个方法 这样就能完成H5和oc利用js进行嵌套的交互

上面是UIWebview情况下的两种交互，但是iOS8之后出现了WKWebView.

WKWebview

现在伴随着iOS11的出现，意味着以后最低的适配版本要提升到iOS9，最低都iOS8了，这样UIWebView讲会退出历史舞台，会被WKwebview替代，本身前者UIWebview就具有严重的内存问题，而且如果是JS调用原生的方法，那么交互方式也是比较麻烦的（H5端要制定特定协议头的URL，在对应代理方法中拦截URL），然后判断是否符合要求，最后还要进行字符串的截取操作。
下面让我们一起来看WKWebview怎么实现交互的吧（附上关键OC代码和JS代码）
1.首先WKWebview的创建

 WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc]init];  //WKWebview配置对象
WKPreferences *preference = [[WKPreferences alloc]init];
 config.preferences = preference;
 //是否允许与js进行交互，默认是YES的，如果设置为NO，js的代码就不起作用了
 preference.javaScriptEnabled = YES;
 WKUserContentController *userContentController = [[WKUserContentController alloc]init];  //交互的重要之点
[userContentController addScriptMessageHandler:self name:@"Share"];   //切记 Share 方法名一定要和H5开发人员协商定好  self 指当前控制器，切记这个代理要添加 WKScriptMessageHandler  不然会报警告
 config.userContentController = userContentController; _homeBannerWebView = [[ArtBaseWKWebView alloc]initWithFrame:CGRectMake(0, 64, KSreenWidth, KSreenHeight - 64) configuration:config];
_homeBannerWebView.urlString = self.urlString;
_homeBannerWebView.UIDelegate = self;
_homeBannerWebView.navigationDelegate = self;    
_homeBannerWebView.scrollView.showsHorizontalScrollIndicator = NO;
_homeBannerWebView.scrollView.showsVerticalScrollIndicator = NO;

上面是WKWebview的创建和监听，接下来看看JS端的代码

    
ios按钮
    
    
安卓按钮