构建JSBridge鸿蒙示例代码

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

介绍

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

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