All Products
Search
Document Center

Use HTML5 container

Last Updated: Mar 24, 2021

You can use the HTML5 container to perform the following operations:

Initialize the container

To use the Nebula container, you must initialize the container after you start your app.

In MyH5Application/MPaaS/Targets/MyH5Application/APMobileFramework/DTFrameworkInterface+MyH5Application.m, call the corresponding interface in the beforeDidFinishLaunchingWithOptions method in Category of DTFrameworkInterface to initialize the container.

See the following sample code:

 
  1. - (void)application:(UIApplication *)application beforeDidFinishLaunchingWithOptions:(NSDictionary *)launchOptions
  2. {
  3. // Initialize the container.
  4. [MPNebulaAdapterInterface initNebula];
  5. }

Open an online web page within an app

After you define initialization logic for the container in the client code, you can call the API provided by the Nebula container to launch an online web page.

  1. Add code in MyH5Application/Sources/DemoViewController.m.
    Add a button, and tap the button to call the API to open an online page.

       
    1. #import "DemoViewController.h"
    2. @interface DemoViewController ()
    3. @end
    4. @implementation DemoViewController
    5. - (void)viewDidLoad {
    6. [super viewDidLoad];
    7. // Do any additional setup after loading the view, typically from a nib.
    8. UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    9. button.frame = CGRectMake(30, 150, [UIScreen mainScreen].bounds.size.width-60, 44);
    10. button.backgroundColor = [UIColor blueColor];
    11. [button setTitle:@"Online URL" forState:UIControlStateNormal];
    12. [button addTarget:self action:@selector(openOnline) forControlEvents:UIControlEventTouchUpInside];
    13. [self.view addSubview:button];
    14. }
    15. - (void)openOnline
    16. {
    17. [[MPNebulaAdapterInterface shareInstance] startH5ViewControllerWithParams:@{@"url":@"https://tech.antfin.com"}];
    18. }
    19. @end
  2. Tap the button to open the official homepage of Ant Financial Technology in the application. Now, you have completed opening an online web page within an app.

Call the Native APIs on the front end

During the development of front-end pages, you can use the bridge provided by the Nebula container for communication with Native through JSAPI to obtain information or data processed by Native. The Nebula container provides some basic preset JSAPIs. You can directly call these JSAPIs in the JavaScript file of an HTML5 page by using AlipayJSBridge.call. For more information, see Link. See the following sample code:

 
  1. AlipayJSBridge.call('alert', {
  2. title: 'Native Alert Dialog',
  3. message: 'This is an Alert Dialog from Native.',
  4. Button: 'OK'
  5. }, function (e) {
  6. alert("The button was tapped.");
  7. });
