iOS与H5的交互(四种)

之前项目中有一部分内容和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的编码。

<!DOCTYPE html>
<html>
<header>
<title id = "title">Title of this page</title>
<!--样式从File.css文件中获取-->
<link rel="stylesheet" type="text/css" href="File.css">
</header>

<body>
    <!--    标签,css中设置样式时,会根据id来设置-->
    <p id = "wql">This is my first try to write Html5 file.</p>
    <br/>
    <!--    加粗的文本,css中设置样式时,会根据id来设置-->
    <b id = "myp">This text is bold</b>

    <!--    换行符-->
    <br/><br/><br/><br/>
    
    <!--    按钮,点击按钮触发helloWQL()方法,按钮上的文本是“点击出弹框”-->
    <!--    该按钮的目的是:点击后触发OC的方法-->
    <button type="button" onclick = "helloWQL()">点击出弹框</button>
    
    <!--        定义各个方法-->
    <script type="text/javascript">
        
        //调用native的helloWQL方法,native对象由OC注入
        function helloWQL(){
            native.helloWQL();
        }
    </script>
    
</body>
</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的方法了。

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

流程梳理.png

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

点击效果.png

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

<!DOCTYPE html>
<html>
<header>
<title id = "title">Title of this page</title>
<!--样式从File.css文件中获取-->
<link rel="stylesheet" type="text/css" href="File.css">
</header>

<body>
    <!--    标签,css中设置样式时,会根据id来设置-->
    <p id = "wql">This is my first try to write Html5 file.</p>
    <br/>
    <!--    加粗的文本,css中设置样式时,会根据id来设置-->
    <b id = "myp">This text is bold</b>

    <!--    换行符-->
    <br/><br/><br/><br/>
    
    <!--    按钮,点击按钮触发helloWQL()方法,按钮上的文本是“点击出弹框”-->
    <!--    该按钮的目的是:点击后触发OC的方法-->
    <button type="button" onclick = "helloWQL()">点击出弹框</button>
    <br/><br/>
    
    
    <!--    按钮,点击该按钮会触发sendValueFromHtml()方法,按钮上的文本是“点击出弹框”-->
    <!--    该按钮的目的是:将某个值传给OC,我们这里分别传了一个值、两个值-->
    <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>

传值的效果:

传值效果.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>

<!--样式从File.css文件中获取-->
<link rel="stylesheet" type="text/css" href="File.css">


</header>

<body>
    <!--    标签,css中设置样式时,会根据id来设置-->
    <p id = "wql">This is my first try to write Html5 file.</p>
    <br/>
    <!--    加粗的文本,css中设置样式时,会根据id来设置-->
    <b id = "myp">This text is bold</b>

    <!--    换行符-->
    <br/><br/><br/><br/>
    
    <!--    按钮,点击按钮触发helloWQL()方法,按钮上的文本是“点击出弹框”-->
    <!--    该按钮的目的是:点击后触发OC的方法-->
    <button type="button" onclick = "helloWQL()">点击出弹框</button>
    <br/><br/>
    
    <!--    按钮,点击该按钮会触发sendValueFromHtml()方法,按钮上的文本是“点击出弹框”-->
    <!--    该按钮的目的是:将某个值传给OC,我们这里分别传了一个值、两个值-->
    <button type="button" onclick = "sendValueFromHtml()">点击传值</button>
    <br/><br/>
    
    
    <!--    按钮,点击该按钮会触发getValueFromOC()方法,按钮上的文本是“从OC拿值”-->
    <!--    该按钮的目的是:点击按钮后,从OC获取某个值-->
    <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方法。

看一下效果:

OC调Html方法.png

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

<!DOCTYPE html>
<html>
<header>
    
<title id = "title">Title of this page</title>

<!--样式从File.css文件中获取-->
<link rel="stylesheet" type="text/css" href="File.css">

<!--响应的方法从File.js文件中获取-->
<!--<script type="text/javascript" src="File.js"></script>-->

</header>

<body>
    <!--    标签,css中设置样式时,会根据id来设置-->
    <p id = "wql">This is my first try to write Html5 file.</p>
    <br/>
    <!--    加粗的文本,css中设置样式时,会根据id来设置-->
    <b id = "myp">This text is bold</b>

    <!--    换行符-->
    <br/><br/><br/><br/>
    
    <!--    按钮,点击按钮触发helloWQL()方法,按钮上的文本是“点击出弹框”-->
    <!--    该按钮的目的是:点击后触发OC的方法-->
    <button type="button" onclick = "helloWQL()">点击出弹框</button>
    <br/><br/>
    
    
    <!--    按钮,点击该按钮会触发sendValueFromHtml()方法,按钮上的文本是“点击出弹框”-->
    <!--    该按钮的目的是:将某个值传给OC,我们这里分别传了一个值、两个值-->
    <button type="button" onclick = "sendValueFromHtml()">点击传值</button>
    <br/><br/>
    
    
    <!--    按钮,点击该按钮会触发getValueFromOC()方法,按钮上的文本是“从OC拿值”-->
    <!--    该按钮的目的是:点击按钮后,从OC获取某个值-->
    <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];
            
    }

哈哈,“口说无凭”,直接上图:

OC传值给Html

流程梳理完毕,就是上效果图了:

Html从OC获取多个值

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

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

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

今天愚人节,但学习我们是认真的!

代码在这里

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,294评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,493评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,790评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,595评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,718评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,906评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,053评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,797评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,250评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,570评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,711评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,388评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,018评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,796评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,023评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,461评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,595评论 2 350

推荐阅读更多精彩内容