构建JSBridge鸿蒙示例代码

鸿蒙场景化示例代码技术工程师
发布于 2025-3-13 14:07
浏览
0收藏

本文原创发布在华为开发者社区

介绍

本示例实现了简单的JSBridge,使H5和原生两侧可以互相调用对方的方法。

构建JSBridge源码链接

效果预览

构建JSBridge鸿蒙示例代码-鸿蒙开发者社区

使用说明

打开应用后,点击调用native按钮,实现原生方面调用H5方法,在后台打印数据。

实现思路

  • 原生调H5
invokeHandle(handleName: string, callbackName: string) {
  try {
    this.webviewController.runJavaScript(`jsBridge.registerHandle('${handleName}', '${callbackName}')`)
      .then(res => {
        if (res) {
          console.log('原生调h5成功:' + res)
        } else {
          console.log('原生调h5失败')
        }
      })
      .catch((err: BusinessError) => {
        console.log('原生调h5失败:' + err.message)
      })
  } catch (e) {
    console.log((e as BusinessError).message)
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • H5调原生
callHandle(handleName: string, data: object, callback?: (payload: object) => void): void {
  switch (handleName) {
      case 'userInfo':
        this.userInfo(data, callback)
        break
  case 'h5Callback':
  this.h5Callback(data, callback)
  break
  default:
  break
}
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.

分类
收藏
回复
举报


回复
    相关推荐