全部產品
Search
文件中心

Mobile Platform as a Service:H5 JS 編程

更新時間:Jul 13, 2024

目前,很多移動 App 前端都採用了 JavaScript (JS) 語言進行編碼。mPaaS 也提供了移動端 Web 解決方案 —— H5 容器H5 容器簡介。H5 承載於 Android 和 iOS 之上,需要進行用戶端接入。

在用戶端接入 H5 容器後,前端可以很方便地使用網關:

  • 通過動態代理的方式,封裝用戶端和服務端之間的通訊。

  • 如果服務端和用戶端定義了一致的介面,可由服務端自動產生代碼並匯出給用戶端使用。

  • RpcException 進行統一的異常處理,彈對話方塊、Toast 訊息框等。

前置條件

進行 H5 JS 編程之前,需確保 Android/iOS 用戶端已經接入 H5 容器。用戶端接入方法參見 接入 Android接入 iOS

產生 JS 代碼

在移動網關控制台接入 App 後台服務後,即可通過控制台產生 RPC 的 JS SDK 供用戶端調用,詳細說明參見 產生代碼

image.png

目前針對每個 API,根據約定的介面參數,都會產生如下模板代碼:

var params = [{
    "_requestBody":{"userName":"", "userId":0}
}]
var operationType = 'alipay.mobile.ic.dispatch'

AlipayJSBridge.call('rpc', {
  operationType: operationType,
  requestData: params,
  headers:{}
}, function (result) {
  console.log(result);
});

前端需要使用到 RPC 時,會直接使用上面的模板,填入調用的請求參數。

調用 RPC 介面

JS 調用 RPC 的方法如下:

AlipayJSBridge.call('rpc', {
  operationType: 'alipay.client.xxxx',
  requestData: [],
  headers:{}
}, function (result) {
  console.log(result);
});

參數說明

參數

類型

是否必需

預設值

描述

operationType

string

Y

RPC 服務名稱

requestData

array

Y

RPC 請求的參數,需要開發人員根據具體 RPC 介面進行構造。

headers

dictionary

Y

{}

RPC 請求設定的 headers。

gateway

string

Y

alipay 網關

網關地址

compress

boolean

Y

true

是否支援 request gzip 壓縮。

disableLimitView

boolean

Y

false

RPC 網關被限流時是否禁止自動彈出統一限流彈窗。

請求結果

結果

類型

描述

result

dictionary

RPC 響應的結果。非字典結構的字串值會被放入一個字典結構,key 為 resData

錯誤碼

錯誤碼

描述

10

網路錯誤。

11

請求逾時。

其他

由 mobilegw 網關定義。