HarmonyOS 原生和H5页面交互

ArkTS调用 h5 方法

h5 注册 js 函数

dsBridge.registerAsyn('showAlertAsync', function (a, b, c, callback) {
  let counter = 0
  let id = setInterval(() => {
    if (counter < 5) {
      callback(counter, false)
      alert("原生调用JS showAlertAsync函数" + a + " " + b + " " + c + " " + counter)
      counter++
    } else {
      callback(counter, true)
      alert("原生调用JS showAlertAsync函数" + a + " " + b + " " + c + " " + counter)
      clearInterval(id)
    }
  }, 1000)

})
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

ArkTS侧调用

Button("调用js函数-异步")
  .margin({ top: 10 })
  .onClick(() => {
    this.controller.callJs("showAlertAsync", [1, 2, '666'], (v: string) => {
      this.message = v + ""
    })
  })
1.
2.
3.
4.
5.
6.
7.

h5 调用 ArkTS

h5 js 适配方式

function testClick() {
  dsBridge.call('testClick', "hello", (responseData) => {
    document.getElementById("show").innerHTML = "repsonseData from java, data = " + responseData
  })
}
1.
2.
3.
4.
5.

ArkTS实现对应 testClick 方法

@JavaScriptInterface()
testClick(p: string, handler: CompleteHandler) {
  // p 为 h5 js 侧传递参数
  this.cHandler = handler
  this.cHandler.complete("it is ArkTS default response");
}
1.
2.
3.
4.
5.
6.