移动开发平台 mPaaS 使用 H5 容器

您可使用 H5 容器完成以下操作：

初始化容器
在应用内打开一个在线网页
前端调用 Native 接口
前端调用自定义 JSAPI
自定义H5 页面的 TitleBar

初始化容器

为了使用 Nebula 容器，您需要在程序启动完成后进行初始化。

在 MyH5Application/MPaaS/Targets/MyH5Application/APMobileFramework/DTFrameworkInterface+MyH5Application.m 中，DTFrameworkInterface 的 Category 的 beforeDidFinishLaunchingWithOptions 方法中，调用以下接口进行初始化。

示例如下：

  
   - (void)application:(UIApplication *)application beforeDidFinishLaunchingWithOptions:(NSDictionary *)launchOptions
   {
    // 初始化容器 
    [MPNebulaAdapterInterface initNebula];
   
   }

在应用内打开一个在线网页

在客户端代码中添加完容器初始化逻辑后，就可以调用 Nebula 容器提供的接口，启动一个在线网页。

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

在 MyH5Application/Sources/DemoViewController.m 中添加代码。
添加一个按钮，点击按钮调用接口打开在线网页。

    
      #import "DemoViewController.h"
     
      @interface DemoViewController ()
     
      @end
     
      @implementation DemoViewController
     
      - (void)viewDidLoad {
      [super viewDidLoad];
      // Do any additional setup after loading the view, typically from a nib.
     
      UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
      button.frame = CGRectMake(30, 150, [UIScreen mainScreen].bounds.size.width-60, 44);
      button.backgroundColor = [UIColor blueColor];
      [button setTitle:@"在线 URL" forState:UIControlStateNormal];
      [button addTarget:self action:@selector(openOnline) forControlEvents:UIControlEventTouchUpInside];
      [self.view addSubview:button];
     
      }
     
      - (void)openOnline
      {
      [[MPNebulaAdapterInterface shareInstance] startH5ViewControllerWithParams:@{@"url":@"https://tech.antfin.com"}];
      }
     
      @end

点击按钮后即可在应用内打开金融科技官网首页。至此，您已完成 在应用内打开一个在线网页。

前端调用 Native 接口

在开发前端页面时，可以通过 Nebula 容器提供的 bridge，通过 JSAPI 的方式与 Native 进行通信，获取 Native 处理的相关信息或数据。Nebula 容器内预置了部分基础的 JSAPI 能力（详情参见链接），您可以在 H5 页面的 js 文件中，直接通过 AlipayJSBridge.call 的方式进行调用。示例如下：

  
   AlipayJSBridge.call('alert', {
    title: '原生 Alert Dialog',
    message: '这是一个来自原生的 Alert Dialog',
    button: '确定'
   }, function (e) {
    alert("点击了按钮");
   });

说明：
https://mcube-prod.oss-cn-hangzhou.aliyuncs.com/570DA89281533-default/80000000/1.0.0.1_all/nebula/fallback/h5_to_native.html 是已经写好的前端页面，您可以调用此页面以体验前端调用 Native 接口的功能。

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

在 MyH5Application/Sources/DemoViewController.m 中添加代码。
添加一个按钮 button1。

    
      UIButton *button1 = [UIButton buttonWithType:UIButtonTypeCustom];
      button1.frame = CGRectOffset(button.frame, 0, 80);
      button1.backgroundColor = [UIColor blueColor];
      [button1 setTitle:@"前端调用 native" forState:UIControlStateNormal];
      [button1 addTarget:self action:@selector(openJsApi) forControlEvents:UIControlEventTouchUpInside];
      [self.view addSubview:button1];

在 MyH5Application/Sources/DemoViewController.m 中，给 button1 添加实现代码。如下所示：

    
      - (void)openJsApi
      {
      [[MPNebulaAdapterInterface shareInstance] startH5ViewControllerWithParams:@{@"url":@"https://mcube-prod.oss-cn-hangzhou.aliyuncs.com/570DA89281533-default/80000000/1.0.0.1_all/nebula/fallback/h5_to_native.html"}];
      }

编译工程后，在手机上安装应用。打开应用后界面如下所示。
点击按钮后即可打开前端页面，点击按钮 显示原生Alert Dialog，会弹出原生的警示框，警示框的标题是 原生 Alert Dialog，消息框的内容是 这是一个来自原生的 Alert Dialog ；点击警示框的确定按钮，会再弹出一个无标题警示框，内容是 点击了按钮 。说明接口调用成功。至此，您已完成 前端调用 Native 接口。

