カスタム JSAPI - Mobile Platform as a Service - Alibaba Cloud ドキュメントセンター

ページでネイティブ関数を呼び出すには（たとえば、ActionSheet または連絡先ダイアログボックスを表示するには）、JavaScript API（JSAPI）を拡張する必要があります。JSAPI を使用すると、HTML5 ページでネイティブ関数を呼び出すためのエントリを追加できます。特定の関数は、カスタム JSAPI クラスでハンドラメソッドを実装することにより、ネイティブモードで実装されます。

HTML5 コンテナーコンポーネントには、次の機能があります。

プッシュ、ポップ、タイトル設定などの関数を実装するための豊富な組み込み JSAPI を提供します。詳細については、「組み込み JSAPI」をご参照ください。
ビジネスの拡張ニーズに合わせて、JavaScript API（JSAPI）とプラグインをカスタマイズできます。

このトピックでは、「HTML5 コンテナーおよびオフラインパッケージ」のデモを使用して、HTML5 ページの読み込み時にナビゲーションバーを変更するプラグインをカスタマイズする方法について説明します。

このタスクについて

JSAPI は、次の 2 つの方法でカスタマイズできます。

Plist 登録
コード登録

手順

Plist 登録

JSAPI クラスを作成します。

命名形式: デフォルトでコンテナーによって提供されるプラグインの名前との一貫性を保つために、作成される JSAPI 名は XXJsApiHandler4 で始まります。ここで、XX はカスタムプレフィックスです。
基底クラス: すべての JSAPI は PSDJsApiHandler から派生します。
基本メソッド: .m ファイルの -(void)handler:context:callback: メソッドを書き直します。この JSAPI がフロントエンドで呼び出されると、呼び出しリクエストはこのメソッドに転送されます。

このメソッドのパラメーターについて、以下に説明します。

名前	説明
`data`	HTML5 ページがこの JSAPI を呼び出すときに渡されるパラメーター。
`context`	現在の HTML5 ページのコンテキスト。詳細は、`PSDContext.h` を参照してください。
`callback`	JSAPI 呼び出しが完了した後のコールバックメソッド。このメソッドは、呼び出し結果として辞書を HTML5 ページに返します。

次のコード例を参照してください。

   #import <NebulaPoseidon/NebulaPoseidon.h>
   @interface MPJsApiHandler4OpenSms : PSDJsApiHandler
   @end
   @implementation MPJsApiHandler4OpenSms
   - (void)handler:(NSDictionary *)data context:(PSDContext *)context callback:(PSDJsApiResponseCallbackBlock)callback
   {
   [super handler:data context:context callback:callback];
   // SMS を開きます。
   NSURL *url = [NSURL URLWithString:@"sms://xxx"];
   BOOL reasult = [[UIApplication sharedApplication] openURL:url];
   callback(@{@"success":@(reasult)});
   }
   @end

JSAPI を登録します。この JSAPI をカスタム Plist ファイルに登録します。

カスタム JSAPI とプラグインを一元管理するための PLIST ファイルを作成します。テンプレートファイル DemoCustomPlugins.bundle.zip をダウンロードし、このファイルをプロジェクトに追加できます。
JsApis 配列で、前の手順で作成した JSAPI クラスを登録します。

登録された JSAPI は辞書型で、2 つの項目が含まれています。

パラメーター	説明
jsApi	HTML5 ページで呼び出される JSAPI の名前。説明カスタム JSAPI 名にプレフィックスを付けて、コンテナーの組み込み JSAPI と区別します。これは、カスタム JSAPI と組み込み JSAPI の相互作用による使用不可を回避するためです。
name	作成された JSAPI クラスの名前。

コンテナー構成の初期化中に、カスタム PLIST ファイルのパスを指定します。

HTML5 コンテナーを初期化します。「HTML5 コンテナーのクイックスタート」を参照してください。次のコード例を参照してください。

   - (void)application:(UIApplication *)application beforeDidFinishLaunchingWithOptions:(NSDictionary *)launchOptions
   {
       // コンテナーを初期化します。
       //    [MPNebulaAdapterInterface initNebula];

       // JSAPI パスとプリセットオフラインパッケージ情報を指定します。
       NSString *presetApplistPath = [[NSBundle mainBundle] pathForResource:[NSString stringWithFormat:@"DemoCustomPresetApps.bundle/h5_json.json"] ofType:nil];
       NSString *appPackagePath = [[NSBundle mainBundle] pathForResource:[NSString stringWithFormat:@"DemoCustomPresetApps.bundle"] ofType:nil];
       NSString *pluginsJsapisPath = [[NSBundle mainBundle] pathForResource:[NSString stringWithFormat:@"DemoCustomPlugins.bundle/Poseidon-UserDefine-Extra-Config.plist"] ofType:nil];
       [MPNebulaAdapterInterface initNebulaWithCustomPresetApplistPath:presetApplistPath customPresetAppPackagePath:appPackagePath customPluginsJsapisPath:pluginsJsapisPath]
  }

コード登録

Plist を使用して JSAPI をカスタマイズするだけでなく、Nebula コンテナーによって提供されるインターフェースメソッドを呼び出すことによって、カスタム JSAPI を登録することもできます。

プラグインを作成します。「プラグインのカスタマイズ」をご参照ください。

プラグインで addJSApis メソッドを実装します。

 - (void)addJSApis
 {
     [super addJSApis];

     // コードで JSAPI を登録します。
     PSDJsApi *jsApi4DemoTest2 = [PSDJsApi jsApi:@"demoTest2"
                                           handler:^(NSDictionary *data, PSDContext *context, PSDJsApiResponseCallbackBlock responseCallbackBlock) {
                                               responseCallbackBlock(@{@"result":@"jsapi-demoTest2 ネイティブ呼び出しの結果"});
                                           }
                                       checkParams:NO
                                         isPrivate:NO
                                             scope:self.scope];
     [self registerJsApi2Target:jsApi4DemoTest2];
 }

次の表に、登録に必要なパラメーターを示します。

パラメーター	説明
jsApi	HTML5 ページで呼び出される JSAPI の名前。
handler	JSAPI ハンドラ関数。PLIST 登録モードのハンドラメソッドと同じです。
checkParams	パラメーターを確認するかどうかを指定します。このパラメーターを NO に設定します。
isPrivate	JSAPI が非公開の JSAPI かどうかを指定します。このパラメーターを NO に設定します。
scope	操作のスコープ。このパラメーターを self.scope に設定します。

詳細については、コード例の MPPlugin4TitleView クラスの実装を参照してください。

次の手順

HTML5 ページでカスタム JSAPI を呼び出します。
ハンドラメソッドにブレークポイントを追加し、HTML5 ページによって提供されるパラメーターが期待どおりであるかどうかを確認します。
HTML5 ページによって返される結果が期待どおりであるかどうかを確認します。