H5与iOS混编之交互即跳转、调用方法、传值

关键词：协议 context注入

一、iOS与H5跳转

关于iOS与HTML5交互方法大概主要有5种方式:

1.用WKWebView交互(系统API) （实际使用最多的方式 iOS8以上可用）

2.用UIWebView(系统API)

3.苹果的Javascriptcore.framework框架

4.跨平台Cordova框架（使用HTML, CSS & JS进行移动App开发，多平台共用一套代码，免费开源）

5.三方WebViewJavascriptBridge

（关键字：WKWebView加载H5，实现代理）

UIViewController里面设置WKWebView等加载H5页面，实现相应代理方法。之后iOS与H5页面相互跳转与iOS页面间跳转类似。

（关键字：稳功性能 Js的Nitro库 更多H5特性 60fps 内手势 重构UW成14类3协议）

1. 在性能、稳定性、功能方面有很大提升（加载网页时占用的内存，如模拟器加载百度与开源中国网站时，WKWebView占用23M，而UIWebView占用85M）；
2. 允许JavaScript的Nitro库加载并使用（UIWebView中限制）；
3. 支持了更多的HTML5特性；
4. 高达60fps的滚动刷新率以及内置手势；
5. 将UIWebViewDelegate与UIWebView重构成了14类与3个协议（查看苹果官方文档）；

二、调用方法

2.1 H5调用iOS方法（继NSObject 导头jsc 定协议 ,js写A法 调native 的A法，协议写A并实 留回调，load页面，didFinishLoad中context注）

1.创建继承自NSObject对象，导入头文件#import <JavaScriptCore/JavaScriptCore.h>，并定一个协议

2.在H5的JavaScript中写helloWQL方法，调用native的helloWQL

3.在协议中写helloWQL方法并在类中实现方法且写好回调

4.loadWebView加载H5页面

5.在didFinishLoad方法中进行context注入

    //获取context，这里的path是固定的
    JSContext *context = [self.mainWebView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    //自定义的JS对象，需要注入到context中
    CustomJSObject *object = [[CustomJSObject alloc]initWithSuccessCallback:^(NSDictionary *dic) {   //点击按钮触发的H5方法名称
        if ([[dic.allKeys firstObject] isEqualToString:@"helloWQL"]) {
            //html调用OC的方法
            [self webViewClickButtonAction];   
          }
    } faileCallback:^(NSDictionary *dic) {
        }];    
//这里要使用native，此处的native是注入的OC对象，html那边调用的是native,    
context[@"native"] = object;

2.2iOS调用H5方法

1.H5的JavaScript中为iOS预留方法

2.iOS中写context evaluateScript:调用H5方法

JSContext *context = [self.mainWebView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

    CustomJSObject *object = [CustomJSObject new];

    NSString *textJS = [NSString stringWithFormat:@"methodForOC()"];

    [context evaluateScript:textJS];

    context[@"native"] = object;

三、传值

3.1 H5给iOS传值

流程和H5调iOS方法一样，区别是方法名带上参数即可，且注意：方法名第二个参数名称首字母要大写

3.2 iOS给H5传值

1.点击H5按钮触发iOS的传值方法

<button type="button" onclick = "getValueFromOC()">从OC拿值</button>

 

//需要从OC那里拿值，之后会触发OC的sendValueToHtml方法

        function getValueFromOC(){

            native.sendValueToHtml();

        }

  //接收从OC传过来的值，需要OC调用该方法，并传入值

        function getUserNameAndAge(ocValueOne,ocValueTwo){

           setTimeout(function(){ alert('name:'+ocValueOne+' '+'age:'+ocValueTwo);

                                 },100);

        }

2.iOS传值给H5方法

if ([[dic.allKeys firstObject] isEqualToString:@"sendValueToHtml"]){

        //从OC传值给html

        NSLog(@"sendValueToHtml:%@",dic);      

        NSString *name = @"WQL";

        NSString *age = @"22";

        NSString *textJS = [NSString stringWithFormat:@"getUserNameAndAge('%@','%@')",name,age];

        [context evaluateScript:textJS];    

    }

或者 [webView evaluateJavaScript:textJS StrcompletionHandler:^(id_Nullable result, NSError * _Nullable error) {NSLog(@"==%@----%@",result, error);}];

或者[webView stringByEvaluatingJavaScriptFromString:textJS];

参考文章https://www.jianshu.com/p/b0c847dcea9c?from=message&isappinstalled=0👍感谢