前端调用自定义 JSAPI

除了 Nebula 容器预置的基础 JSAPI 能力外，还可以根据以下方式自定义一个 JSAPI。

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

创建 JSAPI 类。

第一步，操作如下图所示。
第二步，操作如下图所示。
第三步，操作如下图所示。

第四步，添加代码。

      
        @implementation MyJsApiHandler4Myapi
       
        - (void)handler:(NSDictionary *)data context:(PSDContext *)context callback:(PSDJsApiResponseCallbackBlock)callback
        {
        [super handler:data context:context callback:callback];
       
        NSString *userId = @"admin";
        if ([userId length] > 0) {
        callback(@{@"success":@YES, @"userId":userId});
        } else {
        callback(@{@"success":@NO});
        }
        }
       
        @end

向 Nebula 容器注入您自定义的 JSAPI。
1. 在 MyH5Application/MyH5Application/Resources 下新建一个 bundle。
2. 按下图所示进行操作。
3. 将 bundle 重命名为 CustomJsApi.bundle，并将其内容清空。
4. 在 MyH5Application/MyH5Application/Resources 中新建一个 plist 文件，重命名为 Poseidon-UserDefine-Extra-Config.plist。在 JsApis 数组注册上一步中创建的 JSAPI 类。注册的 JSAPI 是一个字典 Dictionary 类型，其中 JSAPI 表示在 H5 页面中调用的 JSAPI 接口名 myapi；name 表示上一步创建的类名 MyJsApiHandler4Myapi。将 plist 文件拖拽到CustomJsApi.bundle 中。

向容器注册自定义 JSAPI 的路径。在 MyH5Application/MPaaS/Targets/MyH5Application/APMobileFramework/DTFrameworkInterface+MyH5Application.m 中，使用下面的接口，初始化容器。在采用自定义 JSAPI 的时候，需要采用以下方法，通过 plist 将自定义的类注入容器，将自定义的路径 NSS string 传给初始化方法。

    
      - (void)application:(UIApplication *)application beforeDidFinishLaunchingWithOptions:(NSDictionary *)launchOptions
      {
      // [MPNebulaAdapterInterface initNebula];
      NSString *pluginsJsapisPath = [[NSBundle mainBundle] pathForResource:[NSString stringWithFormat:@"CustomJsApi.bundle/Poseidon-UserDefine-Extra-Config.plist"] ofType:nil];
      [MPNebulaAdapterInterface initNebulaWithCustomPresetApplistPath:@"" customPresetAppPackagePath:@""customPluginsJsapisPath:pluginsJsapisPath];
     
      }

在 MyH5Application/Sources/DemoViewController.m 中添加代码，新增按钮 button2。

    
      UIButton *button2 = [UIButton buttonWithType:UIButtonTypeCustom];
      button2.frame = CGRectOffset(button1.frame, 0, 80);
      button2.backgroundColor = [UIColor blueColor];
      [button2 setTitle:@"前端调用自定义 JSAPI" forState:UIControlStateNormal];
      [button2 addTarget:self action:@selector(openCusJsApi) forControlEvents:UIControlEventTouchUpInside];
      [self.view addSubview:button2];

在 MyH5Application/Sources/DemoViewController.m 中添加代码, 定义 openCusJsApi。实现代码如下所示：

    
      - (void)openCusJsApi
      {
      [[MPNebulaAdapterInterface shareInstance] startH5ViewControllerWithParams:@{@"url":@"https://mcube-prod.oss-cn-hangzhou.aliyuncs.com/570DA89281533-default/80000001/1.0.0.1_all/nebula/fallback/custom_jsapi.html"}];
      }

说明：
https://mcube-prod.oss-cn-hangzhou.aliyuncs.com/570DA89281533-default/80000001/1.0.0.1_all/nebula/fallback/custom_jsapi.html 是已经写好的前端页面，您可以调用此页面以体验前端调用自定义JSAPI接口的功能。在该前端页面中，通过以下方法调用该自定义JSAPI。示例如下所示。

    
      AlipayJSBridge.call('myapi', {
      param1: 'JsParam1',
      param2: 'JsParam2'
      }, function (result) {
      alert(JSON.stringify(result));
      });

