iOS-与H5的交互（四种）

骑猪看日落 2023-10-18 10:47 60阅读 0赞

之前项目中有一部分内容和H5的小伙伴协同开发的，使用了各种与H5的交互，现在有时间整理出来，和大家分享一下。

这篇文章会介绍这么几个内容：  
1、Html调用OC的方法。  
2、Html向OC传值，单个值与多个值。  
3、OC调用Html的方法。  
4、OC向Html传值，多个值。

为了能让小伙伴们能够深入体会，作为Html小白，我就从网上现学现卖的。  
Html都是我自己写的，可能会有很多不雅观的地方，还请各位看官多多包含～

第一步，新建一个项目TestHtml5。

第二步，新建三个文件分别为  
File.html 主体内容，包含各个按钮及其方法的实现。  
File.js 可以将方法写在这里并调用，然而为了大家方便查看方法，我没有使用这个文件，我把内容都放在File.html中了。  
File.css 设置html的样式等。

第三步，新建一个继承于NSObject的CustomJSObject对象，导入<JavaScriptCore/JavaScriptCore.h>头文件，并定义一个CustomJSProtocol。

第四步，我们先进行Html的编码。

第五步，在CustomJSProtocol中新添加方法helloWQL。然后在CustomJSObject中实现helloWQL方法,并写好相关回调。

第六步，在ViewController中编码，加载本地的Html。

//加载本地的html文件
    - (void)loadWebView
    {
        self.mainWebView = [[UIWebView alloc]initWithFrame:CGRectMake(0, 100, PhoneScreen_WIDTH, PhoneScreen_HEIGHT-100)];
        self.mainWebView.delegate = self;
        NSString *path = [[NSBundle mainBundle] bundlePath];
        NSURL *baseURL = [NSURL fileURLWithPath:path];
        NSString *htmlPath = [[NSBundle mainBundle] pathForResource:@"File" ofType:@"html"];
        
        
        NSString *htmlCont = [NSString stringWithContentsOfFile:htmlPath
                                                        encoding:NSUTF8StringEncoding
                                                           error:nil];
    
        
        [self.mainWebView loadHTMLString:htmlCont baseURL:baseURL];
        
        [self.view addSubview:self.mainWebView];
    }

第七步，在完成html加载的时候，也就是webViewDidFinishLoad方法中进行context注入：

