全部产品

快速开始

更新时间:2020-06-11 16:45:26

H5 容器支持 原生 AAR 接入mPaaS Inside 接入组件化接入 三种接入方式。

前置条件

添加 SDK

原生 aar 方式

参考 AAR 组件管理,通过 组件管理(AAR) 在工程中安装 H5 容器 组件。

mPaaS Inside 方式

在工程中通过 组件管理 安装 H5 容器 组件。
更多信息,请参考 管理组件依赖

组件化方式

在 Portal 和 Bundle 工程中通过 组件管理 安装 H5 容器 组件。
更多信息,请参考 管理组件依赖

初始化 mPaaS

如果您使用 原生 AAR 接入mPaaS Inside 接入 ,您需要初始化 mPaaS。
请在 Application 中添加以下代码:

  1. public class MyApplication extends Application {
  2. @Override
  3. protected void attachBaseContext(Context base) {
  4. super.attachBaseContext(base);
  5. // mPaaS 初始化回调设置。
  6. QuinoxlessFramework.setup(this, new IInitCallback() {
  7. @Override
  8. public void onPostInit() {
  9. // 此回调表示 mPaaS 已经初始化完成,mPaaS 相关调用可在这个回调里进行。
  10. }
  11. });
  12. }
  13. @Override
  14. public void onCreate() {
  15. super.onCreate();
  16. // mPaaS 初始化。
  17. QuinoxlessFramework.init();
  18. }
  19. }

使用 SDK

mPaaS Nebula H5 容器提供统一的接口类 MPNebula 来实现 H5 容器及离线包的操作。

调用过程如下:

  1. 启动 H5 离线包。
    • 启动一个离线包:
      1. /**
      2. * 启动离线包
      3. *
      4. * @param appId 离线包 id
      5. */
      6. public static void startApp(String appId);
    • 启动一个离线包,带启动参数:
      1. /**
      2. * 启动离线包
      3. *
      4. * @param appId 离线包 id
      5. * @param params 启动参数
      6. */
      7. public static void startApp(String appId, Bundle params);
  2. 启动一个在线页面。
    • 启动一个在线页面:
      1. /**
      2. * 启动在线 url
      3. *
      4. * @param url 在线地址
      5. */
      6. public static void startUrl(String url)
    • 启动一个在线页面,带启动参数:
      1. /**
      2. * 启动在线 url
      3. *
      4. * @param url 在线地址
      5. * @param param 启动参数
      6. */
      7. public static void startUrl(String url, Bundle param);
  3. 设置自定义 UserAgent
    1. 首先您需要实现一个 UA 设置器,如下所示:
      1. public class H5UaProviderImpl implements H5UaProvider {
      2. @Override
      3. public String getUa(String defaultUaStr) {
      4. //请不要修改defaultUaStr,或者返回一个不包含defaultUaStr的结果
      5. return defaultUaStr + " AlipayClient/mPaaS";
      6. }
      7. }
    2. 然后通过调用设置 UA 接口:
      1. /**
      2. * 设置 UA
      3. *
      4. * @param uaProvider UA设置器,需自行实现 getUa 方法
      5. */
      6. public static void setUa(H5UaProvider uaProvider)
    3. 进行设置:
      1. MPNebula.setUa(new H5UaProviderImpl());
  4. 设置自定义容器 View。

    容器提供方法可以设置自定义的标题栏、导航菜单、下拉刷新头部以及 WebView 的承载布局,具体实现,您可参考 代码示例

    1. 首先,您需要先实现一个 View 设置器,如下所示:

      1. public class H5ViewProviderImpl implements H5ViewProvider {
      2. @Override
      3. public H5WebContentView createWebContentView(Context context) {
      4. // 此处返回您自定义的 WebView 的承载布局,若返回 null 则使用默认 View
      5. return null;
      6. }
      7. @Override
      8. public H5TitleView createTitleView(Context context) {
      9. // 此处返回您自定义的标题栏,若返回 null 则使用默认 View
      10. return null;
      11. }
      12. @Override
      13. public H5PullHeaderView createPullHeaderView(Context context, ViewGroup viewGroup) {
      14. // 此处返回您自定义的下拉刷新头部,若返回 null 则使用默认 View
      15. return null;
      16. }
      17. @Override
      18. public H5NavMenuView createNavMenu() {
      19. // 此处返回您自定义的导航菜单,若返回 null 则使用默认 View
      20. return null;
      21. }
      22. }
    2. 然后通过 View 设置接口:
      1. /**
      2. * 设置容器相关的自定义 view,如标题栏、菜单栏、web layout、下拉刷新 view 等等
      3. * @param viewProvider 自定义 view provider
      4. */
      5. public static void setCustomViewProvider(H5ViewProvider viewProvider);
    3. 执行设置过程:

      1. MPNebula.setCustomViewProvider(new H5ViewProviderImpl());

      说明:若您要设置自定义标题栏,请先设置 bundle name,否则可能会导致资源找不到。

      1. // 此处必须设置标题栏资源所在的 bundle 名称,如果不设置,会导致资源无法加载导致标题栏无法生效
      2. H5Utils.setProvider(H5ReplaceResourceProvider.class.getName(), new H5ReplaceResourceProvider() {
      3. @Override
      4. public String getReplaceResourcesBundleName() {
      5. return BuildConfig.BUNDLE_NAME;
      6. }
      7. });
      8. MPNebula.setCustomViewProvider(new H5ViewProviderImpl());
  5. 将单个容器的视图嵌入到页面。

    根据您的实际情况选择以下方法将单个容器的视图(view)嵌入到 H5 页面中,接口提供同步方法和异步方法。

    说明
    • 在使用下述同步、异步方法嵌入容器时,您需要提前获取对应离线包的信息。
    • 使用异步方法不占用主线程,不会影响性能。

    同步方法

    1. /**
    2. * 获取 H5 容器的视图(view)
    3. *
    4. * @param activity 页面上下文
    5. * @param param 启动参数,内部可包含 appid 或是 url
    6. * @return H5 容器的视图(view)
    7. */
    8. public static View getH5View(Activity activity, Bundle param);

    异步方法

    1. /**
    2. * 异步获取 H5 容器的视图(view)
    3. *
    4. * @param activity 页面上下文
    5. * @param param 启动参数,内部可包含 appid 或是 url
    6. * @param h5PageReadyListener 异步回调
    7. */
    8. public static void getH5ViewAsync(Activity activity, Bundle param, H5PageReadyListener h5PageReadyListener);

使用 H5 容器

如需使用 H5 容器的相关功能,请参考文档 使用 H5 容器

使用 H5 离线包

如需使用 H5 离线包的相关功能,请参考文档 使用 H5 离线包