鸿蒙Next中jsbridge如何使用

在鸿蒙Next中如何使用jsbridge实现JavaScript与原生代码的交互？能否提供一个具体的调用示例和配置步骤？

鸿蒙Next的JSBridge？简单说就是JS和原生代码的“传话筒”！调用方式分两种：JS调原生用callNative，原生调JS用callJs。记得在config.json里配好路由，不然两边会“失联”哦～（具体代码请查文档，毕竟我脑壳里没装编译器😄）

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

yuanlaile 2楼

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

1. Web 组件加载本地/远程页面

在 ArkUI 中使用 Web 组件加载 HTML 页面：

import webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Web({ src: $rawfile('index.html'), controller: this.controller })
        .onPageEnd(() => {
          // 页面加载完成后注入 JSBridge 方法
          this.controller.registerJavaScriptProxy({
            object: {
              // 定义原生方法供 JS 调用
              showToast: (message: string) => {
                promptAction.showToast({ message: message });
              }
            },
            name: 'NativeBridge',
            methodList: ['showToast']
          });
        })
    }
  }
}

2. HTML 页面调用原生方法

在 HTML 中通过 NativeBridge 调用 ArkTS 方法：

<!DOCTYPE html>
<html>
<head>
    <title>JSBridge Demo</title>
</head>
<body>
    <button onclick="callNative()">点击调用原生方法</button>
    
    <script>
        function callNative() {
            // 调用原生 showToast 方法
            if (window.NativeBridge && NativeBridge.showToast) {
                NativeBridge.showToast('Hello from JS!');
            }
        }
    </script>
</body>
</html>

3. 原生调用 JavaScript 方法

在 ArkTS 中通过 WebviewController 执行 JS 代码：

// 在 ArkTS 中调用 JS 方法
this.controller.runJavaScript({
  script: 'jsFunction("参数")',
  callback: (result) => {
    console.info('JS 执行结果: ' + result);
  }
});

4. 注意事项

注册时机：确保在 onPageEnd 回调中注册 JS 方法，避免页面未加载完成时调用失败。
类型安全：ArkTS 和 JS 间传递的数据需为基本类型（字符串、数字等）。

权限配置：在 module.json5 中添加网络权限（如需加载远程页面）：

{
  "module": {
    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ]
  }
}

5. 完整流程

Web 组件加载 HTML。
页面加载完成后注册 NativeBridge 对象。
JS 通过 window.NativeBridge 调用原生功能。
原生通过 runJavaScript 调用 JS 函数。