All Products
Search
Document Center

H5 JS programming

Last Updated: Apr 26, 2021

At present, JavaScript (JS) is widely used in mobile App frontend coding. mPaaS also provides the mobile Web solution accordlingly - HTML5 Container. HTML5 is based on Android and iOS, so client access is required to use HTML5 Container.

After the client accesses HTML5, the frontend can conveniently use MGS to implement the following functions:

  • Encapsulate the communication between client and server via dynamic agent.
  • If the server and client have defined the same interfaces, you can generate codes and export them for the use by client.
  • Uniformly process RpcException by using pop-up dialog, toast, and so on.

Prerequisites

Before you perform HTML5 JS programming, you should ensure that Android/iOS client has accessed HTML5 Container. For how to integrate HTML5 Container to client, see Access Android and Access iOS

Generate JS codes

When the App backend services are added in the the MGS console, the JS SDK for RPC can be automatically generated on the console. See Mobile Gateway Service > Generate code for more information.

generate code

According to the agreed API parameters, the following template codes will be generated for each API:

  1. var params = [{
  2. "_requestBody":{"userName":"", "userId":0}
  3. }]
  4. var operationType = 'alipay.mobile.ic.dispatch'
  5. s
  6. AlipayJSBridge.call('rpc', {
  7. operationType: operationType,
  8. requestData: params,
  9. headers:{}
  10. }, function (result) {
  11. console.log(result);
  12. });

When the frontend needs to use RPC, it uses the template mentioned above and fills the called request parameters into the template.

Call RPC interface

The method that JS calls RPC is as follows:

  1. AlipayJSBridge.call('rpc', {
  2. operationType: 'alipay.client.xxxx',
  3. requestData: [],
  4. headers:{}
  5. }, function (result) {
  6. console.log(result);
  7. });
  • Parameter description
Name Type Required Default value Description
operationType string N RPC service name
requestData array N Parameter of RPC request, developers need to build it on their own according to the actual RPC interface
headers dictionary Y {} The headers of RPC request
gateway string Y alipay gateway Gateway address
compress boolean Y true Whether or not the request gzip compressing is supported
disableLimitView boolean Y false Whether or not to disable the auto pop-up of traffic limit window when the traffic of RPC gateway is limited
  • Request result
Result Type Description
result dictionary The result of RPC response (The string values of non-dictionary structure will be put into a dictionary structure, the key is resData)
  • Error codes
Error code Description
10 Network error
11 Request timeout
Others Defined by mobilegw