HarmonyOS NEXT 支持的功能说明

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"}, // 自定义参数
  });