[HarmonyOS][K老师]鸿蒙当中怎么快速集成JSBrige使得前端页面调用鸿蒙侧封装的方法？在鸿蒙(HarmonyOS)应用中如何快速集成JSBridge实现前端页面调用原生能力？原创

K老师 2026-01-01 15:25:43 发布

14021 浏览 362 点赞 0 收藏

很简单，分三步就行了：

｜鸿蒙侧创建Web组件并加载前端页面。

｜鸿蒙侧通过Web组件的`javaScriptProxy`方法注入一个本地对象到前端页面，这个对象将作为前端调用Native方法的桥梁。

｜前端页面通过这个注入的对象调用Native方法。

一、核心集成步骤

1. 创建前端与鸿蒙通信桥梁

// native/JsBridge.ets
import web_webview from '@ohos.web.webview';

export class JsBridge {
  private controller: web_webview.WebviewController;

  constructor(controller: web_webview.WebviewController) {
    this.controller = controller;
  }

  // 注册原生方法供JS调用
  registerNativeHandler(methodName: string, handler: (data: string) => void) {
    this.controller.registerJavaScriptProxy({
      object: {
        // 暴露给JS的方法
        [methodName]: (jsonData: string) => {
          handler(jsonData);
          return "ACK"; // 返回确认信息
        }
      },
      name: 'nativeBridge',
      methodList: [methodName]
    });
  }

  // 调用JS方法
  callJsFunction(funcName: string, data: object) {
    const jsCode = `window['${funcName}'](${JSON.stringify(data)})`;
    this.controller.runJavaScript(jsCode);
  }
}

2. 在Ability中使用Web组件

// entryability/EntryAbility.ets
import { JsBridge } from '../native/JsBridge';

@Entry
@Component
struct WebPage {
  private controller: web_webview.WebviewController = new web_webview.WebviewController();
  private jsBridge: JsBridge = new JsBridge(this.controller);

  aboutToAppear() {
    // 注册原生方法
    this.jsBridge.registerNativeHandler('scanQRCode', this.handleScanQRCode);
    this.jsBridge.registerNativeHandler('getLocation', this.handleGetLocation);
  }

  // 扫码功能实现
  private handleScanQRCode = (data: string) => {
    const scanResult = "QR_CODE_RESULT"; // 实际调用扫码API
    this.jsBridge.callJsFunction('onScanResult', { result: scanResult });
  }

  // 获取位置实现
  private handleGetLocation = (data: string) => {
    geoLocation.getCurrentLocation((location) => {
      this.jsBridge.callJsFunction('onLocationUpdate', {
        lat: location.latitude,
        lng: location.longitude
      });
    });
  }

  build() {
    Column() {
      Web({
        src: $rawfile("index.html"),
        controller: this.controller
      })
        .javaScriptAccess(true) // 启用JS执行
        .onPageEnd(() => {
          // 注入JSBridge初始化脚本
          this.controller.runJavaScript(`window.nativeBridge = {
            callNative: (method, data) => {
              return prompt('JSBridge:' + method, JSON.stringify(data));
            }
          }`);
        })
    }
  }
}

3. 前端页面调用原生方法 (index.html)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HarmonyOS JSBridge</title>
</head>
<body>
  <button onclick="scanQR()">扫码</button>
  <button onclick="getLocation()">获取位置</button>

  <script>
    // 调用原生扫码功能
    function scanQR() {
      nativeBridge.callNative('scanQRCode', { type: 'qrcode' })
        .then(ack => console.log('Scan initiated'))
        .catch(err => console.error(err));
    }

    // 调用原生定位功能
    function getLocation() {
      nativeBridge.callNative('getLocation', { precision: 'high' })
        .then(ack => console.log('Location requested'))
        .catch(err => console.error(err));
    }

    // 接收原生回调
    window.onScanResult = (data) => {
      console.log('Scan result:', data.result);
      alert('扫描结果: ' + data.result);
    }

    window.onLocationUpdate = (data) => {
      console.log('Location:', data.lat, data.lng);
      alert(`位置: ${data.lat}, ${data.lng}`);
    }
  </script>
</body>
</html>

二、关键配置

1. 权限申请 (module.json5)

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

2. 安全配置 (网络安全)

// resources/base/profile/main_pages.json
{
  "src": [
    {
      "uri": "index.html",
      "type": "page"
    }
  ],
  "web": {
    "access": true,
    "domStorageAccess": true,
    "imageAccess": true,
    "javaScriptProxy": true
  }
}

三、通信原理说明

JS调用Native：// 前端调用 nativeBridge.callNative('methodName', {param: value}) // 鸿蒙接收 controller.registerJavaScriptProxy() 注册的方法
Native调用JS：// 鸿蒙调用 controller.runJavaScript(`window.functionName(${JSON.stringify(data)})`) // 前端接收 window.functionName = (data) => { ... }

四、最佳实践

错误处理增强：// 在JsBridge中添加 private errorHandler = (error: Error) => { this.controller.runJavaScript( `console.error("Native Error:", ${JSON.stringify(error.message)})` ); } // 注册方法时使用 registerNativeHandler(methodName: string, handler: Function) { try { // ...原有逻辑 } catch (error) { this.errorHandler(error); } }
类型安全通信：// 创建类型映射 interface BridgeMethods { scanQRCode: { type: string }; getLocation: { precision: string }; // ...其他方法 } // 修改registerNativeHandler registerNativeHandler<K extends keyof BridgeMethods>( methodName: K, handler: (data: BridgeMethods[K]) => void ) { ... }
性能优化：// 批量注入方法 registerMultipleHandlers(handlers: Record<string, Function>) { const methodList = Object.keys(handlers); this.controller.registerJavaScriptProxy({ object: handlers, name: 'nativeBridge', methodList }); }

五、调试技巧

开启Web调试：Web({ src: $rawfile("index.html"), controller: this.controller }) .onDebugReady((event) => { web_webview.WebviewController.setWebDebuggingAccess(true); })
使用Chrome DevTools：chrome://inspect/#devices

这种实现方式：

使用prompt作为通信通道（兼容性最好）
支持双向异步通信
包含完整的错误处理
保持类型安全
实际项目中可封装为npm包复用

注意事项：每次页面刷新后需重新注入bridge对象复杂对象需JSON序列化敏感操作需添加权限校验大量数据传输建议使用ArrayBuffer

©本站发布的所有内容，包括但不限于文字、图片、音频、视频、图表、标志、标识、广告、商标、商号、域名、软件、程序等，除特别标明外，均来源于网络或用户投稿，版权归原作者或原出处所有。我们致力于保护原作者版权，若涉及版权问题，请及时联系我们进行处理。

分类

HarmonyOS

标签