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面試寶典（典型）