iOS原生APP与H5+JS交互////////////////////zzzz

 原生代码中直接加载页面

1.    具体案例

加载本地/网络HTML5做为功能介绍页

2.    代码示例

//本地

 

-(void)loadLocalPage:(UIWebView*)webView
{
   NSString* htmlPath = [[NSBundle mainBundle]pathForResource:@"demo" ofType:@"html"];
NSString* appHtml =[NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncodingerror:nil];
NSURL *baseURL = [NSURLfileURLWithPath:htmlPath];
 [webView loadHTMLString:appHtmlbaseURL:baseURL];
}

//网络

 

-(void)loadWebPage:(UIWebView *)webView
{
    NSURL *url = [NSURLURLWithString:@"http://www.baidu.com"];
    NSURLRequest *request = [NSURLRequestrequestWithURL:url];
    [webView loadRequest:request];
}

 

3.    额外操做

a  iOS中承载网页的容器是UIWebView，能够借助它的代理来监听网页加载状况；

b  在加载过程当中，咱们还能够获取该网页中的meta值，例如代码：

 

NSString *shareUrl = [messWebViewstringByEvaluatingJavaScriptFromString:@"document.getElementsByName(\"shareUrl\")[0].content"];

就是从meta中获得shareUrl对应的value值；

c  截获当前是发起的那种请求，以便native来作对应的控制，例如代码：

 

- (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest *)requestnavigationType:(UIWebViewNavigationType)navigationType
{
    NSString *requestString = [[[request URL]absoluteString]stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
    if ([requestString hasPrefix:@"http://customersharetrigger"]){
       //执行一些操做
        return NO;
    }
    return YES;
} //能够监听到这个请求，从而达到控制做用；

 

2、  原生代码操做页面元素

1.    具体案例

在嵌入H5后须要操做页面元素

2.    代码示例

a、获取当前页面的url。

 

-(void)webViewDidFinishLoad:(UIWebView *)webView {
  NSString *currentURL = [webView stringByEvaluatingJavaScriptFromString:@"document.location.href"];
}

 

b、获取页面title：

NSString *currentURL = [webViewstringByEvaluatingJavaScriptFromString:@"document.location.href"];

 NSString *title = [webviewstringByEvaluatingJavaScriptFromString:@"document.title"];

 

c、修改界面元素的值。

 

NSString *js_result = [webViewstringByEvaluatingJavaScriptFromString:@"document.getElementsByName('q')[0].value='朱祁林';"];

d、表单提交：

 

NSString *js_result2 =[webView stringByEvaluatingJavaScriptFromString:@"document.forms[0].submit();"];

3.    代码说明

stringByEvaluatingJavaScriptFromString方法能够将javascript代码片断嵌入到页面中，经过这个方法就可让iOS与UIWebView中的网页元素交互，例如上面的代码片断，它

功能很是的强大，用起来也相对简单，经过它咱们能够很方便的操做页面元素，并且能直接插入一段JS方法，而后调用该方法执行；

  

3、  原生代码处理本地H5+JS

1.    具体案例

须要动态显示曲线图，若是直接加载绘制图形特别慢，因此采用本地放置模板，传入参数，而后模板自动绘制，提升体验，加快绘制；

2.    示例代码

 

-(void)loadWebPage:(UIWebView *)webView
{
    NSURL *localPathURL = [[NSBundlemainBundle] URLForResource:@"detail" withExtension:@"html"subdirectory:@"htmlResources"];
    NSString *localPathUrl = [localPathURLabsoluteString];
    NSString *localParamPathUrl = [NSStringstringWithFormat:@"%@?symbol=%@&t=%f",localPathUrl,self.stockCode,self.time];
    NSURL *requestURL = [NSURLURLWithString:localParamPathUrl];
    [webView loadRequest:[NSURLRequestrequestWithURL:requestURL]];

}

 

3.    代码说明

a 这里须要采用绝对路径拖入H5模板，就是选择CreateFolder Reference, 只有这样才能保证H5能调用到本地的JS代码，否则加载不成功，这个最初找了不少缘由，最后才发现是拖入时候选择问题;

b 若是要加入参数，注意须要先转成string，而后再转为URL;

  

4、  原生代码与网页交互通讯

1.    具体案例

原生代码与H5相互调用方法，并传递参数，并且能回调数据；

2.    借助第三方实现

WebViewJavascriptBridge，该开源库很是完美的解决了原生代码与H5交互，即互殴；

3.    代码示例

1.初始化一个webview（viewdidload）

 

UIWebView* webView =[[UIWebView alloc] initWithFrame:self.view.bounds];
    [self.view addSubview:webView];

 

 2.将此webview与WebViewJavascriptBridge关联（viewdidload）

 

 

if (_bridge) { return; }

  [WebViewJavascriptBridge enableLogging];

  _bridge = [WebViewJavascriptBridgebridgeForWebView:webView webViewDelegate:self handler:^(id data,WVJBResponseCallback responseCallback) {
    NSLog(@"ObjC received message from JS:%@", data);

    responseCallback(@"Response formessage from ObjC");
  }];

此时webview就与js搭上桥了。下面就是方法的互调和参数的互传。

 

 （1） js调oc方法（能够经过data给oc方法传值，使用responseCallback将值再返回给js）

 

 

[_bridgeregisterHandler:@"testObjcCallback" handler:^(id data,WVJBResponseCallback responseCallback) {
        NSLog(@"testObjcCallback called:%@", data);
        responseCallback(@"Response fromtestObjcCallback");
    }];

 

  这里注意testObjcCallback这个方法的标示。html那边的命名要跟ios这边相同，才能调到这个方法。固然这个名字能够两边商量着自定义。简单明确便可。

 

  （2）oc调js方法（经过data能够传值，经过 response能够接受js那边的返回值 ）

 

id data = @{@"greetingFromObjC": @"Hi there, JS!" };
    [_bridgecallHandler:@"testJavascriptHandler" data:data responseCallback:^(idresponse) {
        NSLog(@"testJavascriptHandlerresponded: %@", response);
    }];

 

 注意这里的 testJavascriptHandler也是个方法标示。

 

 （3）oc给js传值（经过 response接受返回值 ）

 

 

[_bridge send:@"Astring sent from ObjC to JS" responseCallback:^(id response) {
        NSLog(@"sendMessage got response:%@", response);
    }];

 

  （4）oc给js传值（无返回值）

 

[_bridge send:@"A string sent from ObjC after Webview hasloaded."];

 

5、 总结

关于Native和H5的交互有各类形式，随着H5愈来愈成熟，将来的趋势就是二者如影随行，让App更具灵活性和实效性，也必定程度上提升了开发效率和迭代周期，是企业级移动应用开发的必选解决方案，推荐：IT面试宝典（典型）