- (void)webViewDidFinishLoad:(UIWebView *)webView
    {
        //加载完成后注入object，让我们可以得到html的点击事件
        [self addCustomAction];
        
    }
    - (void)addCustomAction
    {
        //获取context，这里的path是固定的
        JSContext *context = [self.mainWebView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
        
        //自定义的JS对象，需要注入到context中
        CustomJSObject *object = [[CustomJSObject alloc]initWithSuccessCallback:^(NSDictionary *dic) {
            
            
            if ([[dic.allKeys firstObject] isEqualToString:@"helloWQL"]) {
                //html调用OC的方法
                NSLog(@"HelloWQLDic:%@",dic);
                [self webViewClickButtonAction];
    
            }
            
        } faileCallback:^(NSDictionary *dic) {
            NSLog(@"FailDic:%@",dic);
    
        }];
        
        //这里要使用native，html那边调用的是native
        context[@"native"] = object;
    
        
    }
    
    - (void)webViewClickButtonAction
    {
        NSLog(@"OC 接收到 H5按钮点击事件");
    }

此时我们点击html的按钮就能够调用OC的方法了。

小伙伴们会不会有点云里雾里的，我觉得口头描述会有一点复杂，我就直接做了一张图，请笑纳：

![Image 1][]

流程梳理.png

看看点击按钮会有什么效果：

![Image 1][]

点击效果.png

第八步，从Html传值给OC。  
整体的流程和调用方法一致的，需要注意的是：传值的时候，请注意方法名的大小写，尤其是传多个参数时，第二个参数的名字要大写开头。

<!DOCTYPE html>
    <html>
    <header>
    <title id = "title">Title of this page</title>
    
    <link rel="stylesheet" type="text/css" href="File.css">
    </header>
    
    <body>
        
        <p id = "wql">This is my first try to write Html5 file.</p>
        <br/>
        
        <b id = "myp">This text is bold</b>
    
        
        <br/><br/><br/><br/>
        
        
        
        <button type="button" onclick = "helloWQL()">点击出弹框</button>
        <br/><br/>
        
        
        
        
        <button type="button" onclick = "sendValueFromHtml()">点击传值</button>
        <br/><br/>
        
        
        <script type="text/javascript">
            
            //调用native的helloWQL方法，native对象由OC注入
            function helloWQL(){
                native.helloWQL();
            }
        
            function sendValueFromHtml(){
                //需要注意的是传两个值的时候，第二个参数应该以大写字母开头（WithValueTwo）。
                //正确 sendValueFromHtmlToOCWithValue:(NSString*)valueOne WithValueTwo:(NSString*)valueTwo
                //错误 sendValueFromHtmlToOCWithValue:(NSString*)valueOne withValueTwo:(NSString*)valueTwo
    
                native.sendValueFromHtmlToOCWithValue('This is send one Value');
    
                native.sendValueFromHtmlToOCWithValueWithValueTwo('Good','Boy');
    
            }
        </script>
    </body>
    </html>

传值的效果：

![Image 1][]

传值效果.png

第九步：OC调用Html的方法。  
这个比较简单需要Html为我们预留方法即可。我写了一个按钮，按钮触发以下方法：

//调用html的方法
    - (void)callHtmlMethodAction:(UIButton*)sender
    {
        JSContext *context = [self.mainWebView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
        CustomJSObject *object = [CustomJSObject new];
        NSString *textJS = [NSString stringWithFormat:@"methodForOC()"];
        [context evaluateScript:textJS];
        context[@"native"] = object;
    
    }

看看File.html文件：

<!DOCTYPE html>
    <html>
    <header>
        
    <title id = "title">Title of this page</title>
    
    
    <link rel="stylesheet" type="text/css" href="File.css">
    
    
    </header>
    
    <body>
        
        <p id = "wql">This is my first try to write Html5 file.</p>
        <br/>
        
        <b id = "myp">This text is bold</b>
    
        
        <br/><br/><br/><br/>
        
        
        
        <button type="button" onclick = "helloWQL()">点击出弹框</button>
        <br/><br/>
        
        
        
        <button type="button" onclick = "sendValueFromHtml()">点击传值</button>
        <br/><br/>
        
        
        
        
        <button type="button" onclick = "getValueFromOC()">从OC拿值</button>
        
        
        <script type="text/javascript">
            
            //调用native的helloWQL方法，native对象由OC注入
            function helloWQL(){
                native.helloWQL();
            }
        
            function sendValueFromHtml(){
                //需要注意的是传两个值的时候，第二个参数应该以大写字母开头（WithValueTwo）。
                //正确 sendValueFromHtmlToOCWithValue:(NSString*)valueOne WithValueTwo:(NSString*)valueTwo
                //错误 sendValueFromHtmlToOCWithValue:(NSString*)valueOne withValueTwo:(NSString*)valueTwo
    
                native.sendValueFromHtmlToOCWithValue('This is send one Value');
    
                native.sendValueFromHtmlToOCWithValueWithValueTwo('Good','Boy');
    
            }
        
        
            //这个方法html并不调用，而是给OC调用的
            function methodForOC(){
            
                alert('这个是Html的方法，OC调的到吗？');
            }
    
        </script>
    </body>
    </html>

主要看后面几行，我们调的是那个methodForOC方法。

看一下效果：

![Image 1][]

OC调Html方法.png

第十步：点击html的按钮，然后从OC获取值。  
主体流程：点击html按钮，触发OC方法，然后从OC传值给Html。  
Html内容：

<!DOCTYPE html>
    <html>
    <header>
        
    <title id = "title">Title of this page</title>
    
    
    <link rel="stylesheet" type="text/css" href="File.css">
    
    
    
    
    </header>
    
    <body>
        
        <p id = "wql">This is my first try to write Html5 file.</p>
        <br/>
        
        <b id = "myp">This text is bold</b>
    
        
        <br/><br/><br/><br/>
        
        
        
        <button type="button" onclick = "helloWQL()">点击出弹框</button>
        <br/><br/>
        
        
        
        
        <button type="button" onclick = "sendValueFromHtml()">点击传值</button>
        <br/><br/>
        
        
        
        
        <button type="button" onclick = "getValueFromOC()">从OC拿值</button>
        
        
        <script type="text/javascript">
            
            //调用native的helloWQL方法，native对象由OC注入
            function helloWQL(){
                native.helloWQL();
            }
        
            function sendValueFromHtml(){
                //需要注意的是传两个值的时候，第二个参数应该以大写字母开头（WithValueTwo）。
                //正确 sendValueFromHtmlToOCWithValue:(NSString*)valueOne WithValueTwo:(NSString*)valueTwo
                //错误 sendValueFromHtmlToOCWithValue:(NSString*)valueOne withValueTwo:(NSString*)valueTwo
    
                native.sendValueFromHtmlToOCWithValue('This is send one Value');
    
                native.sendValueFromHtmlToOCWithValueWithValueTwo('Good','Boy');
    
            }
        
            //需要从OC那里拿值，之后会触发OC的sendValueToHtml方法
            function getValueFromOC(){
                native.sendValueToHtml();
            }
        
            //接收从OC传过来的值，需要OC调用该方法，并传入值
            function getUserNameAndAge(ocValueOne,ocValueTwo){
                alert('name:'+ocValueOne+' '+'age:'+ocValueTwo);
    
            }
        
            //这个方法html并不调用，而是给OC调用的
            function methodForOC(){
            
                alert('这个是Html的方法，OC调的到吗？');
            }
        </script>
        
    </body>
    </html>

传值的核心代码：

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];
                
        }

哈哈，“口说无凭”，直接上图：

![Image 1][]

OC传值给Html

流程梳理完毕，就是上效果图了：

![Image 1][]

Html从OC获取多个值

这个做的有点瑕疵，弹框不知道为什么取消不了。好尴尬....但是数据确实传给了Html那边。如果有知道原因的小伙伴，请留言哈～

整体流程就是这样了。我们实现了各种和H5的交互，感觉也没有那么难哈～

此外，如果运行代码时，点击按钮没有效果，请clean一下，H5好像是有缓存的。  
有什么意见或建议还请各位大神不吝指教～

今天愚人节，但学习我们是认真的！

[代码在这里][Link 1]

[Image 1]: 
[Link 1]: https://link.jianshu.com?t=https://github.com/Coolll/TestHtml5Project