HarmonyOS NEXT 版本支持的 JSAPI

啟動參數

HarmonyOS NEXT 啟動參數僅支持以下 key。

事件擴展

初始化操作

function ready(callback) {
  // 如果 jsbridge 已經注入則直接調用
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // 如果沒有注入則監聽注入的事件
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
}

點擊標題欄

document.addEventListener('titleClick', function(e) {
  alert('title clicked')
}, false);

點擊副標題

document.addEventListener('subtitleClick', function (e) {
  alert('subtitle clicked')
}, false);

頁面壓后臺

document.addEventListener('pause', function(e) {
  alert("pause");
}, false);

頁面恢復運行

document.addEventListener('resume', function(e) {
  console.log("resumed");
}, false);

點擊右上角按鈕

document.addEventListener('optionMenu', function (e) {
  alert("option menu clicked");
}, false);

回退

// 首先屏蔽默認行為，然后調用頁面跳轉 API 進行手動控制
document.addEventListener('back', function(e) {
  e.preventDefault();
  console.log('do something...')
  AlipayJSBridge.call('popWindow');
}, false);

添加通知

AlipayJSBridge.call('addNotifyListener', {
  name:'fortest'
}, function (result) {
  console.log(result);
});

移除通知

AlipayJSBridge.call('removeNotifyListener', {
  name: 'fortest'
}, function (result) {
  console.log(result);
});

分發消息

AlipayJSBridge.call('postNotification', {
  name:'fortest',
  data:{}
}, function (result) {
  console.log(result);
});

頁面上下文

打開新頁面

// 打開淘寶首頁，自動讀取 title，并且去除右邊菜單按鈕
AlipayJSBridge.call('pushWindow', {
  url: 'https://m.taobao.com/',   // 要打開頁面的 URL
  // 打開頁面的配置參數
  param: {
    readTitle: true,              //自動讀取 title
    showOptionMenu: false         // 隱藏右邊菜單
  },
  // 用于給新開的頁面傳遞參數，可選
  // 在新開的頁面使用 AlipayJSBridge.startupParams 可以獲取到 passData
  passData: {
    key1: "key1Value",
    key2: "key2Value"
  }
});

關閉當前頁面

AlipayJSBridge.call('popWindow');

啟動其他應用

AlipayJSBridge.call('startApp', {
  appId: '90000000',
  param: {
    url: '/index.html'
  }
}, function(result) {
  // noop
});

// 注意，如果要打開多個 App 實例：
// 請將 appClearTop 和 startMultApp 都放在 param 里
AlipayJSBridge.call('startApp', {
  appId: '90000000',
  param: {
    url: location.href,
    appClearTop: false,
    startMultApp: 'YES' // 注意這個值是 YES，而不是 bool 類型
  }
}, function(result) {
  // noop
});

退出當前應用

AlipayJSBridge.call('exitApp');

界面

警告框

AlipayJSBridge.call('alert', {
  title: '親',
  message: '你好',
  button: '確定'
}, function(e) {
  alert(JSON.stringify(e));
});

確認框

AlipayJSBridge.call('confirm', {
  title: '親',
  message: '確定要退出嗎？',
  okButton: '是',
  cancelButton: '否'
}, function(e) {
  alert(JSON.stringify(e));
});

弱提示

AlipayJSBridge.call('toast', {
  content: '操作成功',
  type: 'success',
  duration: 2000
}, function() {
  alert("toast消失后執行");
});

// 可以通過 hideToast 接口隱藏已經彈出的 toast

AlipayJSBridge.call('hideToast', {}, function() {
});

選擇列表

AlipayJSBridge.call('actionSheet', {
  'title': '標題',
  'btns': ['第一個按鈕', '第二個按鈕', '第三個按鈕'],
  'cancelBtn': '取消',
  'destructiveBtnIndex': 2
}, function(data) {
  switch (data.index) { // index 標示用戶點擊的按鈕在 actionSheet 中的位置，從 0 開始
    case 0:
      alert('第一個按鈕');
      break;
    case 1:
      alert('第二個按鈕');
      break;
    case 2:
      alert('第三個按鈕');
      break;
    case 3:
      alert('取消按鈕');
      break;
  }
});

