鸿蒙Next中如何使用jsbridge

在鸿蒙Next开发中，如何正确使用jsbridge实现JavaScript与原生代码的交互？具体需要引入哪些依赖或配置？能否提供一个简单的调用示例，比如从JS调用原生方法并获取返回值的完整流程？

2 回复

鸿蒙Next里用JSBridge？简单说就是JS和原生代码的“传话筒”！调用window.xxx.postMessage()发消息，原生用onMessage接单。记得加回调处理，不然两边大眼瞪小眼。官方文档最靠谱，别瞎试！

更多关于鸿蒙Next中如何使用jsbridge的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next（HarmonyOS NEXT）中，JSBridge 用于实现 JavaScript 与原生（ArkTS）之间的通信。以下是核心使用方法：

1. 基本通信机制

  • JavaScript 调用原生方法：通过 WebView 的 registerJavaScriptProxy() 注册原生方法，供前端调用。
  • 原生调用 JavaScript 方法：通过 WebView 的 runJavaScript() 执行 JS 代码。

2. 代码示例

步骤 1：在 ArkTS 中注册 JS 可调用的方法

// 导入 WebView 模块
import webView from '@ohos.web.webview';

// 自定义类，提供原生方法
class NativeBridge {
  // 供 JS 调用的方法
  showToast(message: string): void {
    // 调用原生 UI 组件显示提示
    prompt.showToast({ message: `Native: ${message}` });
  }
}

// 在 WebView 中注册
@Entry
@Component
struct WebComponent {
  controller: webView.WebviewController = new webView.WebviewController();

  aboutToAppear() {
    // 注册 NativeBridge 实例到 WebView，命名为 'nativeBridge'
    this.controller.registerJavaScriptProxy(
      new NativeBridge(), 
      'nativeBridge', 
      ['showToast'] // 暴露的方法列表
    );
  }

  build() {
    Column() {
      // 加载本地或远程页面
      Web({ src: $rawfile('index.html'), controller: this.controller })
    }
  }
}

步骤 2：在前端 HTML/JS 中调用原生方法

<!DOCTYPE html>
<html>
  <body>
    <button onclick="callNative()">点击调用原生方法</button>
    <script>
      function callNative() {
        // 通过注册的 'nativeBridge' 对象调用原生方法
        if (window.nativeBridge && window.nativeBridge.showToast) {
          window.nativeBridge.showToast('Hello from JS!');
        } else {
          console.error('JSBridge 未就绪');
        }
      }
    </script>
  </body>
</html>

步骤 3：原生调用 JavaScript 方法

// 在 ArkTS 中触发 JS 方法
this.controller.runJavaScript(
  "javascript:window.jsCallback('数据来自原生端');",
  (error) => {
    if (error) {
      console.error('执行 JS 失败: ' + error);
    }
  }
);

3. 注意事项

  • 注册时机：确保在 WebView 加载页面完成前（如 aboutToAppear）完成代理注册。
  • 类型安全：鸿蒙Next 要求 ArkTS 侧使用严格类型，JS 传参需匹配。
  • 错误处理：在 JS 中检查 window.nativeBridge 是否存在，避免调用失败。
  • 权限配置：若使用网络资源，需在 module.json5 中配置 ohos.permission.INTERNET 权限。

4. 适用场景

  • 混合开发中 Web 与原生功能交互（如设备传感器、文件操作）。
  • 动态更新前端界面逻辑，由原生层控制。

通过以上步骤，可快速实现鸿蒙Next中 JavaScript 与原生代码的双向通信。

回到顶部