编译工程后，在手机上安装应用。打开应用后界面如下所示。
点击 前端调用自定义 JSAPI 按钮后即可打开前端页面，再点击按钮 自定义JSAPI，会打开包含了一个按钮 自定义JSAPI 的前端页面。点击该 自定义JSAPI 按钮，会再弹出一个无标题警示框，内容按照自定义 API 定义的功能处理了的前端调用时传入的参数。至此，您已完成 前端调用自定义JSAPI 接口。

自定义H5 页面的 TitleBar

H5 页面导航栏样式为白底黑字蓝按钮，您可以通过自定义一个 Plugin，来修改导航栏样式。

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

创建 Plugin 类。

按下图所示进行操作。
按下图所示进行操作。
按下图所示进行操作。

添加代码。

      
        - (void)pluginDidLoad
        {
        self.scope = kPSDScope_Scene;
       
        // -- 返回区域
        [self.target addEventListener:kNBEvent_Scene_NavigationItem_Left_Back_Create_Before withListener:self useCapture:NO];
       
        [super pluginDidLoad];
        }
       
        - (void)handleEvent:(PSDEvent *)event
        {
        [super handleEvent:event];
       
        if ([kNBEvent_Scene_NavigationItem_Left_Back_Create_Before isEqualToString:event.eventType]) {
        // 在默认返回按钮基础上，修改样式
        NSArray *leftBarButtonItems = event.context.currentViewController.navigationItem.leftBarButtonItems;
        if ([leftBarButtonItems count] == 1) {
        if (leftBarButtonItems[0] && [leftBarButtonItems[0] isKindOfClass:[AUBarButtonItem class]]) {
        // 在默认返回按钮基础上，修改返回箭头和文案颜色
        AUBarButtonItem *backItem = leftBarButtonItems[0];
        backItem.backButtonColor = [UIColor redColor];
        backItem.titleColor = [UIColor redColor];
        }
        }
        [event preventDefault];
        [event stopPropagation];
        }
        }
       
        - (int)priority
        {
        return PSDPluginPriority_High;
        }

向 Nebula 容器注入您自定义的 JSAPI。
打开 Poseidon-UserDefine-Extra-Config.plist 文件，在 Plugins 数组注册上一步中创建的 MPJsApiHandler4TitleView 类。注册的 Plugins 是一个字典 Dictionary 类型，其中 name 表示上一步创建的类名 MyJsApiHandler4TitleView。Scope 表示处理范围是页面（scene）。
!

向容器注册自定义 plugin 的路径。在 MyH5Application/MPaaS/Targets/MyH5Application/APMobileFramework/DTFrameworkInterface+MyH5Application.m 中，使用下面的接口，初始化容器。在采用自定义 JSAPI 的时候，需要采用以下方法，通过 plist 将自定义的 plugin 类注入容器。

说明：在上一步调用自定义 JSAPI 时已完成注册，可跳过本步骤。

    
      - (void)application:(UIApplication *)application beforeDidFinishLaunchingWithOptions:(NSDictionary *)launchOptions
      {
      // [MPNebulaAdapterInterface initNebula];
      NSString *pluginsJsapisPath = [[NSBundle mainBundle] pathForResource:[NSString stringWithFormat:@"CustomJsApi.bundle/Poseidon-UserDefine-Extra-Config.plist"] ofType:nil];
      [MPNebulaAdapterInterface initNebulaWithCustomPresetApplistPath:@"" customPresetAppPackagePath:@""customPluginsJsapisPath:pluginsJsapisPath];
     
      }

在 MyH5Application/Sources/DemoViewController.m 中添加代码，新增按钮 button3。

    
      UIButton *button3 = [UIButton buttonWithType:UIButtonTypeCustom];
      button3.frame = CGRectOffset(button2.frame, 0, 80);
      button3.backgroundColor = [UIColor blueColor];
      [button3 setTitle:@"自定义导航栏" forState:UIControlStateNormal];
      [button3 addTarget:self action:@selector(customNavigatorBar) forControlEvents:UIControlEventTouchUpInside];
      [self.view addSubview:button3];

在 MyH5Application/Sources/DemoViewController.m 中添加代码, 定义 customNavigatorBar。实现代码如下所示。

    
      - (void)customNavigatorBar
      {
      [[MPNebulaAdapterInterface shareInstance] startH5ViewControllerWithParams:@{@"url":@"https://tech.antfin.com"}];
      }