# OHOSJavaScriptInterface

**Repository Path**: crazycode_ohos/ohos-javascript-interface

## Basic Information

- **Project Name**: OHOSJavaScriptInterface
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-25
- **Last Updated**: 2026-03-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# jsbridge-interface
像Android @JavaScriptInterface一样标记注册webview的JSBridge方法。

适用于 **HarmonyOS鸿蒙** 的 WebView JSBridge 装饰器 HAR 库。

通过装饰器自动标记、收集、管理提供给 **Native（ArkTS）** 调用的 JavaScript 方法。

## 功能
✅ 支持鸿蒙 WebView  
✅ 装饰器标记 JS 接口  
✅ 自动收集方法名称
✅ 低侵入、无耦合  
✅ 纯 ARKTS 实现，可直接在鸿蒙项目中使用

## 适用场景
- 鸿蒙 Web 组件（WebView）
- ArkTS ↔ JS 双向通信

## 安装方式（本地 HAR）
```
ohpm install @crazycode/jsbridge_interface
```

或者在 `oh-package.json5` 添加依赖：

```json
"dependencies": {
  "@crazycode/jsbridge_interface": "1.0.0"
}

```    


## 使用
1. 先定义AppJSBridge，并使用@JavaScriptInterface()标记需要注册的JSBridge方法。
```        
import {
JavaScriptInterface, getJavaScriptInterfaceMethodName
} from 'jsbridge_interface';

定义JSBridge
export class AppJSBridge {
  private webController: webview.WebviewController

  constructor(webController: webview.WebviewController) {
    this.webController = webController;
  }

  @JavaScriptInterface()
  showToast(msg: string): string {
    console.log('[JSBridge] showToast:', msg);
    prompt.showToast({
      duration: 1500,
      message: msg
    })
    return `Native收到消息：${msg}`;
  }

  @JavaScriptInterface()
  closeWebView() {
    console.log('[JSBridge] closeWebView');
    prompt.showToast({
      duration: 1500,
      message: 'closeWebView called'
    })
  }

  @JavaScriptInterface()
  getDeviceInfo(): Record<string, string> {
    return {
      "platform": 'harmonyos',
      "version": '6.0+'
    } as Record<string, string>;
  }

  privateMethod() {
    console.log('[JSBridge] privateMethod');
  }

  @JavaScriptInterface()
  arrowMethod = (param: string) => {
    console.log(`[JSBridge] arrowMethod ${param}`);
  }
}
```   

注册
通过getJavaScriptInterfaceMethodName获取需要注册的方法名。
```   
private bridge: AppJSBridge = new AppJSBridge(this.webController);

const methodNames: string[] = getJavaScriptInterfaceMethodName(this.bridge);
console.log('注册的JS方法：', JSON.stringify(methodNames));
this.webController.registerJavaScriptProxy(this.bridge, 'appBridge', methodNames);
this.webController.refresh()
```   
## 仓库
[ohos-javascript-interface](https://gitee.com/crazycode_ohos/ohos-javascript-interface)