如何在iOS原生界面嵌入H5界面

一、原生框架<JavaScriptCore/JavaScriptCore>

（1）JavaScriptCore: 是一种JavaScript引擎，主要为webKit提供脚本处理能力，可以JS调用OC，也可以OC调用JS

(2) JSContext: 代表了JS的执行环境，通过-evalueScript: 方法就可以执行-- JS代码；

(3) JSValue: 他封装了JS与OC中对应的类型，以及调用JS的API等；

(4) JSExport: 是一个协议，遵守此协议，就可以定义我们自己的协议，在协议中声明的API都会在JS中暴露出来，才能调用

二、交互方法

1.第一种:直接拦截H5页面中点击事件的URL，可以截取这个URL中的参数，进行拼接，然后跳转到自己指定的界面；

#pragma mark ------------ 交互  

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

{  

//     直接 截取后面的id  

    NSString *str = request.URL.resourceSpecifier  

    NSLog(@"request.URL.resourceSpecifier = %@",request.URL.resourceSpecifier)  

    NSString *strTwo = [NSString stringWithFormat:@"http:%@",str]  

    NSRange range = [strTwo rangeOfString:@"newbieImg/"]  

    if (range.location != NSNotFound) {  

        NSArray *array = [strTwo componentsSeparatedByString:@"newbieImg/"]  

        NSString *strId = array[1]  

        NSLog(@"strId = %@", strId)  

        CCCCCViewController *courseVC = [[CCCCCViewController alloc] init]  

        courseVC.urlId = strTwo  

        [self.navigationController pushViewController:courseVC animated:YES]  

        return NO  

    }  

    return YES  

}

2.需要与后台也就是写H5的人瞎桐约定方法。但这里有两种方法，一种是JS调用OC， 一种是OC调用JS

（1）JS调用OC,并且传递参数

//第一磨晌坦步 添加框架，引入头文件  

#import <JavaScriptCore/JavaScriptCore.h>  

  

@interface WebCenterViewController ()<UIWebViewDelegate>  

@property(nonatomic,strong) UIWebView *webView  

//第二步 声明属性  

@property (nonatomic, strong) JSContext *context  

  

@end

第三步，就需要知道后台指定的方法是什么了，比如

test1是一个无参数的方法，test2是一个有参数的方法，这时我们就可以在webView网页加载完毕的那个方法中写到：

#pragma mark ------------ webView加载完毕  

-(void)webViewDidFinishLoad:(UIWebView *)webView  

{    NSLog(@"网页加载完毕")  

    //在网页加载完成后，获取每个参数  

    //获取JS的运行环境  

    _context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]  

    //JS调用无参数OC  

    __weak WebCenterViewController *weakSelf = self  

    _context[@"test1"] = ^() {  

        [weakSelf methond]  

    }  

      

    //JS调用有参数的OC  

    _context[@"test2"] = ^() {  

    //用数谨唤组接收传过来的多个参数  

        NSArray *paramArray = [JSContext currentArguments]  

        //然后取出相对应的值  

        NSString *str1 = paramArray[0]  

        NSString *str2 = paramArray[1]  

        [weakSelf methondParam:str1 withStr:str2]  

    }  

      

  

}  

  

//无参数的方法  

- (void)methond {  

    NSLog(@"调用无参数的方法")  

  

}  

  

//有参数的方法  

- (void)methondParam:(NSString *)str1 withStr:(NSString *)str2 {  

    NSLog(@"str1 = %@, str2 = %@", str1, str2)  

}

注意：：：：调用的方法名test1，test2，一定要和html中的保持一致！！！！！！

（2）OC调用JS  , OC 向 JS 传递参数

只需要在点击方法中，初始化所要传递的对象，然后，利用stringByEvaluatingJavaScriptFromString此方法进行传参数：

#pragma mark ------------ OC 调用 JS  

/* 

 1. OC 调用 JS  只需在所需要传值的地方获取到JS中的点击方法即可 

 例如: 点击方法是下面的这个 functionAction 

 */  

  

- (void)functionAction {  

    //如果需要传递参数 给 JS，则初始化参数  

    NSString *str2 = @"1234mkfg"  

    NSString *str3 = @"kdsfj"  

    //传参数  

    [_webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"func('%@', '%@')", str2, str3]]  

}</span>  

</span>

在开发中有时候会用到H5调用本地图片粗伏或者相机，像第三方的实名认证，在线客服等蔽凳档等都需要上宏乱传图片。H5中只需要通过 <input>调用即可，ios是可以的实现的，不需要自己处理，除非客户端压缩图片，但是Android中需要自己处理，比较坑，本文记录H5调用本地图片或者相机的实现过程以及遇到的问题。

H5主要是通过 input 标签来获取图片

通过 WebView 加载 h5 页面，监听 WebView 对应的方法，实现自己的逻辑。

当点击 input 标签的时候会调用 WebChromeClient 的 onShowFileChooser() 方法（5.0+）或者 openFileChooser() 方法（3.0+）在改方法中处理自己逻辑，这里是d出一个原生的选择框，选择从相册还是拍照获取图片。

拍照和打开相册功能封装到了 PhotoUtils 工具类中了。

file_paths.xml

从相册中选择

onActivityResult() 方法处理

这里使用 Luban 压缩以后再上传的

---