鸿蒙Next webview桥接回调如何实现

在鸿蒙Next开发中，如何实现WebView与原生代码的桥接回调？具体需要处理JavaScript调用Native方法后的返回值传递，以及Native调用JavaScript方法的场景。能否提供示例代码说明这两种双向通信的实现方式？

2 回复

鸿蒙Next里WebView桥接回调？简单说就是JS和ArkTS的“传纸条”过程！

  1. WebView通过registerJavaScriptProxy()注册ArkTS对象给JS调用。
  2. JS用window.对象名.方法名()触发ArkTS侧逻辑。
  3. ArkTS侧用on()监听回调，数据通过Event传递。
    记住：两边方法名要对得上，不然就像打电话给空气——没人接！😄

更多关于鸿蒙Next webview桥接回调如何实现的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next（HarmonyOS NEXT）中，WebView与ArkTS（JS/TS）之间的桥接回调可以通过WebMessagePort或WebController实现。以下是两种常用方法：

方法一：使用 WebMessagePort（推荐）

  1. ArkTS端设置
    在ArkTS中创建WebMessagePort并注入到WebView：

    import webView from '[@ohos](/user/ohos).web.webview';

let webView: webView.WebviewController = ...; // 获取WebView实例
let msgPort: webView.WebMessagePort[] = webView.createWebMessagePort();

// 注册消息回调
msgPort[1].onMessageEvent((event: webView.WebMessageEvent) => {
  console.log('收到H5消息:', event.getData());
  // 回复消息给H5
  msgPort[1].postMessageEvent('ArkTS已收到消息');
});

// 将端口注入到WebView的全局对象
webView.postMessage('jsToArkTS', [msgPort[0]], '*');

  2. H5页面调用
    在H5中通过端口发送消息：

    let arkPort; // 存储端口
window.addEventListener('message', (event) => {
  if (event.data === 'jsToArkTS') {
    arkPort = event.ports[0]; // 获取端口
    arkPort.onmessage = (e) => {
      console.log('H5收到ArkTS回复:', e.data);
    };
  }
});

// 发送消息到ArkTS
arkPort.postMessage('Hello from H5');

方法二：使用 WebController 的JavaScriptProxy

  1. 注册ArkTS方法供H5调用

    webView.registerJavaScriptProxy({
  // 定义供H5调用的方法
  sendToArkTS: (msg: string) => {
    console.log('H5调用ArkTS:', msg);
    return 'ArkTS已处理'; // 返回值给H5
  }
}, 'arkTSBridge'); // 注入到H5的全局对象arkTSBridge

// 刷新WebView使代理生效
webView.refresh();

  2. H5页面调用ArkTS方法

    // 调用ArkTS方法并接收返回值
arkTSBridge.sendToArkTS('Hello from H5').then((response) => {
  console.log('ArkTS返回值:', response);
});

注意事项

  • 权限配置：在module.json5中声明ohos.permission.INTERNET权限（如果需要网络请求）。
  • 生命周期管理：在页面销毁时调用webView.destroy()释放资源。
  • 类型安全：使用TypeScript时，建议对消息数据定义接口规范。

这两种方法均可实现双向通信，推荐使用WebMessagePort处理高频或复杂数据交互，而JavaScriptProxy更适合简单的函数调用场景。

回到顶部