設置標題

AlipayJSBridge.call('setTitle', {
  title: '標題',
});

設置導航欄背景色

AlipayJSBridge.call("setTitleColor", {
  color: 16775138
});

顯示右上角按鈕

AlipayJSBridge.call('showOptionMenu');

設置右上角按鈕

AlipayJSBridge.call('setOptionMenu', {
  xx // 參考入參
});

入參：

隱藏右上角按鈕

AlipayJSBridge.call('hideOptionMenu');

顯示加載中

AlipayJSBridge.call('showLoading', {
  text: '加載中',
});

隱藏加載中

AlipayJSBridge.call('hideLoading');

顯示標題欄加載中

AlipayJSBridge.call('showTitleLoading');

隱藏標題欄加載中

AlipayJSBridge.call('hideTitleLoading');

設置導航欄底部細線顏色

AlipayJSBridge.call("setBarBottomLineColor", {
  color: 16711688
});

設置 pop 菜單

AlipayJSBridge.call('showPopMenu');
AlipayJSBridge.call('setToolbarMenu');

隱藏/顯示返回按鈕

AlipayJSBridge.call('showBackButton');
AlipayJSBridge.call('hideBackButton');

工具類

獲取容器的啟動參數

AlipayJSBridge.call('getStartupParams', {
  key: ['url', 'xxx'] // 可選，根據 key 值過濾返回結果，不填返回全部
}, function(result) {
  console.log(result);
});

RPC 調用

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

設置 AP 數據

AlipayJSBridge.call('setAPDataStorage', {
  type: "common",
  business: "customBusinessKey",
  key: "customKey",
  value: "customValue"
}, function(result) {
  alert(JSON.stringify(result));
});

獲取 AP 數據

AlipayJSBridge.call('getAPDataStorage', {
  type, business, key
});

移除 AP 數據

AlipayJSBridge.call('removeAPDataStorage', {
  type: "common",
  business: "customBusinessKey",
  key: "customKey",
}, function(result) {
  alert(JSON.stringify(result));
});

不支持的 JSAPI 列表

Native 功能

目前不支持掃碼解析。

AlipayJSBridge.call('scan', {
  type: 'bar',
  actionType: 'scan'
}, function(result) {
  alert(JSON.stringify(result));
});

替代方案

由業務實現，注冊對應的 JSAPI，并在 API 里調用 mPaaS 掃碼組件或者系統接口。

工具類

• 目前不支持截屏。

  AlipayJSBridge.call('snapshot', function(result) {
   console.log(result.success);
  });

  替代方案

  由業務實現，注冊對應 JSAPI，并在 API 里調用系統接口。

  export class H5CustomPlugin extends H5SimplePlugin {
    static pageInfos?: NavPathStack
  
    onPrepare(filter: H5EventFilter): void {
      filter.addAction('snapshot')
    }
  
    handleEvent(event: H5Event, context: H5BridgeContext): Boolean {
      if ('snapshot' == event.action) {
        let page = event.target as Page
        componentSnapshot.get(page.webComponentId, (error: Error, pixmap: image.PixelMap) => {
          if (error) {
            console.log("error: " + JSON.stringify(error))
            return;
          }
  
          // pixmap 截圖結果
        })
        return true
      }
      return super.handleEvent(event, context);
    }
  }

• 目前不支持上報埋點。

  AlipayJSBridge.call('remoteLog', {
   bizType: "Nebula", // 業務類型
   logLevel: 1, // 1 - high, 2 - medium, 3 - low
   actionId: "event", // 埋點類型，固定為 "event"
   seedId: "Login", // 埋點唯一標識
   param1: "",
   param2: "",
   param3: "",
   param4: {key1:"value1",key2:"value2"}, // 自定義參數
  });