HTML5 コンテナーは豊富な拡張機能を提供します。ユーザーがより多くのシナリオで HTML5 コンテナーを簡単に使用できるように、このトピックでは、HTML5 コンテナーの拡張機能を例を挙げて紹介します。
H5Plugin で Activity の結果を取得する
顔認識やコード認識など、多くのシーンで、新しい Activity を開始して、Activity から返された結果を取得する必要があります。ただし、このようなシナリオでは、JSAPI は H5Activity を書き換えることによって直接結果を取得することはできません。そのため、HTML5 コンテナーを使用する場合は、次の方法で Activity から返された結果を取得する必要があります。
カスタム H5Plugin で、
OnH5ActivityResultコールバックを登録します。コードサンプルは次のとおりです。H5ActivityResultManager.getInstance().put(onH5ActivityResult);説明putメソッドは重複登録をチェックしません。開発者は重複登録を自分で防ぐ必要があります。登録後、
removeメソッドを呼び出してコールバックを削除する必要があります。通常、H5Plugin のonReleaseメソッドでコールバックを削除することをお勧めします。コードサンプルは次のとおりです。
H5ActivityResultManager.getInstance().remove(onH5ActivityResult);startActivityForResultメソッドを使用してターゲットActivityを開始します。たとえば、カスタムH5PluginhandleEvent メソッドでアクティビティを開始できます。コードサンプルは次のとおりです。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="zh-cn"> <head> <meta charset="utf-8" /> <title>カスタムエラー</title> </head> <body> <p>これはカスタムエラーページです</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());説明mPaaS ベースライン 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);
}半透明のステータスバーを有効にする
この機能は、mPaaS ベースライン 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 コアで使用されるアノテーションクラスは異なります。これら 2 つのアノテーションクラスとの互換性を確保する必要があります。
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>
H5 コンテナーの JSAPI のブラックリストを構成する
JSAPI のブラックリストを構成して、指定されたドメイン名の JSAPI への呼び出し権限を制御します。手順は次のとおりです。
H5JSApiPermissionProviderクラスを継承し、hasDomainPermissionメソッドをオーバーライドします。hasDomainPermissionメソッドの 2 つの入力パラメーターは、actionとurlです。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 に従って、現在のアクションを実行する権限があるかどうかを判断できます。 // アクションは定義済みの 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());