全部产品
云市场
云游戏

扩展 H5 容器

更新时间:2020-09-10 17:25:43

H5Plugin 获取 Activity Result

在如刷脸、识别等许多场景中,都需要启动一个新的 Activity 以获取 Activity 返回的结果,但是在这种场景中,JSAPI 无法直接通过重写 H5Activity 来获取结果。因此在使用 H5 容器时,您需要通过以下方式来获取提 Activity 返回的结果:

  1. 在自定义的 H5Plugin 中注册 OnH5ActivityResult 回调,示例如下:
    1. H5ActivityResultManager.getInstance().put(onH5ActivityResult);
    说明
    • put 方法不检查重复注册,开发者需自己处理防止重复注册。
    • 使用后,需要调用 remove 方法移除回调,一般建议在 H5Plugin 的 onRelease 方法中移除回调,示例如下:
    1. H5ActivityResultManager.getInstance().remove(onH5ActivityResult);
  2. startActivityForResult 的方式启动目的 Activity,如可以在自定义的 H5Plugin 的handleEvent方法中启动,示例如下:
    1. public boolean handleEvent(H5Event event, H5BridgeContext context) {
    2. if ("CustomJSAPI".equals(event.getAction())) {
    3. if (event.getActivity()!=null){
    4. Intent intent = new Intent(event.getActivity(), yourDestinationActivity.class);
    5. event.getActivity().startActivityForResult(intent,requestCode,bundle);
    6. }
    7. return true;
    8. }
    9. return false;
    10. }
    说明:仅对 H5Activity 的 result 进行 callback 回调。
  3. OnH5ActivityResult 的回调方法中,将结果通过 H5BridgeContext 对象传递给前端。
    1. public interface OnH5ActivityResult {
    2. void onGetResult(int requestCode, int resultCode, Intent intent);
    3. }

自定义 H5 错误页

当您需要自定义 H5 错误页的时候,请按照以下步骤进行操作。

  1. 新建一个 html 格式的自定义错误页。

    1. <!doctype html>
    2. <html lang="zh-cn">
    3. <head>
    4. <meta charset="utf-8" />
    5. <meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    6. <meta name="format-detection" content="telephone=no" />
    7. <title>自定义错误</title>
    8. </head>
    9. <body>
    10. <p>这个页面是一个自定义错误页</p>
    11. </body>
    12. </html>
  2. 实现 H5ErrorPageView。在 APWebView 中设置刚才创建的错误页。
    1. public class H5ErrorPageViewImpl implements H5ErrorPageView {
    2. @Override
    3. public boolean enableShowErrorPage() {
    4. // true 表示启动自定义错误页
    5. return true;
    6. }
    7. @Override
    8. public void errorPageCallback(H5Page h5Page, APWebView view, String errorUrl, int statusCode, String errorMsg, String subErrorMsg) {
    9. // 获取错误页的 html,demo 中放到了 raw 中,也可以放在其他地方
    10. String html = H5ResourceManager.readRawFromResource(R.raw.custom_error, LauncherApplicationAgent.getInstance().getApplicationContext().getResources());
    11. // 将错误页设置给 webview
    12. view.loadDataWithBaseURL(errorUrl, html, "text/html", "utf-8", errorUrl);
    13. }
    14. }
  3. 注册 H5ErrorPageView。在打开 H5 容器之前,将自定义的 H5ErrorPageView 注册给容器。
    1. H5Utils.setProvider(H5ErrorPageView.class.getName(),new H5ErrorPageViewImpl());

说明:10.1.68.7 及以上版本的基线支持了新的 MPH5ErrorPageView ,方法名、使用方式和 H5ErrorPageView 一致,但方法参数有扩展。

  1. /**
  2. * 自定义网络错误页面接口
  3. */
  4. public interface MPH5ErrorPageView {
  5. /**
  6. * @param h5Page page对象
  7. * @param view webview对象
  8. * @param errorUrl 错误地址
  9. * @param statusCode 错误码
  10. * @param errorMsg 错误描述
  11. * @param subErrorMsg 错误描述sub
  12. * @param extInfo 扩展信息,请注意判空
  13. * @param extObj 扩展类,请注意判空
  14. * @return true 表示需要展示自定义页面,会走到下面 errorPageCallback 方法
  15. */
  16. boolean enableShowErrorPage(H5Page h5Page, APWebView view, String errorUrl, int statusCode, String errorMsg, String subErrorMsg, Bundle extInfo, Object extObj);
  17. /**
  18. * @param h5Page page对象
  19. * @param view webview对象
  20. * @param errorUrl 错误地址
  21. * @param statusCode 错误码
  22. * @param errorMsg 错误描述
  23. * @param subErrorMsg 错误描述sub
  24. * @param extInfo 扩展信息,请注意判空
  25. * @param extObj 扩展类,请注意判空
  26. */
  27. void errorPageCallback(H5Page h5Page, APWebView view, String errorUrl, int statusCode, String errorMsg, String subErrorMsg, Bundle extInfo, Object extObj);
  28. }

