WebViewJavascriptBridgeを使用してOCとJSのインタラクションを実現

3767 ワード

現在、多くのアプリにはHTML 5ページがありますが、簡単にWebViewで表示をロードするほか、WebView上のボタンをクリックしてOC側の関数を呼び出して具体的な操作を実現するなど、WebViewとインタラクティブにする必要があります.
そこで今日は、今日の主役であるWebViewJavascriptBridgeを紹介します.それは主に私たちの優雅なOCとJSの相互作用を実現することを助けて、とても便利で簡潔です.
もちろん、WebViewJavascriptBridgeの使用には実現原理が含まれており、まず感謝と敬意を表す優れた開発者がたくさんいます.しかし、初心者や機能の実現を急いでいる人にとって、ほとんどの場合、テーマに直行する文章を望んでいます.したがって,本稿の核心はWebViewJavascriptBridgeの実際の開発における使用である.
手順を使用してGithubにWebJavaScriptBridge解凍パッケージをダウンロードし、WebViewJavascriptBridgeフォルダをプロジェクトにドラッグします.
962036-d0cc63546084da33.jpegは、WebViewJavascriptBridgeを使用するクラスファイルにヘッダファイルWebViewJavascriptBridgeを導入する.h UIWebViewをロードし、プロトコルの具体的な使用に従ってWebJavaScriptBridgeインスタンスを作成して初期化する
import "ExampleUIWebViewController.h"
import "WebViewJavascriptBridge.h"
@interface ExampleUIWebViewControl()/宣言WebViewJavascriptBridgeオブジェクトが属性@property WebViewJavascriptBridge*bridge;
@end

  - (void)viewWillAppear:(BOOL)animated {

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

 //         
    [WebViewJavascriptBridge enableLogging];
 //    *WebViewJavascriptBridge*  ,    ,    
   _bridge = [WebViewJavascriptBridge bridgeForWebView:webView webViewDelegate:self handler:^(id         data, WVJBResponseCallback responseCallback) {

NSLog(@"ObjC received message from JS: %@", data); responseCallback(@"Response for message from ObjC"); }];
}JS呼び出しOC JS呼び出しOCとは何ですか?例えば、Webページにログインボタンがあり、ログインボタンをクリックすると、具体的なログイン機能はOC側で実現されます.つまり、ログイン機能の実現には、プロジェクトにloginMethodのような関数が必要です.ワークフローステーションは実際の開発の観点から説明しているが,現在ウェブページがある場合,ウェブページにログインボタンがある場合はJS調OCで実現する必要がある.では、まず、ページのエンコードを担当する人(一般的にバックグラウンド)と方法名を協議する必要があります.つまり、このログインボタンのクリックイベントにloginCallBackという名前を付ける必要があります.次に、コードにこのイベントを登録し、その具体的な実装を担当する必要があります.ユーザーがこのログインボタンをクリックすると、バックグラウンドはこのイベントの登録者に実行を通知し、blockの実行順序に似ています.コード実装イベント名がloginFuncである場合、コード実装を見てみましょう./***/@param registerHandler登録するイベント名(ここではloginFunc)/@param handelコールバックblock関数バックグラウンドでこのイベントがトリガーされるとblock内のコード**/[_bridgeregisterHandler:@"loginFunc"handler:^(id data,WVJBResponseCallback responseCallback){//dataバックグラウンドから渡されるパラメータ、例えばユーザー名、パスワードなど
NSLog(@"testObjcCallback called: %@", data);

 //          ,   login           OC  。
            [self login];   

 // responseCallback           

    responseCallback(@"Response from testObjcCallback");
  }];

OC呼び出しJS OC呼び出しJSとは、JS呼び出しOCを理解している場合は、OC呼び出しJSはほとんど理解できないはずです.同じ例を挙げると、私たちのオリジナルアプリには入力ボックスがあり、入力が完了したら、ページの上のユーザー名に表示させます.このように、私たちはOCが実現しなければならないイベントであり、Webページを実際に実現させます.つまり、OCがJSを呼び出します.JSがOCを呼び出す流れとほぼ同じで、やはりホームページの作成者とイベント名を協議して、それからホームページの中でまずこのようなイベントを登録して実装体を書く必要があります.OCがこのイベントをトリガーするまで(ボタンをクリックするなど)、ホームページの中でこのイベントの実装体を見つけて実行します.コード実装もし私たちが今登録イベントを協議したら、イベント名はregisterFuncで、私たちはコード実装//パラメータを送信する必要はなく、バックグラウンドで実行結果を返す必要はありません[_bridgecallHandler:@"registerFunc"];

//     ,            
  /***
   @param callHandler        ,               
   @param data id  ,           ,              
 ***/

 [_bridge callHandler:@"registerFunc" data:@"name"];

//     ,           

 [_bridge callHandler:@"registerFunc" data:@"name" responseCallback:^(id responseData) {

    NSLog(@"            ");

  }];

メッセージを送信するには、単純にJSにデータを送信することができます.例えば、Webページのロードが完了した後、Webページにロードが完了したメッセージを送信したり、タイトルを送信したりすることができます.
コード実装
//バックグラウンドで実行結果やデータを返す必要はありません[_bridgesend:@「赤」];
//実行結果またはデータをバックグラウンドで返す必要があります[_bridgesend:@"赤"responseCallback:^(id responseData){

  NSLog(@"             %@", responseData);

 }];

注意点ページ側と協議する方法名はOCコードとページコードの統一を保証しなければならないことに注意してください.呼び出す前に、イベントを登録し、インプリメンテーションを書く必要があります.

easyuiベースの検証拡張

archetypeを使用してmaven足場と新しいプロジェクトを作成