文档

HarmonyOS NEXT 支持的功能说明

更新时间:

HarmonyOS NEXT 版本支持的 JSAPI

启动参数

HarmonyOS NEXT 启动参数仅支持以下 key。

名称

缩写

类型

说明

默认值

pushWindow 是否可用

url

-

string

起始 URL

“”

defaultTitle

dt

string

默认标题,在页面第一次加载之前显示在标题栏上。

“”

showTitleBar

sl

string

true/false,是否显示标题栏

true

readTitle

rt

string

YES/NO,是否读取网页标题显示在 titleBar 上。

“YES”

backgroundColor

bc

int

设置背景颜色(十进制,例如:bc=16775138)。

#ffffff

-

showOptionMenu

so

bool

YES/NO,是否显示右上角的“...”按钮。

对于 H5App 为NO,对于非 H5App 为YES

-

showBackButton

--

string

YES/NO,是否显示左上角返回按钮

默认 YES

centerTitle

--

string

YES/NO,标题是否居中

默认 NO

事件扩展

初始化操作

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 // 参考入参
});

入参:

属性

类型

描述

必填

默认值

title

string

右按钮文字。

Y

“”

icon

string

右按钮图标 URL,base64(since 9.0)。

8.3 及以前版本:iOS 40x40(周边不留白),Android 50x50(四边各透明留白 5px)。

8.4 及以后版本:两个平台统一使用 40x40(周边不留白)。

Y

“”

reset

bool

重置为系统默认,当 reset=true 时,忽略其他参数。

Y

false

color

string

文字颜色值。

N

“#FFFFFFFF”

override

bool

在需要设置多个 option 的情况下,是否保留默认的 optionMenu。

N

false

menus

array

设置多个按钮。

N

[ ]

preventDefault

bool

是否阻止默认的分享功能(默认是弹分享框)preventDefault=true 时,会阻止默认的分享。

N

[ ]

icontype

string

根据图片类型加载容器预置图片,与 title、icon 三选一。

重要

具体类型包含 user(账户)、filter(筛选器)、search(查找)、add(添加)、settings(设置)、scan(扫一扫)、info(信息)、help(帮助)、locate(定位)、more(更多)、mail(邮箱)。

N

“”

隐藏右上角按钮

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));
});

工具类

  • 目前不支持截屏

    AlipayJSBridge.call('snapshot', function(result) {
     console.log(result.success);
    });
  • 目前不支持上报埋点

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

目前不支持的其他功能

  • MAS 日志上报