Native與H5互動的一些解決方案，NativeH5解決方案

Native與H5互動的一些解決方案，NativeH5解決方案
一、 原生代碼中直接載入頁面1.    具體案例

載入本地/網路HTML5作為功能介紹頁

2.    程式碼範例

//本地

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

 

//網路

 -(void)loadWebPage:(UIWebView *)webView  

1. {  
2. NSURL *url = [NSURLURLWithString:@"http://www.baidu.com"];  
3. NSURLRequest *request = [NSURLRequestrequestWithURL:url];  
4.     [webView loadRequest:request];  
5. }  

 

 

3.    額外操作

a  iOS中承載網頁的容器是UIWebView，可以藉助它的代理來監聽網頁載入情況；

b  在載入過程中，我們還可以擷取該網頁中的meta值，例如代碼：

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

 

就是從meta中得到shareUrl對應的value值；

c  截獲當前是發起的那種請求，以便native來做對應的控制，例如代碼：

1. - (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest *)requestnavigationType:(UIWebViewNavigationType)navigationType  
2. {  
3.     NSString *requestString = [[[request URL]absoluteString]stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];  
4.     if ([requestString hasPrefix:@"http://customersharetrigger"]){  
5.        //執行一些操作  
6.         return NO;  
7.     }  
8.     return YES;  
9. } //可以監聽到這個請求，從而達到控製作用；  

 

 

二、  原生代碼操作頁面元素1.    具體案例

在嵌入H5後需要操作頁面元素

2.    程式碼範例

a、擷取當前頁面的url。

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

 

 

b、擷取頁面title：

1. NSString *currentURL = [webViewstringByEvaluatingJavaScriptFromString:@"document.location.href"];  
2.   
3.  NSString *title = [webviewstringByEvaluatingJavaScriptFromString:@"document.title"];  

 

c、修改介面元素的值。

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

d、表單提交：

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

3.    代碼說明

stringByEvaluatingJavaScriptFromString方法可以將javascript程式碼片段嵌入到頁面中，通過這個方法就可以讓iOS與UIWebView中的網頁元素互動，例如上面的程式碼片段，它

功能非常的強大，用起來也相對簡單，通過它我們可以很方便的操作頁面元素，而且能直接插入一段JS方法，然後調用該方法執行；

  

三、  原生代碼處理本地H5+JS1.    具體案例

需要動態顯示曲線圖，如果直接載入繪製圖形特別慢，所以採用本地放置模板，傳入參數，然後模板自動繪製，提高體驗，加快繪製；

2.    範例程式碼

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

 

 

3.    代碼說明

a 這裡需要採用絕對路徑拖入H5模板，就是選擇CreateFolder Reference, 只有這樣才能保證H5能調用到本地的JS代碼，不然載入不成功，這個最初找了很多原因，最後才發現是拖入時候選擇問題;

b 如果要加入參數，注意需要先轉成string，然後再轉為URL;

  

四、  原生代碼與網頁互動通訊1.    具體案例

原生代碼與H5相互調用方法，並傳遞參數，而且能回調資料；

2.    藉助第三方實現

WebViewJavascriptBridge，該開源庫非常完美的解決了原生代碼與H5互動，即互毆；

3.    程式碼範例

1.初始化一個webview（viewdidload）

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

 

 

 2.將此webview與WebViewJavascriptBridge關聯（viewdidload）

1. if (_bridge) { return; }  
2.    
3.   [WebViewJavascriptBridge enableLogging];  
4.    
5.   _bridge = [WebViewJavascriptBridgebridgeForWebView:webView webViewDelegate:self handler:^(id data,WVJBResponseCallback responseCallback) {  
6.     NSLog(@"ObjC received message from JS:%@", data);  
7.      
8.     responseCallback(@"Response formessage from ObjC");  
9.   }];  

 

此時webview就與js搭上橋了。下面就是方法的互調和參數的互傳。

 

 （1） js調oc方法（可以通過data給oc方法傳值，使用responseCallback將值再返回給js）

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

 

 

  這裡注意testObjcCallback這個方法的標示。html那邊的命名要跟ios這邊相同，才能調到這個方法。當然這個名字可以兩邊商量著自訂。簡單明確即可。

 

  （2）oc調js方法（通過data可以傳值，通過 response可以接受js那邊的傳回值 ）

 

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

 

 

 注意這裡的 testJavascriptHandler也是個方法標示。

 

 （3）oc給js傳值（通過 response接受傳回值 ）

 

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

 

 

  （4）oc給js傳值（無傳回值）

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

 五、 總結

關於Native和H5的互動有各種形式，隨著H5越來越成熟，未來的趨勢就是兩者形影不離，讓App更具靈活性和實效性，也一定程度上提高了開發效率和迭代周期，是企業級行動裝置 App開發的必選解決方案。