全部产品

使用 H5 离线包

更新时间:2020-12-23 15:59

参考 在 Xcode 创建工程,创建新工程,我们基于此工程,使用 H5 离线包。

发布离线包

首先,在使用 H5 离线包之前,需要先准备一个前端 App 的 zip 包。如果没有自己的前端离线包,可以下载我们为您准备好的 示例离线包

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

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

预置离线包

  1. 在控制台上下载离线包 AMR 文件,以及离线包配置文件到本地。
    下载离线包和离线包配置文件
  2. MyH5Application_offpack/Resources 下创建 DemoCustomPresetApps.bundle,将 bundle 下的内容清空,并将下载到的离线包 AMR 文件和离线包配置文件添加到此 bundle 中。
    创建 bundle
  3. 向容器注册预置的离线包。将包含预置离线包信息的 plist 文件和离线包的路径分别赋给 presetApplistPathappPackagePath,通过 initNebulaWithCustomPresetApplistPath 进行初始化。至此,您已经完成 预置离线包

    1. - (void)application:(UIApplication *)application beforeDidFinishLaunchingWithOptions:(NSDictionary *)launchOptions
    2. {
    3. NSString *presetApplistPath = [[NSBundle mainBundle] pathForResource:[NSString stringWithFormat:@"DemoCustomPresetApps.bundle/h5_json.json"] ofType:nil];
    4. NSString *appPackagePath = [[NSBundle mainBundle] pathForResource:[NSString stringWithFormat:@"DemoCustomPresetApps.bundle"] ofType:nil];
    5. [MPNebulaAdapterInterface initNebulaWithCustomPresetApplistPath:presetApplistPath customPresetAppPackagePath:appPackagePath customPluginsJsapisPath:@""];
    6. }

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

启动离线包

  1. MyH5Application_offpack/Sources/DemoViewController.m 中添加代码。添加按钮 button4,点击该按钮以调用接口打开离线包页面。

    1. UIButton *button4 = [UIButton buttonWithType:UIButtonTypeCustom];
    2. button4.frame = CGRectMake(30, 150, [UIScreen mainScreen].bounds.size.width-60, 44);
    3. button4.backgroundColor = [UIColor blueColor];
    4. [button4 setTitle:@"打开离线包页面" forState:UIControlStateNormal];
    5. [button4 addTarget:self action:@selector(startOffPack) forControlEvents:UIControlEventTouchUpInside];
    6. [self.view addSubview:button4];
  2. MyH5Application_offpack/Sources/DemoViewController.m 中,给 button4 添加实现代码启动离线包。其中传入的参数 80000000 为离线包的 APPID。具体代码如下所示。

    1. - (void)startOffPack
    2. {
    3. [[MPNebulaAdapterInterface shareInstance] startH5ViewControllerWithNebulaApp:@{@"appId":@"80000000"}];
    4. }
  3. 编译工程后,在手机上安装应用。打开应用后界面如下所示。

  4. 点击按钮 打开离线包页面,即可打开离线包中预置的网页,如下图所示。至此,您已完成 启动离线包

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

更新离线包

  1. MyH5Application_offpack/Sources/DemoViewController.m 中添加代码。
    添加按钮 button5,点击按钮调用接口打开离线包页面。
    1. UIButton *button5 = [UIButton buttonWithType:UIButtonTypeCustom];
    2. button5.frame = CGRectOffset(button4.frame, 0, 80);
    3. button5.backgroundColor = [UIColor blueColor];
    4. [button5 setTitle:@"更新离线包" forState:UIControlStateNormal];
    5. [button5 addTarget:self action:@selector(updateOffPack) forControlEvents:UIControlEventTouchUpInside];
    6. [self.view addSubview:button5];
  2. MyH5Application_offpack/Sources/DemoViewController.m 中,给 button5 添加实现代码以更新离线包。

    1. - (void)updateOffPack
    2. {
    3. [[MPNebulaAdapterInterface shareInstance] requestNebulaAppsWithParams:@{@"80000000":@"*"} finish:^(NSDictionary *data, NSError *error) {
    4. NSString *result = @"后台无新包发布";
    5. if (!error && [data[@"data"] count] > 0) {
    6. result = [NSString stringWithFormat:@"%@", data[@"data"]];
    7. }
    8. dispatch_async(dispatch_get_main_queue(), ^{
    9. UIAlertView* alertView = [[UIAlertView alloc] initWithTitle:@"离线包已更新" message:result delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil, nil];
    10. [alertView show];
    11. });
    12. }];
    13. }
  3. 编译工程后,在手机上安装应用。打开应用后界面如下所示。
  4. 此时点击 打开离线包页面 按钮,会显示以下页面。
  5. 点击 更新离线包 按钮,则会弹出 toast 提示 后台无新包发布
  6. 更新离线包文件,在控制台中上传并发布。在本例中更新的内容是将按钮显示文字更新为 更新 20190826
    上传更新后的离线包文件
    说明:在控制台上传新版本离线包以更新客户端离线包时,需要填写支持的客户端范围。此范围由最低版本和最高版本两个版本号确定。只有在此版本范围内的客户端,才能够得到推送的新版本离线包。客户端版本信息可以在客户端工程的 info.plist 文件的 product version 获得。客户端范围
  7. 在应用中点击 更新离线包 按钮,此时应弹出 toast 提示 离线包已更新,如下图所示。
  8. 此时点击 打开 离线包页面 按钮,会显示以下页面。

    至此,您已经完成 更新离线包

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