Mobile Platform as a Service:カスタム JSAPI

HTML5 コンテナーコンポーネントは、次の機能を提供します：

• ページプッシュ、ページポップ、タイトル設定などの機能を実装するための豊富な組み込み JSAPI セット。 詳細については、「組み込み JSAPI」をご参照ください。

• 拡張的なビジネス要件を満たすためのカスタム JSAPI とプラグインのサポート。

このトピックでは、カスタム JSAPI とプラグインを実装する方法について説明します。

このタスクについて

カスタム JSAPI プラグインには、次の特徴があります：

• HTML5 コンテナーは、外部サービスがプラグイン構成を登録するためのメカニズムを提供します。 これにより、さまざまなサービスがより高い柔軟性で HTML5 コンテナーと統合できます。

• サービスはこのメソッドを使用して、カスタムの外部プラグインを登録できます。 コードは HTML5 コンテナーを含めずに、独自のバンドルに配置できます。 プラグインがプラグイン構成を使用して登録されると、HTML5 コンテナーはオブジェクトをすぐに生成するのではなく、ページがそれを呼び出すときにのみオブジェクトを初期化します。

• プラグインの実装と登録は、依存関係のデカップリングを実現するために、異なるバンドルに配置できます。 H5Service を使用して、プラグインをコンテナーに動的に注入できます。

フロントエンドページからの Native の呼び出し

フロントエンドページから Native を呼び出すには、次の手順に従ってクライアントとフロントエンドコードを構成します。

1. MPNebula の JSAPI 登録インターフェイスを使用して JSAPI を登録します。

   説明

   MyJSApiPlugin のソースコードを表示するには、「コード例」をご参照ください。

   • JSAPI 登録インターフェイスは次のとおりです：

     /**
     * カスタム HTML5 プラグイン (JSAPI) を登録します。
     *
     * @param className プラグインのクラス名。 完全なパス (パッケージ + クラス) が必要です。
     * @param bundleName バンドル名。 バンドル名は、メインモジュール/build/intermediates/bundle/META-INF/BUNDLE.MF ファイルで確認できます。 プラグインがポータルプロジェクトで記述されている場合は、bundleName を空の文字列 ("") に設定します。
     * @param scope スコープ。 デフォルト値： page。
     * @param events 登録するイベント。
     */
     public static void registerH5Plugin(String className, String bundleName, String scope, String[] events)

   • 次のコードは登録の例です：

     MPNebula.registerH5Plugin(
       MyJSApiPlugin.class.getName(),
       BuildConfig.BUNDLE_NAME,
       "page",
       new String[]{"myapi1","myapi2",H5Plugin.CommonEvents.H5_PAGE_SHOULD_LOAD_URL}
     );

2. フロントエンドの呼び出し。

   カスタム JSAPI へのフロントエンド呼び出しを行うには、`event` パラメーターをプラグインが登録したイベントに変更します。 プラグインは event.getParam() を使用して JS から渡された値を取得し、データを解析します。

   AlipayJSBridge.call('myapi2', {
    param2: 'World'
   },
   function(result) {
    console.log(result);
   });

Native からのフロントエンドページの呼び出し

Native は HTML5 コンテナーからフロントエンドページを呼び出すこともできます。 たとえば、ネットワーク変更 JSAPI の場合、ページはイベントをリッスンします。 必要なフロントエンドとクライアントのコードは次のとおりです：

1. フロントエンドにリスナーを登録します。

   document.addEventListener('h5NetworkChange',
   function(e) {
    alert("ネットワーク環境が変更されました。 getNetworkType API を呼び出して詳細を取得できます。");
   },
   false);

2. クライアントがネットワークの変更を検出すると、呼び出しイベントをページに送信します。

   JSONObject param = new JSONObject();
   // param にカスタムパラメーターを設定します。
   param.put("data", param);
   H5Page h5Page = h5Service.getTopH5Page();
   if (h5Page != null) {
    h5Page.getBridge().sendDataWarpToWeb("h5NetworkChange", param, null);
   }

Inspect の使用

Chrome inspect ツールを使用して、カスタム JSAPI への呼び出しが有効かどうかを確認できます：

1. 携帯電話をコンピューターに接続します。 コンピューターで Chrome ブラウザを開き、chrome://inspect と入力してデバッグページに移動します。

2. mPaaS デモで、Ant Financial ホームページを開きます。 次の図に示すように、Chrome inspect ページが表示されます：

   説明

   コンピューターで chrome://inspect を開いたときに空白の画面が表示される場合は、Chrome を最新バージョンにアップグレードしてください。

   

3. 図の [inspect] をクリックします。 次のページが表示されます：

   

4. ページのツールバーで [Console] をクリックして、ページデバッグモードに入ります。 その後、図に示すように、カスタム API 操作を呼び出すことができます。

関連リンク

• コード例

• よくある質問