java h5 ios分析_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对象，导入头文件，并定义一个CustomJSProtocol。

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

Title of this page

This is my first try to write Html5 file.

This text is bold

点击出弹框

//调用native的helloWQL方法，native对象由OC注入

function helloWQL(){

native.helloWQL();

}

第五步，在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。

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

Title of this page

This is my first try to write Html5 file.

This text is bold

点击出弹框

点击传值

//调用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');

}

传值的效果：

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

Title of this page

This is my first try to write Html5 file.

This text is bold

点击出弹框

点击传值

从OC拿值

//调用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调的到吗？');

}

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

看一下效果：

OC调Html方法.png

第十步：点击html的按钮，然后从OC获取值。

主体流程：点击html按钮，触发OC方法，然后从OC传值给Html。

Html内容：

Title of this page

This is my first try to write Html5 file.

This text is bold

点击出弹框

点击传值

从OC拿值

//调用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调的到吗？');

}

传值的核心代码：

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好像是有缓存的。

有什么意见或建议还请各位大神不吝指教～

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