iOS開発トレンド:NativeとH 5+JSソリューション

iOS開発トレンド:NativeとH 5+JSソリューション
宝のお年玉を支払って火をつけて、微信のお年玉は火をつけて、開発者として、敏感なのは以前よく見られなかったH 5がすでにこっそり浸透していることを発見して、原生(Native)コードの中で一部の機能は動態のホームページ(HTML 5+JavaScript)を採用して実現して、つまり全体のAppの流暢度を保証して、また直ちにいくつかの活動と動態を出すことができます現在、主流のAppはすでにこのような開発モデルを黙認し始めており、未来のモバイル開発チームもH 5のパートナーが参加し、動静の結合を実現し、ページをより柔軟に変化させる必要がある.
 
一、原生コードに直接ページをロードする
1.具体的なケース
機能紹介ページとしてローカル/ネットワークHTML 5をロード
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;
} //         ，        ；

 
二、原生コード操作ページ要素
1.具体的なケース
H 5埋め込み後にページ要素を操作する必要がある
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のWeb要素、例えば上のコードクリップとインタラクティブにすることができます.
機能は非常に強力で、使うのも比較的簡単で、それを通じて私達はとても便利にページの要素を操作することができて、しかも直接1段のJS方法を挿入することができて、それからこの方法を呼び出して実行します;
  
三、原生コード処理ローカルH 5+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ここでは絶対パスを採用してH 5テンプレートをドラッグする必要があります.CreateFolder Referenceを選択することです.そうしないと、H 5がローカルのJSコードを呼び出すことができることを保証できます.そうしないと、ロードが成功しません.これは最初は多くの原因を探していましたが、最後にドラッグ時の選択問題であることに気づきました.
bパラメータを追加する場合は、stringに変換してからURLに変換する必要があることに注意してください.
  
四、原生コードとウェブページのインタラクティブな通信
1.具体的なケース
原生コードとH 5は互いに方法を呼び出し、パラメータを伝達し、データをコールバックすることができる.
2.サードパーティによる実装
WebViewJavascriptBridgeは、このオープンソースライブラリがH 5との相互作用、すなわち殴り合いを完璧に解決しています.
3.コード例
1.webview(viewdidload)を初期化する
 

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

 2.このウェブビューを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."];
 
 

五、まとめ
NativeとH 5のインタラクションについては様々な形式があり、H 5がますます成熟するにつれて、未来のトレンドは両者が影も形もなく離れず、Appをより柔軟性と実効性を持たせ、開発効率と反復周期をある程度向上させ、企業レベルのモバイルアプリケーション開発の必須解決策であり、推薦:IT面接宝典(典型)である.
変換元:http://www.myexception.cn/operating-system/1977272.html
(ps:個人的にはやはりh 5というもののインタラクティブな体験が悪すぎて、原生より時間で空間を変えるような感じですが、個人的には好きではありませんが、いつも需要があっても問題ではありません..so)