Note: https://mcube-prod.oss-cn-hangzhou.aliyuncs.com/570DA89281533-default/80000000/1.0.0.1_all/nebula/fallback/h5_to_native.html is a ready-to-use front-end page. You can use this page to test calling the Native API from the front end.
  1. Add code in MyH5Application/Sources/DemoViewController.m.
    Add a new button named button1.

       
    1. UIButton *button1 = [UIButton buttonWithType:UIButtonTypeCustom];
    2. button1.frame = CGRectOffset(button.frame, 0, 80);
    3. button1.backgroundColor = [UIColor blueColor];
    4. [button1 setTitle:@"Call the Native API from the Front End" forState:UIControlStateNormal];
    5. [button1 addTarget:self action:@selector(openJsApi) forControlEvents:UIControlEventTouchUpInside];
    6. [self.view addSubview:button1];
  2. Add implementation code for button1 in MyH5Application/Sources/DemoViewController.m. As shown in the following code snippet:

       
    1. - (void)openJsApi
    2. {
    3. [[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"}];
    4. }
  3. After compiling the project, install the app on a cell phone. The following figure shows the interface after you open the application.

  4. Tap the button to open the front-end page. Tap Display Native Alert Dialog button, and a native alert dialog titled Native Alert Dialog will appear with the content This is a native Alert Dialog. Tap OK button, and an untitled alert dialog will appear with the content You tapped the button. This means the API operation was successful. Now, you have called the Native API from the front end.

Call a custom JSAPI on the front end

In addition to the basic JSAPIs preset in the Nebula container, you can also customize a JSAPI based on the following method.

  1. Create a JSAPI class.

    1. Step 1: The operation is shown in the following figure.
      Create a JSAPI class named step01

    2. Step 2: The operation is shown in the following figure.
      Create a JSAPI class named step02

    3. Step 3: The operation is shown in the following figure.
      Create a JSAPI class named step03

    4. Step 4: Add code.

           
      1. @implementation MyJsApiHandler4Myapi
      2. - (void)handler:(NSDictionary *)data context:(PSDContext *)context callback:(PSDJsApiResponseCallbackBlock)callback
      3. {
      4. [super handler:data context:context callback:callback];
      5. NSString *userId = @"admin";
      6. if ([userId length] > 0) {
      7. callback(@{@"success":@YES, @"userId":userId});
      8. } else {
      9. callback(@{@"success":@NO});
      10. }
      11. }
      12. @end
  2. Import your custom JSAPI into the Nebula container.

    1. Create a new bundle under MyH5Application/MyH5Application/Resources.
      Import your custom JSAPI step01 into the Nebula container.
    2. Operate as shown in the following figure.
      Import your custom JSAPI step02 into the Nebula container.
    3. Rename the bundle to CustomJsApi.bundle and empty the contents of the bundle.
    4. Create a new PLIST file in MyH5Application/MyH5Application/Resources and rename the file to Poseidon-UserDefine-Extra-Config.plist. In the JsApis array, register the JSAPI class created in the previous step. The registered JSAPI is of Dictionary type. JSAPI represents the name of the JSAPI myapi called in the HTML5 page. name represents the name of the class MyJsApiHandler4Myapi created in the previous step. Drag and drop the PLIST file into CustomJsApi.bundle.
      Import your custom JSAPI step04 into the Nebula container.
      Import your custom JSAPI step04 into the Nebula container.
  3. Register the path to the custom JSAPI with the container. In MyH5Application/MPaaS/Targets/MyH5Application/APMobileFramework/DTFrameworkInterface+MyH5Application.m, use the following API to initialize the container. Use the custom JSAPI based on the following method. Import the custom class into the container by using a PLIST file, pass the custom path NSS string to the initializer method.

       
    1. - (void)application:(UIApplication *)application beforeDidFinishLaunchingWithOptions:(NSDictionary *)launchOptions
    2. {
    3. // [MPNebulaAdapterInterface initNebula];
    4. NSString *pluginsJsapisPath = [[NSBundle mainBundle] pathForResource:[NSString stringWithFormat:@"CustomJsApi.bundle/Poseidon-UserDefine-Extra-Config.plist"] ofType:nil];
    5. [MPNebulaAdapterInterface initNebulaWithCustomPresetApplistPath:@"" customPresetAppPackagePath:@""customPluginsJsapisPath:pluginsJsapisPath];
    6. }
  4. Add code in MyH5Application/Sources/DemoViewController.m to add a new button named button2.

       
    1. UIButton *button2 = [UIButton buttonWithType:UIButtonTypeCustom];
    2. button2.frame = CGRectOffset(button1.frame, 0, 80);
    3. button2.backgroundColor = [UIColor blueColor];
    4. [button2 setTitle:@"Call the Custom JSAPI from the Front End" forState:UIControlStateNormal];
    5. [button2 addTarget:self action:@selector(openCusJsApi) forControlEvents:UIControlEventTouchUpInside];
    6. [self.view addSubview:button2];
  5. Add code in MyH5Application/Sources/DemoViewController.m to define openCusJsApi. The following code shows how this can be implemented:

       
    1. - (void)openCusJsApi
    2. {
    3. [[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"}];
    4. }

    Note: https://mcube-prod.oss-cn-hangzhou.aliyuncs.com/570DA89281533-default/80000001/1.0.0.1_all/nebula/fallback/custom_jsapi.html is a ready-to-use front-end page. You can use this page to test calling the custom JSAPI from the front end. In this front-end page, use the following method to call the custom JSAPI. As shown in the following code snippet.

       
    1. AlipayJSBridge.call('myapi', {
    2. param1: 'JsParam1',
    3. param2: 'JsParam2'
    4. }, function (result) {
    5. alert(JSON.stringify(result));
    6. });
  6. After compiling the project, install the app on a cell phone. The following figure shows the interface after you open the application.

  7. Tap Call the Custom JSAPI from the Front End button to open the front-end page. Tap Custom JSAPI to open the front-end page that contains a Custom JSAPI button. Tap the Custom JSAPI button, and an untitled alert dialog will appear. The content is the parameters processed according to the functionality defined by the custom API, which are passed in when you call the custom JSAPI from the front end. Now, you have called the custom JSAPI from the front end.

Customize the title bar for an HTML5 page

The style of the HTML5 navigation bar is blue button with black text on white background. You can customize a Plugin to modify the style of the navigation bar.

  1. Create a Plugin class.

    1. Operate as shown in the following figure.
      01

    2. Operate as shown in the following figure.
      01

    3. Operate as shown in the following figure.
      03

    4. Add code.

           
      1. - (void)pluginDidLoad
      2. {
      3. self.scope = kPSDScope_Scene;
      4. // -- Return area.
      5. [self.target addEventListener:kNBEvent_Scene_NavigationItem_Left_Back_Create_Before withListener:self useCapture:NO];
      6. [super pluginDidLoad];
      7. }
      8. - (void)handleEvent:(PSDEvent *)event
      9. {
      10. [super handleEvent:event];
      11. if ([kNBEvent_Scene_NavigationItem_Left_Back_Create_Before isEqualToString:event.eventType]) {
      12. // Modify the style of the default return button.
      13. NSArray *leftBarButtonItems = event.context.currentViewController.navigationItem.leftBarButtonItems;
      14. if ([leftBarButtonItems count] == 1) {
      15. if (leftBarButtonItems[0] && [leftBarButtonItems[0] isKindOfClass:[AUBarButtonItem class]]) {
      16. // Modify the return arrow and text color of the default return button.
      17. AUBarButtonItem *backItem = leftBarButtonItems[0];
      18. backItem.backButtonColor = [UIColor redColor];
      19. backItem.titleColor = [UIColor redColor];
      20. }
      21. }
      22. [event preventDefault];
      23. [event stopPropagation];
      24. }
      25. }
      26. - (int)priority
      27. {
      28. return PSDPluginPriority_High;
      29. }
  2. Import your custom JSAPI into the Nebula container.
    Open the Poseidon-UserDefine-Extra-Config.plist file and register the MPJsApiHandler4TitleView class created in the previous step in the Plugins array. The registered Plugins are of Dictionary type, and name represents the name of the class MyJsApiHandler4TitleView created in the previous step. Scope represents the processing scope is the page (scene).
    01

  3. Register the path to the custom Plugin with the container. In MyH5Application/MPaaS/Targets/MyH5Application/APMobileFramework/DTFrameworkInterface+MyH5Application.m, use the following API to initialize the container. Use the custom JSAPI based on the following method. Import the custom Plugin class into the container by using the PLIST file.

    Note: If you have completed registration when you call the custom JSAPI in the previous step, you can skip this step.
       
    1. - (void)application:(UIApplication *)application beforeDidFinishLaunchingWithOptions:(NSDictionary *)launchOptions
    2. {
    3. // [MPNebulaAdapterInterface initNebula];
    4. NSString *pluginsJsapisPath = [[NSBundle mainBundle] pathForResource:[NSString stringWithFormat:@"CustomJsApi.bundle/Poseidon-UserDefine-Extra-Config.plist"] ofType:nil];
    5. [MPNebulaAdapterInterface initNebulaWithCustomPresetApplistPath:@"" customPresetAppPackagePath:@""customPluginsJsapisPath:pluginsJsapisPath];
    6. }
  4. Add code in MyH5Application/Sources/DemoViewController.m to add a new button named button3.

       
    1. UIButton *button3 = [UIButton buttonWithType:UIButtonTypeCustom];
    2. button3.frame = CGRectOffset(button2.frame, 0, 80);
    3. button3.backgroundColor = [UIColor blueColor];
    4. [button3 setTitle:@"Custom Navigation Bar" forState:UIControlStateNormal];
    5. [button3 addTarget:self action:@selector(customNavigatorBar) forControlEvents:UIControlEventTouchUpInside];
    6. [self.view addSubview:button3];
  5. Add code in MyH5Application/Sources/DemoViewController.m to define customNavigatorBar. Refer to the following code.

       
    1. - (void)customNavigatorBar
    2. {
    3. [[MPNebulaAdapterInterface shareInstance] startH5ViewControllerWithParams:@{@"url":@"https://tech.antfin.com"}];
    4. }
  6. After compiling the project, install the app on a cell phone. The following figure shows the interface after you open the application.

  7. Click the Custom Navigator Bar button to open the official website of Ant Group Financial Technology. You can find that the back button changes to the customized style. The Custom Navigator Bar is complete.