美文网首页
iOS原生与H5页面交互

iOS原生与H5页面交互

作者: X_code_ZH | 来源:发表于2018-03-21 16:27 被阅读0次

    一、原生框架

    (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   

    @interface WebCenterViewController ()  

    @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  

    __weakWebCenterViewController *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]];  

    }  

    相关文章

      网友评论

          本文标题:iOS原生与H5页面交互

          本文链接:https://www.haomeiwen.com/subject/ceegqftx.html