开启沉浸式状态栏

说明:此功能仅在 10.1.60 及以上基线版本中支持。
  1. H5 容器配置 中开启 TSBS
  2. 对于使用内置标题栏的开发者,可实现 H5TransStatusBarColorProvider 接口,并通过 H5Utils.setProvider 方法将实例设置给 H5 容器,代码示例如下:

    1. package com.mpaas.demo.nebula;
    2. import android.graphics.Color;
    3. import com.alipay.mobile.nebula.provider.H5TransStatusBarColorProvider;
    4. public class H5TransStatusBarColorProviderImpl implements H5TransStatusBarColorProvider {
    5. @Override
    6. public int getColor() {
    7. return Color.argb(70, 255, 255, 255);
    8. }
    9. }
    说明
    • 此方法将设置所有 H5 容器打开的 H5 页面的状态栏颜色,如果对状态栏颜色设置有更复杂的需求,可实现 H5 容器 自定义标题栏
    • 状态栏颜色设置可在容器标题栏接口的 openTranslucentStatusBarSupport 方法中处理,也可在其他地方自行处理。

添加第三方 JavaScriptInterface

接入方通常会遇到接入第三方页面必须要使用 JavaScriptInterface 的问题,可按照以下步骤来支持此场景:

  1. 实现插件以拦截三方页面加载事件。
  2. 获取 WebView 并注入 JavaScript 对象。

代码示例如下:

  1. package com.mpaas.demo.nebula;
  2. import android.text.TextUtils;
  3. import com.alibaba.fastjson.JSONObject;
  4. import com.alipay.mobile.h5container.api.H5BridgeContext;
  5. import com.alipay.mobile.h5container.api.H5Event;
  6. import com.alipay.mobile.h5container.api.H5EventFilter;
  7. import com.alipay.mobile.h5container.api.H5Param;
  8. import com.alipay.mobile.h5container.api.H5SimplePlugin;
  9. public class TechFinSitePlugin extends H5SimplePlugin {
  10. @Override
  11. public void onPrepare(H5EventFilter filter) {
  12. super.onPrepare(filter);
  13. filter.addAction(CommonEvents.H5_PAGE_SHOULD_LOAD_URL);
  14. }
  15. @Override
  16. public boolean interceptEvent(H5Event event, H5BridgeContext context) {
  17. String action = event.getAction();
  18. if (CommonEvents.H5_PAGE_SHOULD_LOAD_URL.equals(action)) {
  19. JSONObject params = event.getParam();
  20. String url = params.getString(H5Param.LONG_URL);
  21. if (!TextUtils.isEmpty(url) && url.contains("tech.antfin.com")) {
  22. event.getH5page().getWebView().addJavascriptInterface(new TechFinJavaScriptInterface(), "techFinBridge");
  23. }
  24. }
  25. return false;
  26. }
  27. }
说明:切勿在 interceptEvent 方法中返回 true ,否则将影响容器加载页面。
  1. package com.mpaas.demo.nebula;
  2. import android.webkit.JavascriptInterface;
  3. public class TechFinJavaScriptInterface {
  4. @JavascriptInterface
  5. @com.uc.webview.export.JavascriptInterface
  6. public String whoAmI() {
  7. return "It is tech fin.";
  8. }
  9. }
说明:系统内核和 UC 内核使用的注解类不同,必须要兼容这两个注解类。

为 H5 容器添加过场动画

要为 H5 容器添加过场动画,只需在项目的 res/anim 文件夹下添加动画资源即可。操作步骤如下:

  1. 在项目的 res 文件夹下新建 anim 文件夹,如有可跳过。
  2. 将过程动画的资源文件添加到 anim 文件夹。H5 容器根据资源文件的文件名自动识别资源文件,因此资源文件的文件名只能为 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
      1. <?xml version="1.0" encoding="utf-8"?>
      2. <set xmlns:android="http://schemas.android.com/apk/res/android">
      3. <translate
      4. android:fromXDelta="0%"
      5. android:toXDelta="100%"
      6. android:duration="300" />
      7. </set>
    • h5_slide_out_left.xml
      1. <?xml version="1.0" encoding="utf-8"?>
      2. <set xmlns:android="http://schemas.android.com/apk/res/android">
      3. <translate
      4. android:fromXDelta="0%"
      5. android:toXDelta="-100%"
      6. android:duration="300" />
      7. </set>
    • h5_slide_in_right.xml
      1. <?xml version="1.0" encoding="utf-8"?>
      2. <set xmlns:android="http://schemas.android.com/apk/res/android">
      3. <translate
      4. android:fromXDelta="100%"
      5. android:toXDelta="0"
      6. android:duration="300" />
      7. </set>
    • h5_slide_in_left.xml
      1. <?xml version="1.0" encoding="utf-8"?>
      2. <set xmlns:android="http://schemas.android.com/apk/res/android">
      3. <translate
      4. android:fromXDelta="-100%"
      5. android:toXDelta="0%"
      6. android:duration="300" />
      7. </set>