HTML5 コンテナーコンポーネントは多くの拡張機能を提供します。このドキュメントでは、さまざまなシナリオでこれらの機能を使用する方法を説明します。
H5Plugin でアクティビティから返された結果の取得
顔のスキャンや認識などのシナリオでは、結果を取得するために新しいアクティビティを開始する必要があります。このような場合、JavaScript Application Programming Interface (JSAPI) は `H5Activity` をオーバーライドしても結果を取得できません。HTML5 コンテナーを使用する際にアクティビティから結果を取得するには、次の手順に従います。
カスタム H5Plugin で、
OnH5ActivityResultコールバックを登録します。次のコードは例です。H5ActivityResultManager.getInstance().put(onH5ActivityResult);説明putメソッドは重複登録をチェックしません。重複登録を避ける必要があります。使用後、
removeメソッドを呼び出してコールバックを削除します。コールバックは H5Plugin のonReleaseメソッドで削除できます。次のコードは例です。
H5ActivityResultManager.getInstance().remove(onH5ActivityResult);startActivityForResultを使用して宛先のアクティビティを開始します。これは、カスタムH5PluginのhandleEventメソッドで開始できます。次のコードは例です。public boolean handleEvent(H5Event event, H5BridgeContext context) { if ("CustomJSAPI".equals(event.getAction())) { if (event.getActivity()!=null){ Intent intent = new Intent(event.getActivity(), yourDestinationActivity.class); event.getActivity().startActivityForResult(intent,requestCode,bundle); } return true; } return false; }説明コールバックは `H5Activity` の結果に対してのみ実行されます。
OnH5ActivityResultコールバックメソッドで、H5BridgeContextオブジェクトを介して結果をフロントエンドに渡します。public interface OnH5ActivityResult { void onGetResult(int requestCode, int resultCode, Intent intent); }
HTML5 エラーページのカスタマイズ
HTML5 エラーページをカスタマイズするには、次の手順に従います。
HTML 形式でカスタムエラーページを作成します。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" /> <meta name="format-detection" content="telephone=no" /> <title>Custom Error</title> </head> <body> <p>This is a custom error page</p> </body> </html>H5ErrorPageViewを実装します。APWebViewで、作成したエラーページを設定します。public class H5ErrorPageViewImpl implements H5ErrorPageView { @Override public boolean enableShowErrorPage() { // true はカスタムエラーページが有効であることを示します。 return true; } @Override public void errorPageCallback(H5Page h5Page, APWebView view, String errorUrl, int statusCode, String errorMsg, String subErrorMsg) { // エラーページの HTML を取得します。このデモでは raw ディレクトリに配置されていますが、他の場所に配置することもできます。 String html = H5ResourceManager.readRawFromResource(R.raw.custom_error, LauncherApplicationAgent.getInstance().getApplicationContext().getResources()); // WebView のエラーページを設定します。 view.loadDataWithBaseURL(errorUrl, html, "text/html", "utf-8", errorUrl); } }H5ErrorPageViewを登録します。HTML5 コンテナーを開く前に、カスタムのH5ErrorPageViewをコンテナーに登録します。H5Utils.setProvider(H5ErrorPageView.class.getName(),new H5ErrorPageViewImpl());
ベースライン 10.1.68.7 以降では、新しい MPH5ErrorPageView がサポートされています。メソッド名と使用方法は H5ErrorPageView と同じですが、メソッドのパラメーターが拡張されています。
/**
* カスタムネットワークエラーページのインターフェイス
*/
public interface MPH5ErrorPageView {
/**
* @param h5Page ページオブジェクト
* @param view WebView オブジェクト
* @param errorUrl エラー URL
* @param statusCode エラーコード
* @param errorMsg エラーの説明
* @param subErrorMsg サブエラーの説明
* @param extInfo 拡張情報。空でないか確認してください。
* @param extObj 拡張クラス。空でないか確認してください。
* @return true はカスタムページを表示する必要があることを示し、以下の errorPageCallback メソッドが呼び出されます。
*/
boolean enableShowErrorPage(H5Page h5Page, APWebView view, String errorUrl, int statusCode, String errorMsg, String subErrorMsg, Bundle extInfo, Object extObj);
/**
* @param h5Page ページオブジェクト
* @param view WebView オブジェクト
* @param errorUrl エラー URL
* @param statusCode エラーコード
* @param errorMsg エラーの説明
* @param subErrorMsg サブエラーの説明
* @param extInfo 拡張情報。空でないか確認してください。
* @param extObj 拡張クラス。空でないか確認してください。
*/
void errorPageCallback(H5Page h5Page, APWebView view, String errorUrl, int statusCode, String errorMsg, String subErrorMsg, Bundle extInfo, Object extObj);
}没入型ステータスバーの有効化
没入型ステータスバーを有効にするには、次の手順に従います。
この機能は、ベースラインバージョン 10.1.60 以降でのみサポートされています。
このメソッドは、HTML5 コンテナーが開くすべての HTML5 ページのステータスバーの色を設定します。ステータスバーの色に関するより複雑な要件がある場合は、HTML5 コンテナーのカスタムタイトルバーを実装できます。
ステータスバーの色は、コンテナーのタイトルバーインターフェイスの
openTranslucentStatusBarSupportメソッドまたは他の場所で設定できます。
HTML5 コンテナー設定で
TSBSを有効にします。組み込みのタイトルバーを使用する場合は、
H5TransStatusBarColorProviderインターフェイスを実装します。次に、H5Utils.setProviderメソッドを使用して、HTML5 コンテナーのインスタンスを設定します。次のコードは例です。package com.mpaas.demo.nebula; import android.graphics.Color; import com.alipay.mobile.nebula.provider.H5TransStatusBarColorProvider; public class H5TransStatusBarColorProviderImpl implements H5TransStatusBarColorProvider { @Override public int getColor() { return Color.argb(70, 255, 255, 255); } }
サードパーティの JavaScriptInterface の追加
サードパーティのページを統合する場合、JavaScriptInterface を使用する必要がある場合があります。このシナリオをサポートするには、次の手順に従います。
サードパーティのページ読み込みイベントをインターセプトするプラグインを実装します。
WebView を取得し、JavaScript オブジェクトをインジェクトします。
次のコードは例です。
package com.mpaas.demo.nebula;
import android.text.TextUtils;
import com.alibaba.fastjson.JSONObject;
import com.alipay.mobile.h5container.api.H5BridgeContext;
import com.alipay.mobile.h5container.api.H5Event;
import com.alipay.mobile.h5container.api.H5EventFilter;
import com.alipay.mobile.h5container.api.H5Param;
import com.alipay.mobile.h5container.api.H5SimplePlugin;
public class TechFinSitePlugin extends H5SimplePlugin {
@Override
public void onPrepare(H5EventFilter filter) {
super.onPrepare(filter);
filter.addAction(CommonEvents.H5_PAGE_SHOULD_LOAD_URL);
}
@Override
public boolean interceptEvent(H5Event event, H5BridgeContext context) {
String action = event.getAction();
if (CommonEvents.H5_PAGE_SHOULD_LOAD_URL.equals(action)) {
JSONObject params = event.getParam();
String url = params.getString(H5Param.LONG_URL);
if (!TextUtils.isEmpty(url) && url.contains("tech.antfin.com")) {
event.getH5page().getWebView().addJavascriptInterface(new TechFinJavaScriptInterface(), "techFinBridge");
}
}
return false;
}
}interceptEvent メソッドで true を返さないでください。そうしないと、コンテナーはページを読み込めなくなります。
package com.mpaas.demo.nebula;
import android.webkit.JavascriptInterface;
public class TechFinJavaScriptInterface {
@JavascriptInterface
@com.uc.webview.export.JavascriptInterface
public String whoAmI() {
return "It is tech fin.";
}
}システムカーネルと UC カーネルでは、使用するアノテーションクラスが異なります。両方のアノテーションクラスとの互換性を確保する必要があります。
HTML5 コンテナーへのトランジションアニメーションの追加
HTML5 コンテナーにトランジションアニメーションを追加するには、アニメーションリソースをプロジェクトの res/anim フォルダに追加します。次の手順に従います。
プロジェクトの
resフォルダに、animフォルダを作成します。フォルダが既に存在する場合は、このステップをスキップできます。アニメーションリソースファイルを
animフォルダに追加します。HTML5 コンテナーは、ファイル名に基づいてリソースファイルを自動的に検出します。ファイル名はh5_slide_out_right.xml、h5_slide_out_left.xml、h5_slide_in_right.xml、またはh5_slide_in_left.xmlである必要があります。次の例を使用して、独自のリソースファイルを作成できます。h5_slide_out_right.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromXDelta="0%" android:toXDelta="100%" android:duration="300" /> </set>h5_slide_out_left.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromXDelta="0%" android:toXDelta="-100%" android:duration="300" /> </set>h5_slide_in_right.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromXDelta="100%" android:toXDelta="0" android:duration="300" /> </set>h5_slide_in_left.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromXDelta="-100%" android:toXDelta="0%" android:duration="300" /> </set>
HTML5 コンテナー JSAPI のブラックリストの設定
特定のドメイン名がコンテナー JSAPI を呼び出す際の権限を制御するために、ブラックリストを設定できます。次の手順に従います。
H5JSApiPermissionProviderクラスを継承し、hasDomainPermissionメソッドをオーバーライドします。hasDomainPermissionメソッドには、actionとurlの 2 つの入力パラメーターがあります。actionパラメーターはカスタム JSAPI のイベント名です。urlパラメーターは現在のページのドメイン名です。このメソッドはboolean値を返します。値がtrueの場合はイベントを処理できることを示します。値がfalseの場合はイベントを処理する権限がないことを示します。参考として、次のコード例をご参照ください。public class H5JSApiPermissionProviderImpl implements H5JSApiPermissionProvider { private static final List blackList = new ArrayList<String>(); static { // ブラックリスト内の URL は JSAPI イベントを実行する権限がありません。 blackList.add("https://mcube-prod.cn-hangzhou.oss.aliyuncs.com/ONEX4B905F1032156-MUAT/20210728/0.0.0.1_all/nebula/fallback/www/index.html"); } @override public boolean hasDomainPermission(String action, String url) { // アクション名と URL に基づいて、現在のアクションを実行する権限があるかどうかを判断できます。 // action は定義された JSAPI イベントです。イベントを処理できる場合は true を返します。イベントを処理する権限がない場合は false を返します。 if (blackList.contains(url)) { return false; } return true; } @override public boolean hasThisPermission(String permission, String url) { return true; } }フレームワークが初期化された後、
Providerを設定します。H5Utils.setProvider(H5JSApiPermissionProvider.class.getName(), new H5JSApiPermissionProviderImpl());