Mobile Platform as a Service:Custom JSAPIs

The HTML5 container component provides the following capabilities:

• A rich set of built-in JSAPIs to implement features such as page push, page pop, and title settings. For more information, see Built-in JSAPIs.

• Support for custom JSAPIs and plugins to meet your extended business requirements.

This topic describes how to implement custom JSAPIs and plugins.

About this task

Custom JSAPI plugins have the following features:

• The HTML5 container provides a mechanism for external services to register plugin configurations. This allows different services to integrate with the HTML5 container with greater flexibility.

• Services can use this method to register custom external plugins. The code can be placed in its own bundle without involving the HTML5 container. When a plugin is registered using a plugin configuration, the HTML5 container initializes the object only when the page calls it, rather than generating the object immediately.

• The plugin implementation and registration can be in different bundles to achieve dependency decoupling. You can dynamically inject the plugin into the container using H5Service.

Call Native from a frontend page

To call Native from a frontend page, configure the client and frontend code by following these steps.

1. Register the JSAPI using the JSAPI registration interface of MPNebula.

   Note

   To view the source code of MyJSApiPlugin, see Code examples.

   • The JSAPI registration interface is as follows:

     /**
     * Registers a custom HTML5 plugin (JSAPI).
     *
     * @param className  The class name of the plugin. The full path (package + class) is required.
     * @param bundleName The bundle name. You can view the bundle name in the main module/build/intermediates/bundle/META-INF/BUNDLE.MF file. If the plugin is written in the portal project, set bundleName to an empty string ("").
     * @param scope      The scope. Default value: page.
     * @param events     The events to register.
     */
     public static void registerH5Plugin(String className, String bundleName, String scope, String[] events)

   • The following code provides an example of registration:

     MPNebula.registerH5Plugin(
       MyJSApiPlugin.class.getName(),
       BuildConfig.BUNDLE_NAME,
       "page",
       new String[]{"myapi1","myapi2",H5Plugin.CommonEvents.H5_PAGE_SHOULD_LOAD_URL}
     );

2. Frontend call.

   To make a frontend call to the custom JSAPI, change the `event` parameter to the event that the plugin registered. The plugin uses event.getParam() to retrieve the value passed from the JS and then parses the data.

   AlipayJSBridge.call('myapi2', {
    param2: 'World'
   },
   function(result) {
    console.log(result);
   });

Call a frontend page from Native

Native can also call a frontend page from the HTML5 container. For example, in the case of the network change JSAPI, the page listens for the event. The required frontend and client code is as follows:

1. Register a listener on the frontend.

   document.addEventListener('h5NetworkChange',
   function(e) {
    alert("The network environment has changed. You can call the getNetworkType API to obtain details.");
   },
   false);

2. When the client detects a network change, it sends a call event to the page.

   JSONObject param = new JSONObject();
   // Set custom parameters for param.
   param.put("data", param);
   H5Page h5Page = h5Service.getTopH5Page();
   if (h5Page != null) {
    h5Page.getBridge().sendDataWarpToWeb("h5NetworkChange", param, null);
   }

Use Inspect

You can use the Chrome inspect tool to check whether the call to the custom JSAPI is valid:

1. Connect your mobile phone to your computer. On your computer, open the Chrome browser and enter chrome://inspect to go to the debugging page.

2. In the mPaaS demo, open the Ant Financial homepage. The Chrome inspect page appears, as shown in the following figure:

   Note

   If a blank screen appears when you open chrome://inspect on your computer, upgrade Chrome to the latest version.

   

3. Click inspect in the figure. The following page appears:

   

4. Click Console on the page toolbar to enter the page debugging mode. You can then call your custom API operations, as shown in the figure.

Related links

• Code examples

• FAQ