您可使用 H5 容器完成以下操作。
初始化容器
为了使用 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("单击了按钮");
});单击前往试用的前端页面，您可以调用此页面以体验前端调用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.XX.XX_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。
在
MyH5Application/MyH5Application/Resources下新建一个 bundle。按下图所示进行操作。
将 bundle 重命名为
CustomJsApi.bundle，并将其内容清空。在
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.XX.XX_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"}]; }编译工程后，在手机上安装应用。打开应用后界面如下所示。
单击 自定义导航 按钮后即可打开金融科技官网，此时返回按钮已经根据自定义调整样式。至此，您已完成 自定义导航。
