Features supported in HarmonyOS NEXT

JSAPIs supported in HarmonyOS NEXT

Startup parameters

The startup parameters for HarmonyOS NEXT support only the following keys.

Event extensions

Initialization operation

function ready(callback) {
  // If jsbridge is already injected, call the callback directly.
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // If not injected, listen for the injection event.
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
}

Click the title bar

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

Click the subtitle

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

Page goes to the background

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

Page resumes

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

Click the button in the upper-right corner

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

Backoff

// First, prevent the default behavior. Then, call the page navigation API for manual control.
document.addEventListener('back', function(e) {
  e.preventDefault();
  console.log('do something...')
  AlipayJSBridge.call('popWindow');
}, false);

Add a notification

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

Remove a notification

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

Post a message

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

Page context

Open a new page

// Open the Taobao homepage, automatically read the title, and remove the right menu button.
AlipayJSBridge.call('pushWindow', {
  url: 'https://m.taobao.com/',   // URL of the page to open.
  // Configuration parameters for the new page.
  param: {
    readTitle: true,              // Automatically read the title.
    showOptionMenu: false         // Hide the right menu.
  },
  // Optional. Passes parameters to the new page.
  // On the new page, use AlipayJSBridge.startupParams to get the passData.
  passData: {
    key1: "key1Value",
    key2: "key2Value"
  }
});

Close the current page

AlipayJSBridge.call('popWindow');

Start another application

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

// Note: To open multiple app instances:
// Place both appClearTop and startMultApp in param.
AlipayJSBridge.call('startApp', {
  appId: '90000000',
  param: {
    url: location.href,
    appClearTop: false,
    startMultApp: 'YES' // Note: The value is YES, not a boolean.
  }
}, function(result) {
  // noop
});

Exit the current application

AlipayJSBridge.call('exitApp');

Interface

Alert box

AlipayJSBridge.call('alert', {
  title: 'Dear',
  message: 'Hello',
  button: 'OK'
}, function(e) {
  alert(JSON.stringify(e));
});

Confirmation box

AlipayJSBridge.call('confirm', {
  title: 'Dear',
  message: 'Are you sure you want to exit?',
  okButton: 'Yes',
  cancelButton: 'No'
}, function(e) {
  alert(JSON.stringify(e));
});

Tip

AlipayJSBridge.call('toast', {
  content: 'Operation successful',
  type: 'success',
  duration: 2000
}, function() {
  alert("Execute after the toast disappears.");
});

// You can use the hideToast API to hide a toast that has already appeared.

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

Selection list

AlipayJSBridge.call('actionSheet', {
  'title': 'Title',
  'btns': ['First button', 'Second button', 'Third button'],
  'cancelBtn': 'Cancel',
  'destructiveBtnIndex': 2
}, function(data) {
  switch (data.index) { // index indicates the zero-based position of the button that the user clicked in the actionSheet.
    case 0:
      alert('First button');
      break;
    case 1:
      alert('Second button');
      break;
    case 2:
      alert('Third button');
      break;
    case 3:
      alert('Cancel button');
      break;
  }
});

Set the title

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

Set the navigation bar background color

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

Show the button in the upper-right corner

AlipayJSBridge.call('showOptionMenu');

Set the button in the upper-right corner

AlipayJSBridge.call('setOptionMenu', {
  xx // See input parameters.
});

Input parameters:

Hide the button in the upper-right corner

AlipayJSBridge.call('hideOptionMenu');

Show loading

AlipayJSBridge.call('showLoading', {
  text: 'Loading',
});

Hide loading

AlipayJSBridge.call('hideLoading');

Show title bar loading

AlipayJSBridge.call('showTitleLoading');

Hide title bar loading

AlipayJSBridge.call('hideTitleLoading');

Set the color of the bottom line of the navigation bar

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

Set the pop menu

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

Hide/show the back button

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

Utility classes

Get container startup parameters

AlipayJSBridge.call('getStartupParams', {
  key: ['url', 'xxx'] // Optional. Filters the returned results by key. If not specified, all results are returned.
}, function(result) {
  console.log(result);
});

RPC call

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

Set AP data

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

Get AP data

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

Remove AP data

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

List of unsupported JSAPIs

Native features

QR code scanning and parsing is not supported.

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

Alternative solution

You can implement this feature in the business layer. Register a custom JSAPI and use it to call the mPaaS QR code scanning component or a system interface.

Utility classes

• Taking screenshots is not supported.

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

  Alternative solution

  You can implement this feature in the business layer. Register a custom JSAPI and use it to call a system interface.

  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 is the screenshot result.
        })
        return true
      }
      return super.handleEvent(event, context);
    }
  }

• Reporting instrumentation data is not supported.

  AlipayJSBridge.call('remoteLog', {
   bizType: "Nebula", // Business type
   logLevel: 1, // 1 - high, 2 - medium, 3 - low
   actionId: "event", // Instrumentation type, fixed to "event"
   seedId: "Login", // Unique instrumentation ID
   param1: "",
   param2: "",
   param3: "",
   param4: {key1:"value1",key2:"value2"}, // Custom parameters
  });