iOS与H5的交互（四种）
2017-04-01 本文已影响636人
满庭花醉三千客
之前项目中有一部分内容和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好像是有缓存的。
有什么意见或建议还请各位大神不吝指教～
今天愚人节，但学习我们是认真的！
