构建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)
  }
}
  • 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
}
}

分类
收藏
回复
举报
回复
    相关推荐