全部产品
Search
文档中心

移动开发平台mPaaS:快速开始

更新时间:Apr 01, 2025

H5 容器和离线包支持 原生 AAR 接入 和 组件化接入 两种接入方式。通过使用 H5 容器可以实现在应用内打开一个在线网页、前端调用 Native 接口、前端调用自定义 JSAPI、自定义 H5 页面的 TitleBar、使用 UC 内核等相关功能。使用 H5 离线包可以实现发布、预置、启动和更新离线包等相关功能。

前置条件

添加 SDK

原生 AAR 方式

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

组件化方式

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

初始化 mPaaS

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

public class MyApplication extends Application {
    
    @Override
    public void onCreate() {
        super.onCreate();
        // mPaaS 初始化
        MP.init(this);    
    }
}

详情请参考:初始化 mPaaS。

配置小程序包请求时间间隔

mPaaS 支持配置小程序包的请求时间间隔,可全局配置或单个配置。

  • 全局配置:在 Android 工程的 assets/config 路径下,创建 custom_config.json 文件,并在文件内填入以下内容:

    {
    "value": "{\"config\":{\"al\":\"3\",\"pr\":{\"4\":\"86400\",\"common\":\"864000\"},\"ur\":\"1800\",\"fpr\":{\"common\":\"3888000\"}},\"switch\":\"yes\"}",
    "key": "h5_nbmngconfig"\
    }

    其中 \"ur\":\"1800\" 是设置全局更新间隔的值,1800 为默认值,代表间隔时长,单位为秒,您可修改此值来设置您的全局离线包请求间隔,范围为 0 ~ 86400 秒(即 0 ~ 24 小时,0 代表无请求间隔限制)。

    重要

    其他参数请勿随意修改。

  • 单个配置:即只对当前小程序包配置。可在控制台中前往 添加离线包 > 扩展信息 中填入 {"asyncReqRate":"1800"} 来设置请求时间间隔。详情参见 创建 H5 离线包 中的 扩展信息。

验证请求时间间隔配置是否生效:您可以打开⼀个接入 H5 离线包的工程,在 logcat 日志中过滤 H5BaseAppProvider 关键字,若能看到如下信息,则说明配置已经生效。

lastUpdateTime: xxx updateRate: xxx

使用 SDK

mPaaS Nebula H5 容器提供统一的接口类 MPNebula 来实现 H5 容器及离线包的操作。调用过程如下:

  1. 启动 H5 离线包。

    • 启动一个离线包:

      /**
      * 启动离线包
      *
      * @param appId 离线包 ID
      */
      public static void startApp(String appId);
    • 启动一个离线包(带启动参数):

      /**
      * 启动离线包
      *
      * @param appId  离线包 ID
      * @param params 启动参数
      */
      public static void startApp(String appId, Bundle params);
  2. 启动一个在线页面。

    • 启动一个在线页面:

      /**
      * 启动在线 URL
      *
      * @param url 在线地址
      */
      public static void startUrl(String url)
    • 启动一个在线页面(带启动参数):

      /**
      * 启动在线 URL
      *
      * @param url   在线地址
      * @param param 启动参数
      */
      public static void startUrl(String url, Bundle param);
  3. 设置自定义 UserAgent。

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

      public class H5UaProviderImpl implements H5UaProvider {
      @Override
      public String getUa(String defaultUaStr) {
       //不要修改 defaultUaStr,或者返回一个不包含 defaultUaStr 的结果
       return defaultUaStr + " AlipayClient/mPaaS"; 
      }
      }
    2. 然后通过调用设置 UA 接口:

      /**
      * 设置 UA
      *
      * @param uaProvider UA 设置器,需开发者实现 getUa 方法
      */
      public static void setUa(H5UaProvider uaProvider)
    3. 进行设置:

      MPNebula.setUa(new H5UaProviderImpl());
  4. 设置自定义容器 View。

    容器提供方法可以设置自定义的标题栏、导航菜单、下拉刷新头部以及 WebView 的承载布局,具体实现,可参考 获取代码示例,查看 AAR 接入方式下 H5 容器和离线包的代码示例。

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

      public class H5ViewProviderImpl implements H5ViewProvider {
      @Override
      public H5WebContentView createWebContentView(Context context) {
       // 此处返回自定义的 WebView 的承载布局,若返回 null 则使用默认 View
       return null;
      }
      
      @Override
      public H5TitleView createTitleView(Context context) {
       // 此处返回自定义的标题栏,若返回 null 则使用默认 View
       return null;
      }
      
      @Override
      public H5PullHeaderView createPullHeaderView(Context context, ViewGroup viewGroup) {
       // 此处返回自定义的下拉刷新头部,若返回 null 则使用默认 View
       return null;
      }
      
      @Override
      public H5NavMenuView createNavMenu() {
       // 此处返回自定义的导航菜单,若返回 null 则使用默认 View
       return null;
      }
      }
    2. 然后通过 View 设置接口:

      /**
      * 设置容器相关的自定义 view,如标题栏、菜单栏、web layout、下拉刷新 view 等等
      * @param viewProvider 自定义 view provider
      */
      public static void setCustomViewProvider(H5ViewProvider viewProvider);
    3. 执行设置过程:

      MPNebula.setCustomViewProvider(new H5ViewProviderImpl());
      说明

      若要设置自定义标题栏,需要先设置 bundle name,否则可能会找不到资源。

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

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

    • 同步方法

      /**
      * 获取 H5 容器的视图(view)
      *
      * @param activity 页面上下文
      * @param param    启动参数,内部可包含 appid 或是 URL
      * @return H5 容器的视图(view)
      */
      public static View getH5View(Activity activity, Bundle param);
    • 异步方法

      /**
      * 异步获取 H5 容器的视图(view)
      *
      * @param activity            页面上下文
      * @param param               启动参数,内部可包含 appid 或是 URL
      * @param h5PageReadyListener 异步回调
      */
      public static void getH5ViewAsync(Activity activity, Bundle param, H5PageReadyListener h5PageReadyListener);
      说明
      • 在使用上述同步、异步方法嵌入容器时,需要提前获取对应离线包的信息。

      • 使用异步方法不占用主线程,不会影响性能。