# WebViewBridgeHarmong

**Repository Path**: BlueTintRains/WebViewBridgeHarmong

## Basic Information

- **Project Name**: WebViewBridgeHarmong
- **Description**: 鸿蒙与H5交互，兼容之前安卓和iOS中的WebViewJavascriptBridge。
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-08-25
- **Last Updated**: 2024-12-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# WebviewBridgeHarmong

### 介绍
鸿蒙与H5交互，兼容之前安卓和iOS中的`WebViewJavascriptBridge`。

![demo](./demo.gif)

### 安装使用
直接复制demo中的`WebViewJavascriptBridge`和`WebViewJavascriptBridge_JS`到项目中即可。

#### 鸿蒙：
1.创建注册方法给js调用文件`CallNativeCommonMethod`,将native调用js方法和js调用native方法统一写到这个文件中。
注册`getAppInfo`方法给js调用：
```typescript
//注册给js调用
this.jsBridge.registerHandler(GetAppInfo, (data, callback:respCallback) => {
  console.log('receive data = '+JSON.stringify(data))
  let userInfo: Record<string, string> = {
    'userId': '12345678',
    'examTime': '2025-01-29',
    'score': '6.0',
    'avatar': '',
    'switchConfig': 'OFF',
    'grade': '大四',
    'targetScore': '6.5',
    'name': '站友1tqm8g46ijq'
  }
  callback(userInfo)
})
```
主动调用js的`getH5Info`方法
```typescript
//主动调用js部分,不需要注册
callHandlerFromGetH5Info(back:(dataStr: string)=>void) {
  let param: [Record<string, Record<string, string>>] = [
    {
      'userInfo': {
        'userId': 'xxx1239999',
        'examTime': '2025-01-29',
        'score': '6.0',
        'avatar': '',
        'switchConfig': 'OFF',
        'grade': '大四',
        'targetScore': '6.5',
        'name': '站友1tqm8g46ijq'
      },
      'sysInfo': {
        'deviceId': '9C1D6E28-CE4E-4C30-A13E',
        'appMarket': 'appstore',
        'appVersion': '6.8.2',
        'appName': '测试代码',
        'os': 'HarmonegOS',
        'netWork': 'wifi',
        'sourceCode': 'code2100',
        'osVersion': '17.5.1',
        'deviceType': 'iPhone',
        'ip': '',
        'deviceModel': 'iPhone14,5',
      }
    }
  ]

  this.jsBridge.callhandlerFromWeb(GetH5Info, param, (data: BridgeBackData) => {
    console.log('receive data = '+JSON.stringify(data))
    //返回值给展示的地方
    back(JSON.stringify(data))
  })
}
```
2.在鸿蒙的web页面中声明需要的对象
```typescript
  //Web组件需要的controller对象
  private webController: webview.WebviewController = new webview.WebviewController()
  //native与js交互需要的bridge
  private jsBridge: WebviewJavascriptBridge = new WebviewJavascriptBridge(this.webController)
  //注册方法调用
  private methods: CallNativeCommonMethod = new CallNativeCommonMethod(this.jsBridge)
```
3.在Web组件的onLoadIntercept 中响应 bridge 拦截事件，建立桥接，即可接收js通过`WebViewJavascriptBridge`调用传递过来的事件
```typescript
  Web({ src: $rawfile('test.html'), controller: this.webController })
    .width('100%')
    .height('300vp')
    .onLoadIntercept( (event) => {
      let url = event.data.getRequestUrl()
      if (this.jsBridge.isWebViewJavascriptBridgeURL(url)) { 
        //建立桥接
        this.jsBridge.workForUrlShunt(url)
        return true
      }
      return false
    })
```
4.native调用js中的方法
```typescript
  Button('native调用js中的getH5Info方法', { type: ButtonType.Capsule, stateEffect: true})
    .width('200vp')
    .height('40vp')
    .margin( { top: 30 } )
    .onClick( ()=> {
      //直接调用CallNativeCommonMethod中写好的方法
      this.methods.callHandlerFromGetH5Info( (data: string) => {
        this.fromJsInfo = data
      })
    })
```
5.js中的`WebViewJavascriptBridge`
```typescript
    // 这段代码是固定的，必须要放到js中最前面
    function setupWebViewJavascriptBridge(callback) {
         if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
         if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
         window.WVJBCallbacks = [callback];
         var WVJBIframe = document.createElement('iframe');
         WVJBIframe.style.display = 'none';
         WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
         document.documentElement.appendChild(WVJBIframe);
         setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
     }
```
完整如下
```typescript
<script>
    // 这段代码是固定的，必须要放到js中最前面
    function setupWebViewJavascriptBridge(callback) {
         if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
         if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
         window.WVJBCallbacks = [callback];
         var WVJBIframe = document.createElement('iframe');
         WVJBIframe.style.display = 'none';
         WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
         document.documentElement.appendChild(WVJBIframe);
         setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
     }

     // 与原生交互的所有JS方法都要在这里注册,才能让原生和JS之间相互调用
    setupWebViewJavascriptBridge(function(bridge) {

        // 原生获取web信息
        bridge.registerHandler('getH5Info', function(data, responseCallback) {
            alert("原生中传递过来的参数:\n"+JSON.stringify(data));
            console.log("原生中传递过来的参数:"+JSON.stringify(data));
            // 把处理好的结果返回给原生
            let param = {"userID":"DX001", "userName":"111", "age":"18", "otherName":"1111"};
            var div = document.getElementById("valueDiv");
            div.textContent = "传给原生的值:\n"+JSON.stringify(param);
            responseCallback(param);
        });

        //js调用原生
        document.getElementById('btn').onclick = function () {
            bridge.callHandler('getAppInfo', {"userID":"DX001", "userName":"111", "age":"18", "otherName":"1111"}, function responseCallback(responseData) {
                console.log("原生中返回的结果:"+JSON.stringify(responseData));
                var div = document.getElementById("valueDiv");
                div.textContent = "原生中返回来的结果:\n"+JSON.stringify(responseData);
            });
        };

    })
</script>
```
### 详细示例直接查看运行本demo
### 其他
安卓端使用的[WebViewJavascriptBridge](https://github.com/jesse01/WebViewJavascriptBridge)
<br>
iOS端使用的[WebViewJavascriptBridge](https://github.com/marcuswestin/WebViewJavascriptBridge)
<br>
反馈建议可联系<751824643@qq.com>