全部产品
云市场
云游戏

使用 H5 离线包

更新时间:2020-09-18 16:34:20

H5 离线包的使用可以分为四个部分:发布离线包、预置离线包、启动离线包和更新离线包。在本教程中为了说明和演示 H5 离线包的功能,采取了从发布到预置,再到启动,最后到更新的流程,但是这一流程并非使用 H5 离线包的必要条件。在实际生产中,您可以自由地根据需要进行使用。

发布离线包

本节介绍了发布离线包的操作流程。

点击 查看视频,查看对应的视频教程。

前提条件

一个前端 App 的 zip包(如果您没有自己的前端离线包,您可以下载我们为您准备好的 示例离线包)。

操作步骤

  1. 您需要先在控制台的应用中配置离线包信息,请参考 配置离线包
  2. 您需要生成您自己的前端App的离线包(或者使用我们的示例离线包),请参考 生成离线包
  3. 您需要在控制台上创建该离线包并上传,请参考 创建离线包
  4. 您需要将配置好的离线包发布到您的客户端app中,请参考 发布离线包

预置离线包

本节介绍了预置离线包的操作流程。

点击 查看视频,查看对应的视频教程。

前提条件

您已经在 mPaaS 控制台发布了离线包。

操作步骤

  1. 在控制台下载离线包 AMR 文件和离线包配置文件到本地。下载amr和配置文件
  2. 将下载到的离线包 AMR 文件和离线包配置文件放在工程中的 assets 目录下。assets
  3. 将离线包预置到应用内。推荐在 app 启动的时候注册,在本教程中在 MyApplication 类中进行注册。至此,您已经完成 预置离线包。

    1. public class MyApplication extends Application {
    2. @Override
    3. protected void attachBaseContext(Context base) {
    4. super.attachBaseContext(base);
    5. // 建议判断下是否主进程,只在主进程初始化
    6. QuinoxlessFramework.setup(this, new IInitCallback() {
    7. @Override
    8. public void onPostInit() {
    9. // 在这里开始使用mPaaS功能
    10. registerCustomJsapi();
    11. //调用loadOfflineNebula()以加载离线包。
    12. loadOfflineNebula();
    13. }
    14. });
    15. }
    16. @Override
    17. public void onCreate() {
    18. super.onCreate();
    19. QuinoxlessFramework.init();
    20. }
    21. private void loadOfflineNebula() {
    22. new Thread(new Runnable() {
    23. @Override
    24. public void run() {
    25. // 此方法为阻塞调用,请不要在主线程上调用内置离线包方法。如果内置多个amr包,要确保文件已存在,如不存在,会造成其他内置离线包失败。
    26. // 此方法仅能调用一次,多次调用仅第一次调用有效。
    27. MPNebula.loadOfflineNebula("h5_json.json", new MPNebulaOfflineInfo("80000000_1.0.0.0.amr", "80000000", "1.0.0.0"));
    28. }
    29. }).start();
    30. }
    31. }

启动离线包

本节介绍了更新离线包的操作流程。

点击 查看视频,查看对应的视频教程。

前提条件

您在客户端中已经预置了离线包。

操作步骤

  1. 在 activity_main.xml 文件中,新增按钮,button id 为 start_app_btn
    1. <Button
    2. android:id="@+id/start_app_btn"
    3. android:layout_width="match_parent"
    4. android:layout_height="wrap_content"
    5. android:layout_marginBottom="10dp"
    6. android:layout_marginLeft="10dp"
    7. android:layout_marginRight="10dp"
    8. android:layout_marginTop="20dp"
    9. android:background="#108EE9"
    10. android:gravity="center"
    11. android:text="启动一个离线包"
    12. android:textColor="#ffffff" />
  2. MainActivity 类定义点击按钮start_app_btn后的行为,启动离线包。其中传入的参数 “80000000” 为离线包的 APPID。
    1. findViewById(R.id.start_app_btn).setOnClickListener(new View.OnClickListener() {
    2. @Override
    3. public void onClick(View v) {
    4. MPNebula.startApp("80000000");
    5. }
    6. });
  3. 编译工程后,在手机上安装应用。打开应用后界面如下。
    启动离线包
  4. 点击按钮 启动一个离线包,即可打开离线包中预置的网页。至此,您已完成 启动离线包
    启动离线包预览

更新离线包

本节介绍了更新离线包的操作流程。

点击 查看视频,查看对应的视频教程。

前提条件

您的客户端应用中已经预置了离线包,并且在 mPaaS 控制台上已经创建了新的离线包版本,也上传了新版本的离线包。

操作步骤

  1. 在 activity_main.xml 文件中,新增按钮,button id 为 update_app_btn
    1. <Button
    2. android:id="@+id/update_app_btn"
    3. android:layout_width="match_parent"
    4. android:layout_height="wrap_content"
    5. android:layout_marginBottom="10dp"
    6. android:layout_marginLeft="10dp"
    7. android:layout_marginRight="10dp"
    8. android:layout_marginTop="20dp"
    9. android:background="#108EE9"
    10. android:gravity="center"
    11. android:text="更新离线包"
    12. android:textColor="#ffffff" />
  2. MainActivity 类定义点击按钮 update_app_btn后的行为,启动离线包。其中传入的参数“80000000”为离线包的 APPID。
    1. findViewById(R.id.update_app_btn).setOnClickListener(new View.OnClickListener() {
    2. @Override
    3. public void onClick(View v) {
    4. MPNebula.updateAllApp(new MpaasNebulaUpdateCallback() {
    5. @Override
    6. public void onResult(final boolean success, final boolean isLimit) {
    7. // success 为是否成功
    8. runOnUiThread(new Runnable() {
    9. @Override
    10. public void run() {
    11. Toast.makeText(MainActivity.this, success ? "离线包更新成功" : "离线包更新失败", Toast.LENGTH_SHORT).show();
    12. }
    13. });
    14. }
    15. });
    16. }
    17. });
  3. 编译工程后,在手机上安装应用。打开应用后界面如下。
    更新离线包
  4. 点击按钮 更新离线包,即可打开更新离线包。在提示更新成功后,点击按钮 启动一个离线包,即可以看到更新后的页面。至此,您已完成 更新离线包
    更新离线包预览