鸿蒙Next JSBridge如何使用

在鸿蒙Next开发中，如何使用JSBridge实现JavaScript与原生代码的交互？具体调用流程是怎样的？能否提供一个简单的示例代码说明JSBridge的初始化、方法注册和调用的步骤？

2 回复

鸿蒙Next的JSBridge？简单说就是让JS和原生代码“勾搭”起来！调用window.ohos.bridge.callNative传方法名和参数，原生端用@JavascriptInterface注解接收。记得先检查ohos.bridge是否存在，不然会像给空气发消息——白忙活！

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


鸿蒙Next的JSBridge用于实现ArkTS（前端）与Java/Kotlin（原生）之间的通信。以下是核心使用步骤及示例：

1. 创建JSBridge类

在entry/src/main/ets目录下创建JSBridge文件（如JSBridge.ets），定义前端可调用的方法：

// JSBridge.ets
import nativeModule from '@ohos.nativeModule';

export class JSBridge {
  // 前端调用原生方法
  static callNative(method: string, params: Object, callback: Function) {
    // 通过nativeModule调用原生侧注册的方法
    nativeModule.callNativeMethod(method, params, (err, data) => {
      callback(err, data);
    });
  }

  // 供原生调用的前端方法（需注册）
  static onNativeCall(method: string, data: Object) {
    // 处理原生侧发送的数据
    console.log(`收到原生调用: ${method}`, data);
  }
}

2. 原生侧注册方法（Java/Kotlin）

在entry/src/main/java中创建模块，注册JSBridge方法：

// JSBridgeModule.java
package com.example.bridge;

import ohos.ace.ability.AceAbility;
import ohos.app.Context;

public class JSBridgeModule {
  public static void init(Context context) {
    // 注册名为"showToast"的原生方法
    context.getNativeModuleManager().registerMethod(
      "showToast",
      (method, params, callback) -> {
        String message = params.getString("message");
        // 执行原生逻辑（例如显示Toast）
        showNativeToast(context, message);
        callback.success("Toast已显示");
      }
    );
  }

  private static void showNativeToast(Context context, String msg) {
    // 原生Toast实现（示例）
  }
}

在EntryAbility中初始化：

public class EntryAbility extends AceAbility {
  @Override
  public void onStart(Intent intent) {
    super.onStart(intent);
    JSBridgeModule.init(this);
  }
}

3. 前端调用原生方法

在ArkTS页面中调用注册的原生方法：

// Index.ets
import { JSBridge } from '../utils/JSBridge';

@Entry
@Component
struct Index {
  build() {
    Column() {
      Button('调用原生Toast')
        .onClick(() => {
          // 调用原生方法
          JSBridge.callNative(
            'showToast',
            { message: 'Hello from ArkTS!' },
            (err, data) => {
              if (err) {
                console.error('调用失败:', err);
              } else {
                console.log('原生返回:', data);
              }
            }
          );
        })
    }
  }
}

4. 原生调用前端方法

在原生侧触发前端注册的方法：

// 在原生代码中
context.getNativeModuleManager().callJsMethod(
  "onNativeCall", 
  "{\"action\": \"updateUI\"}"
);

关键注意事项

  1. 方法注册一致性：确保前端调用的方法名与原生注册的名称完全匹配。
  2. 参数类型转换：复杂数据需通过JSON字符串传递。
  3. 生命周期管理：在Ability的onDestroy中及时注销监听。

通过以上步骤，可快速实现ArkTS与原生模块的双向通信。具体场景可根据业务需求扩展方法。

回到顶部