JS和原生交互

现在H5和原生的交互在日常开发中经常用的，很多APP为了优化APP，更加便捷灵活的更新页面，有很多页面交给了H5来开发，那么JS和原生的交互就很重要了。

现在常用的主要有两种方式：第三方WebViewJavascriptBridge和原生的交互

首先先来讲一下第一种WebViewJavascriptBridge

首先要引入WebViewJavascriptBridge，可以用cocoapods来引入

pod 'WebViewJavascriptBridge'

可以新建一个工具类然后引入

#import 

@property (nonatomic, strong) WebViewJavascriptBridge *bridge;
@property(nonatomic,strong)WKWebView * webView;

然后和webview建立关系

- (void)configureWithWebView:(WKWebView *)webView {
    self.webView = webView;
    // 3.开启日志
    [WebViewJavascriptBridge enableLogging];
    
    // 4.给webView建立JS和OC的沟通桥梁
    self.bridge = [WebViewJavascriptBridge bridgeForWebView:self.webView];
    [self.bridge setWebViewDelegate:self];
    
}
这里是JS调用OC的API:访问相册
-(void)openCamera{
    /* JS调用OC的API:访问相册 */
//    self.Controller = [self getCurrentViewController];
    [self.bridge registerHandler:@"openCamera" handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@"需要%@图片", data[@"count"]);
        
//        UIImagePickerControllerSourceType sourceType = UIImagePickerControllerSourceTypeCamera;
//        if ([UIImagePickerController isSourceTypeAvailable:(UIImagePickerControllerSourceTypeCamera)]) {
            UIImagePickerController * picker =[[UIImagePickerController alloc] init];
            picker.delegate = self;
            //设置拍照后的图片可被编辑
            picker.allowsEditing = YES;
//            picker.sourceType = sourceType;
        self.Controller = [self getCurrentViewController];
            //        [self presentModalViewController:picker animated:YES];被废弃的
            [self.Controller presentViewController:picker animated:YES completion:nil];
//        }
    }];
    
    
     /* JS调用OC的API:访问底部弹窗 */
    [self.bridge registerHandler:@"showSheet" handler:^(id data, WVJBResponseCallback responseCallback) {
        UIAlertController *vc = [UIAlertController alertControllerWithTitle:@"你猜我出不出来?" message:@"嘻嘻嘻嘻!!" preferredStyle:UIAlertControllerStyleActionSheet];
        UIAlertAction *cancelAction = [UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:nil];
        UIAlertAction *okAction = [UIAlertAction actionWithTitle:@"好的" style:UIAlertActionStyleDefault handler:nil];
        [vc addAction:cancelAction];
        [vc addAction:okAction];
        [[self getCurrentViewController] presentViewController:vc animated:YES completion:nil];
    }];
}

在Controller页面创建一个webview

 self.webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 300, self.view.frame.size.width, 300)];
    [self.view addSubview:self.webView];
    self.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 600, 100, 100)];
    [self.view addSubview:self.imageView];

NSString *indexPath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
    NSString *appHtml = [NSString stringWithContentsOfFile:indexPath encoding:NSUTF8StringEncoding error:nil];
    NSURL *baseUrl = [NSURL fileURLWithPath:indexPath];
    [self.webView loadHTMLString:appHtml baseURL:baseUrl];
    [[HLWebTool HLWebToolAPI] configureWithWebView:self.webView];

    [[HLWebTool HLWebToolAPI] openCamera];//这个方法要调用的

index中的代码

    
        
        
        
    
    
    
        
JS调用OC中的方法
        访问OC相册
        调用OC提示窗
        

    
    

以上是JS调用OC的方法，接下来讲OC调用JS

Controller里面添加点击方法
UIButton * userBut = [[UIButton alloc] initWithFrame:CGRectMake(0, 50, 100, 50)];
    [self.view addSubview:userBut];
    [userBut setTitle:@"获取用户信息" forState:(UIControlStateNormal)];
    [userBut addTarget:self action:@selector(getUserinfo) forControlEvents:(UIControlEventTouchUpInside)];
///*  获取用户信息  */
- (void)getUserinfo {
    // 调用JS中的API
    [[HLWebTool HLWebToolAPI] getUserinfo];
    
}


工具类中实现方法
- (void)getUserinfo {
    // 调用JS中的API
    [self.bridge callHandler:@"getUserInfo" data:@{@"userId":@"DX001"} responseCallback:^(id responseData) {
        NSString *userInfo = [NSString stringWithFormat:@"%@,姓名:%@,年龄:%@", responseData[@"userID"], responseData[@"userName"], responseData[@"age"]];
        UIAlertController *vc = [UIAlertController alertControllerWithTitle:@"从网页端获取的用户信息" message:userInfo preferredStyle:UIAlertControllerStyleAlert];
        UIAlertAction *cancelAction = [UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:nil];
        UIAlertAction *okAction = [UIAlertAction actionWithTitle:@"好的" style:UIAlertActionStyleDefault handler:nil];
        [vc addAction:cancelAction];
        [vc addAction:okAction];
        [[self getCurrentViewController] presentViewController:vc animated:YES completion:nil];
    }];
}