# jsbridge-harmony

**Repository Path**: ws127/jsbridge-harmony

## Basic Information

- **Project Name**: jsbridge-harmony
- **Description**: 鸿蒙原生与h5通信交互的bridge框架
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2025-01-23
- **Last Updated**: 2025-01-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## jsbridge
jsbridge是一个鸿蒙原生与h5通信交互的bridge框架，简单易用，能有效解耦，js侧api兼容如下两个平台：

android： https://github.com/uknownothingsnow/JsBridge

ios： https://github.com/marcuswestin/WebViewJavascriptBridge

## 下载安装

```javascript
ohpm i @alvin917/jsbridge
```

## 使用
参考demo，大概步骤如下：

1、hvigor-config.json5文件中配置依赖：
```c
"dependencies": {
    '@alvin917/jsbridge-plugin': "1.0.4"
}
```

2、在entry module中的hvigorfile.ts如下配置：
```c
import { hapTasks } from '@ohos/hvigor-ohos-plugin';
import { BridgeHapPlugin } from "@alvin917/jsbridge-plugin";

export default {
    system: hapTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
    plugins:[         /* Custom plugin to extend the functionality of Hvigor. */
        BridgeHapPlugin()
    ]
}
```

3、在提供bridge api的module 下的hvigorfile.ts中配置：
```c
import { harTasks } from '@ohos/hvigor-ohos-plugin';
import { BridgeHarPlugin } from '@alvin917/jsbridge-plugin';

export default {
    system: harTasks, /* Built-in plugin of Hvigor. It cannot be modified. */
    plugins: [/* Custom plugin to extend the functionality of Hvigor. */
        BridgeHarPlugin()
    ]
}
```

4、在EntryAbility的onCreate初始化。
```c
onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');

    BridgeHelper.init()
}
```

5、声明bridge类，并使用装饰器@Bridge和@Handler。

```c
import web_webview from "@ohos.web.webview"
import { Bridge, BridgeHelper, BridgeRequest, Handler } from '@alvin917/jsbridge'

@Bridge
export class TestBridge2 {

    @Handler()
    submitFromWeb(controller: web_webview.WebviewController, request: BridgeRequest) {
        hilog.info(0x0000, 'testTag', 'TestBridge2 submitFromWeb: %{public}s', JSON.stringify(request.data));
        BridgeHelper.sendResponse(request.callbackId, { status: 'success', data: 'submitFromWebReal' });
    }
}
```

6、在Web中注入js。

```c
import web_webview from "@ohos.web.webview"
import { BridgeHelper } from "@alvin917/jsbridge"

@Entry({routeName: "WebPage"})
@Component
export struct WebPage {
    @State message: string = 'Hello World';
    private controller: web_webview.WebviewController = new web_webview.WebviewController("bridge_web");

    aboutToAppear(): void {
        hilog.info(0x0000, 'testTag', '%{public}s', 'WebPage aboutToAppear');
        // 配置Web开启调试模式
        // web_webview.WebviewController.setWebDebuggingAccess(true);
    }

    aboutToDisappear(): void {
        BridgeHelper.detachWeb();
        hilog.info(0x0000, 'testTag', '%{public}s', 'WebPage aboutToDisappear');
    }

    build() {
        Column() {
            Web({src: $rawfile("webdemo.html"), controller: this.controller })
                .javaScriptAccess(true)
                .onControllerAttached(() => {
                    BridgeHelper.attachWeb(this.controller);
                })
                .onPageEnd(() => {
                    BridgeHelper.appendJsApi(getContext(this))
                })
                .width("100%")
                .height("100%")
        }
        .height('100%')
    }
}
```