Introduction to H5 Shell MiniApp

To develop H5 Shell MiniApp, please contact the mini program team to obtain the necessary authorization.

Usage Limitations

Those functions are supported in the basic library version 3.1.0 and later.

Principle Explanation

1. The Essence of H5 Shell MiniApp: Hybrid Development Technology

In simple terms, web pages run within the mini-program container and communicate with the mini-program container by injecting a bridge. This allows web pages to access some of the capabilities provided by the mini-program container, such as obtaining the mini-program platform's UID and system information.

2. How is the Bridge Injected?

1. The bridge is, in fact, a piece of JavaScript code that encapsulates the ability to establish communication with the mini program container and make basic API calls.

2. The reference to the bridge is the same as a regular JavaScript script and can be included via a script tag. Add the following script tag to HTML where you need to use mini program APIs:

   <script src="https://app-oss.byte-app.com/common/js/byteh5bridge.aio.min.js"></script>

3. After the bridge is successfully loaded, it will mount @transsion/byteh5bridge on the window object. You can check whether the bridge has loaded successfully by testing for the presence of the @transsion/byteh5bridge property on the window object:

   if (typeof window['@transsion/byteh5bridge'] !== 'undefined') {
     console.log('Bridge file loaded');
   }

4. After the bridge is successfully loaded, you need to determine if it is running within MiniShell (the H5 Shell MiniApp runtime). You can use the window.dltms.isMiniShellGame() method to check whether it is running in the MiniShell. If it is running in the MiniShell environment, this method will return true. Here's the condition for checking:

   if (window.dltms && window.dltms.isMiniShellGame()) {
     console.log('Running in MiniShell');
   }

Usage Steps

1. Include the Bridge JS File in the Page

<script src="https://app-oss.byte-app.com/common/js/byteh5bridge.aio.min.js"></script>

2. Explanation of the Calling Method

In H5 shell mini programs, the calling format is consistent and involves using the callApi(methodName, params) method.

Explanation of the callApi Parameters

Parameter	Type	Required	Description
methodName	String	Yes	The name of the method to call
params	Object	No	Call parameters

Explanation of the params Parameters success, fail, and complete are common parameters.

Parameter	Type	Required	Description
success	Function	No	Callback for a successful call, executed after the call succeeds
fail	Function	No	Callback for a failed call, executed after the call fails
complete	Function	No	Callback for the completion of the call, executed after the call is complete, regardless of success or failure
Other Parameters	Any	No	Depending on the specific method call, some may require additional parameters. Relevant explanations will be provided in the specific API usage documentation.

Calling Format

const dlt = window['@transsion/byteh5bridge'];
const canCallDlt = dlt && window.dltms && window.dltms.isMiniShellGame();

if (canCallDlt) {
  // `methodName` is the name of the API to call
  dlt.callApi(`${methodName}`, {
    paramA: 'xxx', // Specific parameters
    success: (res) => {
      console.log('Success: ', res);
    },
    fail: (res) => {
      console.log('Fail: ', res);
    },
    complete: (res) => {
      console.log('Complete: ', res);
    },
  });
}

Explanation of Common Return Results

Attribute	Type	Description
success	String	Describes whether the interface call was successful or not. "true" for success, "false" for failure.
errMsg	String	This field will only be present when success is "false".
Other Parameters	Any	Depending on the specific API, some methods may return additional fields. Relevant explanations will be marked in the specific API usage documentation.

Note: When the interface call is successful, the corresponding additional parameter data will be returned in the success callback function. In case of failure, the result will be returned in the fail callback function, and it will match the common return result. The complete callback function, when the method call is successful, will have the same content as the success callback function, and in case of failure, it will match the fail callback function.