### WebViewJavascriptBridge Setup and Interaction

Source: https://github.com/1ili/webviewjavascriptbridge_harmony/blob/master/entry/src/main/resources/rawfile/index.html

This snippet demonstrates the core functionality of the WebViewJavascriptBridge. It includes the `setupWebViewJavascriptBridge` function for initializing the bridge, registering handlers for native calls (`getH5InfoOnStar`, `getH5Info`), and making calls to native methods (`getNativeInfo`) from JavaScript. It also includes a logging utility and an example of dynamically creating a button to trigger a native call.

```javascript
window.onerror = function (err) { log('window.onerror 出错: ' + err) }
var getNativeInfoHasArgs = false;
var checkboxOnChange = () => {
    let ele = document.querySelector('#hasArgs');
    getNativeInfoHasArgs = ele.checked;
};

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 = 'https://__bridge_loaded__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function () {
        document.documentElement.removeChild(WVJBIframe);
    }, 0);
}

setupWebViewJavascriptBridge(function (bridge) {
    var uniqueId = 1;

    function log(message, data) {
        var log = document.getElementById('log');
        var el = document.createElement('div');
        var dataStr = data ? JSON.stringify(data) : "";
        el.className = 'logLine';
        el.innerHTML = '【' + uniqueId++ + '】' + message + ':<br/>' + dataStr + '<br/>';
        if (log.children.length) {
            log.insertBefore(el, log.children[0]);
        } else {
            log.appendChild(el);
        }
    }

    // Register handler for native call 'getH5InfoOnStar'
    bridge.registerHandler('getH5InfoOnStar', function (data, responseCallback) {
        log('初始化时，原生调用 getH5InfoOnStar 方法', data);
        var responseData = {
            'H5InfoOnStar': 'H5 给的一些初始化信息'
        };
        log('JS 返回信息', responseData);
        responseCallback(responseData);
    });

    // Register handler for native call 'getH5Info'
    bridge.registerHandler('getH5Info', function (data, responseCallback) {
        log('原生调用 getH5Info 方法', data);
        var responseData = {
            'H5Info': '运行时 H5 给的另一些信息',
            '参数': JSON.stringify(data)
        };
        log('JS 返回信息', responseData);
        responseCallback(responseData);
    });

    document.body.appendChild(document.createElement('br'));

    // Create a button to call native method 'getNativeInfo'
    var callbackButton = document.getElementById('buttons').appendChild(document.createElement('button'));
    callbackButton.innerHTML = '原生注册方法，h5 从原生获取信息';
    callbackButton.onclick = function (e) {
        e.preventDefault();
        log('JS 调用方法 "getNativeInfo" 方法');
        if (getNativeInfoHasArgs) {
            // Call native method with arguments
            bridge.callHandler('getNativeInfo', { 'key': 'value' }, function (response) {
                log('JS 获取到数据', response);
            });
        } else {
            // Call native method without arguments
            bridge.callHandler('getNativeInfo', function (response) {
                log('JS 获取到数据', response);
            });
        }
    };
});

```

--------------------------------

### Install WebViewJavascriptBridge via ohpm

Source: https://github.com/1ili/webviewjavascriptbridge_harmony/blob/master/webview_javascript_bridge/README.md

Instructions for installing the WebView Javascript Bridge library for HarmonyOS using the ohpm package manager. This is the primary method for adding the dependency to your project.

```shell
ohpm install @yue/webview_javascript_bridge
```

--------------------------------

### JavaScript WebView Bridge Setup and Usage

Source: https://github.com/1ili/webviewjavascriptbridge_harmony/blob/master/webview_javascript_bridge/README.md

This snippet demonstrates how to set up and use the WebViewJavascriptBridge on the JavaScript side. It includes initializing the bridge, registering a handler for native calls, and making calls to native functions. The code also includes basic logging for debugging.

```javascript
window.onerror = function (err) {
				log('window.onerror 出错: ' + err)
			}

			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 = 'https://__bridge_loaded__';
				document.documentElement.appendChild(WVJBIframe);
				setTimeout(function () { document.documentElement.removeChild(WVJBIframe) }, 0)
			}

			setupWebViewJavascriptBridge(function (bridge) {
				var uniqueId = 1
				function log(message, data) {
					var log = document.getElementById('log')
					var el = document.createElement('div')
					var dataStr = data ? JSON.stringify(data) : ""
					el.className = 'logLine'
					el.innerHTML = '【' + uniqueId++ + '】' + message + ':\x3cbr/>' + dataStr + '\x3cbr/>'
					if (log.children.length) { log.insertBefore(el, log.children[0]) }
					else { log.appendChild(el) }
				}

				bridge.registerHandler('getH5Info', function (data, responseCallback) {
					log('原生调用 getH5Info 方法', data)
					var responseData = { 'H5Info': '运行时 H5 给的另一些信息', '参数': JSON.stringify(data) }
					log('JS 返回信息', responseData)
					responseCallback(responseData)
				})

				document.body.appendChild(document.createElement('br'))

				var callbackButton = document.getElementById('buttons').appendChild(document.createElement('button'))
				callbackButton.innerHTML = '原生注册方法，h5 从原生获取信息'
				callbackButton.onclick = function (e) {
					e.preventDefault()
					log('JS 调用方法 "getNativeInfo" 方法')
					bridge.callHandler('getNativeInfo', { 'key': 'value' }, function (response) {
						log('JS 获取到数据', response)
					})
				}
			});
```

--------------------------------

### Install WebViewJavascriptBridge via ohpm

Source: https://github.com/1ili/webviewjavascriptbridge_harmony/blob/master/README.md

Installs the WebView Javascript Bridge library for HarmonyOS using the ohpm package manager. Alternatively, it can be added as a dependency in the oh-package.json5 file.

```bash
ohpm install @yue/webview_javascript_bridge
```

```json
"dependencies": {
  "@yue/webview_javascript_bridge": "^1.0.0"
}
```

--------------------------------

### JavaScript WebView Bridge Setup and Usage

Source: https://github.com/1ili/webviewjavascriptbridge_harmony/blob/master/README.md

This snippet demonstrates how to set up and use the WebViewJavascriptBridge on the JavaScript side. It includes initializing the bridge, registering a handler for native calls, and making calls to native functions. The code also includes basic logging for debugging.

```javascript
window.onerror = function (err) {
				log('window.onerror 出错: ' + err)
			}

			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 = 'https://__bridge_loaded__';
				document.documentElement.appendChild(WVJBIframe);
				setTimeout(function () { document.documentElement.removeChild(WVJBIframe) }, 0)
			}

			setupWebViewJavascriptBridge(function (bridge) {
				var uniqueId = 1
				function log(message, data) {
					var log = document.getElementById('log')
					var el = document.createElement('div')
					var dataStr = data ? JSON.stringify(data) : ""
					el.className = 'logLine'
					el.innerHTML = '【' + uniqueId++ + '】' + message + ':\x3cbr/>' + dataStr + '\x3cbr/>'
					if (log.children.length) { log.insertBefore(el, log.children[0]) }
					else { log.appendChild(el) }
				}

				bridge.registerHandler('getH5Info', function (data, responseCallback) {
					log('原生调用 getH5Info 方法', data)
					var responseData = { 'H5Info': '运行时 H5 给的另一些信息', '参数': JSON.stringify(data) }
					log('JS 返回信息', responseData)
					responseCallback(responseData)
				})

				document.body.appendChild(document.createElement('br'))

				var callbackButton = document.getElementById('buttons').appendChild(document.createElement('button'))
				callbackButton.innerHTML = '原生注册方法，h5 从原生获取信息'
				callbackButton.onclick = function (e) {
					e.preventDefault()
					log('JS 调用方法 "getNativeInfo" 方法')
					bridge.callHandler('getNativeInfo', { 'key': 'value' }, function (response) {
						log('JS 获取到数据', response)
					})
				}
			});
```

--------------------------------

### JavaScript: Initialize WebView Javascript Bridge

Source: https://github.com/1ili/webviewjavascriptbridge_harmony/blob/master/webview_javascript_bridge/README.md

This JavaScript function `setupWebViewJavascriptBridge` is crucial for initializing the bridge on the web page. It ensures the bridge is ready before any communication attempts are made, handling cases where the bridge might load asynchronously.

```javascript
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 = 'https://__bridge_loaded__';
	  document.documentElement.appendChild(WVJBIframe);
	  setTimeout(function () { document.documentElement.removeChild(WVJBIframe) }, 0)
}

```

--------------------------------

### Initialize WebViewJavascriptBridge in JavaScript

Source: https://github.com/1ili/webviewjavascriptbridge_harmony/blob/master/README.md

Sets up the WebViewJavascriptBridge in the browser environment by creating a hidden iframe to signal its availability. It queues callbacks until the bridge is ready.

```javascript
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 = 'https://__bridge_loaded__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function () { document.documentElement.removeChild(WVJBIframe) }, 0)
}

```

--------------------------------

### Obfuscation Options

Source: https://github.com/1ili/webviewjavascriptbridge_harmony/blob/master/entry/obfuscation-rules.txt

Lists available command-line flags to control the source code obfuscation process. These options enable or disable specific obfuscation techniques and modify the output.

```bash
# Obfuscation options:
# -disable-obfuscation: disable all obfuscations
# -enable-property-obfuscation: obfuscate the property names
# -enable-toplevel-obfuscation: obfuscate the names in the global scope
# -compact: remove unnecessary blank spaces and all line feeds
# -remove-log: remove all console.* statements
# -print-namecache: print the name cache that contains the mapping from the old names to new names
# -apply-namecache: reuse the given cache file
```

--------------------------------

### Obfuscation Options

Source: https://github.com/1ili/webviewjavascriptbridge_harmony/blob/master/webview_javascript_bridge/obfuscation-rules.txt

Lists available command-line flags to control the source code obfuscation process. These options enable or disable specific obfuscation techniques and modify the output.

```bash
# Obfuscation options:
# -disable-obfuscation: disable all obfuscations
# -enable-property-obfuscation: obfuscate the property names
# -enable-toplevel-obfuscation: obfuscate the names in the global scope
# -compact: remove unnecessary blank spaces and all line feeds
# -remove-log: remove all console.* statements
# -print-namecache: print the name cache that contains the mapping from the old names to new names
# -apply-namecache: reuse the given cache file
```

--------------------------------

### HarmonyOS: Initialize and Intercept Bridge

Source: https://github.com/1ili/webviewjavascriptbridge_harmony/blob/master/webview_javascript_bridge/README.md

This snippet demonstrates how to initialize the WebViewJavascriptBridge in HarmonyOS within the `onControllerAttached` callback of a Web component. It also shows how to intercept bridge-related URLs in `onLoadIntercept` to establish the communication channel.

```typescript
Web({
  xxxxx
})
  .onControllerAttached(() => {
    // WebviewController 载入完成后，设置 WebViewJavascriptBridge
    this.bridge = new WebViewJavascriptBridge(this.webviewController);
  })
  .onLoadIntercept((event) => {
    const url = event.data.getRequestUrl();
    // 符合 WebViewJavascriptBridge 的链接规则才拦截
    if (this.bridge?.bridgeInterceptWithURL(url)) {
      return true;
    }
    return false;
  })
```

--------------------------------

### HarmonyOS: Call JavaScript Method

Source: https://github.com/1ili/webviewjavascriptbridge_harmony/blob/master/webview_javascript_bridge/README.md

Demonstrates how to call a JavaScript method (e.g., 'getH5Info') that has been registered by the H5 page from the HarmonyOS native side. The `responseCallback` receives data from the JavaScript execution.

```typescript
// JS 已注册过 getH5Info 方法，原生来调用
// responseData 为 JS 给的数据
this.bridge.callHandler({handlerName: 'getH5Info', 
  responseCallback: (responseData) => {
      this.toast("原生调用 getH5Info \n接收到结果：" +
      WebViewJavascriptBridgeTools.jsonStringify(responseData));
    }
  })

```

--------------------------------

### Add WebView Javascript Bridge Dependency

Source: https://github.com/1ili/webviewjavascriptbridge_harmony/blob/master/webview_javascript_bridge/README.md

Configures the project's dependencies in `oh-package.json5` to include the `@yue/webview_javascript_bridge` library. This is essential for enabling communication between the Harmony OS native side and web views.

```json
"dependencies": {
  "@yue/webview_javascript_bridge": "^1.0.0"
}
```

--------------------------------

### Initialize WebViewJavascriptBridge in HarmonyOS

Source: https://github.com/1ili/webviewjavascriptbridge_harmony/blob/master/README.md

Initializes the WebViewJavascriptBridge instance within the Web component's onControllerAttached callback. It also sets up the onLoadIntercept to handle bridge URL requests.

```typescript
Web({
  xxxxx
})
  .onControllerAttached(() => {
    // WebviewController 载入完成后，设置 WebViewJavascriptBridge
    this.bridge = new WebViewJavascriptBridge(this.webviewController);
  })
  .onLoadIntercept((event) => {
    const url = event.data.getRequestUrl();
    // 符合 WebViewJavascriptBridge 的链接规则才拦截
    if (this.bridge?.bridgeInterceptWithURL(url)) {
      return true;
    }
    return false;
  })
```

--------------------------------

### Add WebViewJavascriptBridge dependency in oh-package.json5

Source: https://github.com/1ili/webviewjavascriptbridge_harmony/blob/master/webview_javascript_bridge/README.md

Alternatively, you can add the WebView Javascript Bridge library as a dependency in your project's `oh-package.json5` file. This ensures the library is managed as part of your project's dependencies.

```json
{
  "dependencies": {
    "@yue/webview_javascript_bridge": "^1.0.0"
  }
}
```

--------------------------------

### Harmony OS WebView Javascript Bridge Integration

Source: https://github.com/1ili/webviewjavascriptbridge_harmony/blob/master/webview_javascript_bridge/README.md

Demonstrates the integration of the WebView Javascript Bridge within a Harmony OS application. It covers setting up the bridge, registering native handlers for JavaScript calls, and invoking JavaScript functions from the native side.

```typescript
import { webview } from '@kit.ArkWeb';
import {
  WebViewJavascriptBridge,
  WebViewJavascriptBridgeTools,
  WVJBResponseCallback,
} from '@yue/WebViewJavascriptBridge';
import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  // WebviewController
  private _controller: webview.WebviewController = new webview.WebviewController();
  // WebViewJavascriptBridge 桥接
  private _bridge: WebViewJavascriptBridge | undefined;

  build() {
    Column() {
      this.webView();
      this.actionView();
    }
    .width('100%')
    .height('100%')
  }

  @Builder
  private actionView() {
    Column() {
      Row() {
      Button('h5注册方法，原生从 h5 获取信息').onClick(() => {
        this._getH5Info();
      })
    }
    .width('100%')
    .height('30%')
    .backgroundColor(Color.Gray)
  }

  @Builder
  private webView() {
    Web({
      src: $rawfile('index.html'),
      controller: this._controller,
    })
      .width('100%')
      .height('70%')
      .domStorageAccess(true)
      .onControllerAttached(() => {
        // WebviewController 载入完成后，设置 WebViewJavascriptBridge
        this.setupWebViewJavascriptBridge();
      })
      .onAlert((event) => {
        AlertDialog.show({ message: event?.message })
        return false;
      })
      .onLoadIntercept((event) => {
        const url = event.data.getRequestUrl();
        // 符合 WebViewJavascriptBridge 的链接规则才拦截
        if (this._bridge?.bridgeInterceptWithURL(url)) {
          return true;
        }
        return false;
      });
  }

  /**
   * 设置 jsBridge
   */
  private setupWebViewJavascriptBridge() {
    // 开启调试，控制台打印信息，默认无调试
    WebViewJavascriptBridge.enableLogging();
    // 创建 WebViewJavascriptBridge
    this._bridge = new WebViewJavascriptBridge(this._controller);
    // 创建后，可注册相关方法
    this._bridge.registerHandler('getNativeInfo', (data: Object, responseCallback: WVJBResponseCallback) => {
      if (data) {
        this._toast("JS 调用 getNativeInfo \n原生接收到参数：" + WebViewJavascriptBridgeTools.jsonStringify(data));
      }
      // 返回数据
      let map: Record<string, Record<string, string>> = {
        "deviceInfo": {
          "types": "harmony",
          "debug": "1",
        },
        "userInfo": {
          "userId": "666666",
          "member_name": "用户名",
        }
      }
      const jsonStr: string = WebViewJavascriptBridgeTools.jsonStringify(map);
      responseCallback(jsonStr);
    });
  }

  private _getH5Info() {
    let arg = new Map<string, string | Map<string, string>>([
      ["key", "1"],
    ]);

    this._bridge?.callHandler({
      handlerName: 'getH5Info',
      data: arg,
      responseCallback: (responseData) => {
        this._toast(WebViewJavascriptBridgeTools.jsonStringify(responseData));
      }
    });
  }

  private _toast(msg: string) {
    promptAction.showToast({
      message: msg,
      duration: 4000
    });
  }
}

```

--------------------------------

### Add WebView Javascript Bridge Dependency

Source: https://github.com/1ili/webviewjavascriptbridge_harmony/blob/master/README.md

Configures the project's dependencies in `oh-package.json5` to include the `@yue/webview_javascript_bridge` library. This is essential for enabling communication between the Harmony OS native side and web views.

```json
"dependencies": {
  "@yue/webview_javascript_bridge": "^1.0.0"
}
```

--------------------------------

### JavaScript: Register Method for Native Call

Source: https://github.com/1ili/webviewjavascriptbridge_harmony/blob/master/webview_javascript_bridge/README.md

This JavaScript code registers a handler named 'getH5Info' that can be called by the HarmonyOS native side. It logs any data received from native and sends a response back using the provided `responseCallback`.

```javascript
// 注册方法，给原生调用
setupWebViewJavascriptBridge(function (bridge) {
    bridge.registerHandler('getH5Info', function (data, responseCallback) {
        console.log('原生调用 getH5Info 方法传递的参数', JSON.stringify(data))
        // JS 返回给原生的数据
        var responseData = { 'H5Info': 'xxxxx' }
        responseCallback(responseData)
    })
})

```

--------------------------------

### Harmony OS WebView Javascript Bridge Integration

Source: https://github.com/1ili/webviewjavascriptbridge_harmony/blob/master/README.md

Demonstrates the integration of the WebView Javascript Bridge within a Harmony OS application. It covers setting up the bridge, registering native handlers for JavaScript calls, and invoking JavaScript functions from the native side.

```typescript
import { webview } from '@kit.ArkWeb';
import {
  WebViewJavascriptBridge,
  WebViewJavascriptBridgeTools,
  WVJBResponseCallback,
} from '@yue/WebViewJavascriptBridge';
import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  // WebviewController
  private _controller: webview.WebviewController = new webview.WebviewController();
  // WebViewJavascriptBridge 桥接
  private _bridge: WebViewJavascriptBridge | undefined;

  build() {
    Column() {
      this.webView();
      this.actionView();
    }
    .width('100%')
    .height('100%')
  }

  @Builder
  private actionView() {
    Column() {
      Row() {
      Button('h5注册方法，原生从 h5 获取信息').onClick(() => {
        this._getH5Info();
      })
    }
    .width('100%')
    .height('30%')
    .backgroundColor(Color.Gray)
  }

  @Builder
  private webView() {
    Web({
      src: $rawfile('index.html'),
      controller: this._controller,
    })
      .width('100%')
      .height('70%')
      .domStorageAccess(true)
      .onControllerAttached(() => {
        // WebviewController 载入完成后，设置 WebViewJavascriptBridge
        this.setupWebViewJavascriptBridge();
      })
      .onAlert((event) => {
        AlertDialog.show({ message: event?.message })
        return false;
      })
      .onLoadIntercept((event) => {
        const url = event.data.getRequestUrl();
        // 符合 WebViewJavascriptBridge 的链接规则才拦截
        if (this._bridge?.bridgeInterceptWithURL(url)) {
          return true;
        }
        return false;
      });
  }

  /**
   * 设置 jsBridge
   */
  private setupWebViewJavascriptBridge() {
    // 开启调试，控制台打印信息，默认无调试
    WebViewJavascriptBridge.enableLogging();
    // 创建 WebViewJavascriptBridge
    this._bridge = new WebViewJavascriptBridge(this._controller);
    // 创建后，可注册相关方法
    this._bridge.registerHandler('getNativeInfo', (data: Object, responseCallback: WVJBResponseCallback) => {
      if (data) {
        this._toast("JS 调用 getNativeInfo \n原生接收到参数：" + WebViewJavascriptBridgeTools.jsonStringify(data));
      }
      // 返回数据
      let map: Record<string, Record<string, string>> = {
        "deviceInfo": {
          "types": "harmony",
          "debug": "1",
        },
        "userInfo": {
          "userId": "666666",
          "member_name": "用户名",
        }
      }
      const jsonStr: string = WebViewJavascriptBridgeTools.jsonStringify(map);
      responseCallback(jsonStr);
    });
  }

  private _getH5Info() {
    let arg = new Map<string, string | Map<string, string>>([
      ["key", "1"],
    ]);

    this._bridge?.callHandler({
      handlerName: 'getH5Info',
      data: arg,
      responseCallback: (responseData) => {
        this._toast(WebViewJavascriptBridgeTools.jsonStringify(responseData));
      }
    });
  }

  private _toast(msg: string) {
    promptAction.showToast({
      message: msg,
      duration: 4000
    });
  }
}

```

--------------------------------

### HarmonyOS: Register Native Method for JS Call

Source: https://github.com/1ili/webviewjavascriptbridge_harmony/blob/master/webview_javascript_bridge/README.md

Shows how to register a native method (e.g., 'getNativeInfo') in HarmonyOS that can be invoked by JavaScript. The `responseCallback` is used to send data back to the JavaScript side.

```typescript
// 注册 getNativeInfo 方法，供 JS 调用
// data 为 JS 调用此方法时传递的参数
// responseCallback() 里的 jsonStr 则返回给 JS
this.bridge.registerHandler('getNativeInfo', 
  (data: Object, responseCallback: WVJBResponseCallback) => {
    responseCallback(jsonStr)
  });

```

--------------------------------

### Keep Options

Source: https://github.com/1ili/webviewjavascriptbridge_harmony/blob/master/webview_javascript_bridge/obfuscation-rules.txt

Specifies directives to preserve certain names or properties from being obfuscated. This is crucial for maintaining the integrity of APIs or specific code elements.

```bash
# Keep options:
# -keep-property-name: specifies property names that you want to keep
# -keep-global-name: specifies names that you want to keep in the global scope
```

--------------------------------

### JavaScript: Call Native Method

Source: https://github.com/1ili/webviewjavascriptbridge_harmony/blob/master/webview_javascript_bridge/README.md

This JavaScript function demonstrates how to call a native method registered on the HarmonyOS side, specifically 'getNativeInfo'. It passes data to the native handler and logs the response received from the native code.

```javascript
// JS 调用原生端注册的方法
function testGetNativeInfo() {
    setupWebViewJavascriptBridge(function(bridge) {
        bridge.callHandler('getNativeInfo', { 'key': 'value' }, function (response) {
			  console.log('JS 获取到原生侧给的数据', response)
		})
    })
}

```

--------------------------------

### Keep Options

Source: https://github.com/1ili/webviewjavascriptbridge_harmony/blob/master/entry/obfuscation-rules.txt

Specifies directives to preserve certain names or properties from being obfuscated. This is crucial for maintaining the integrity of APIs or specific code elements.

```bash
# Keep options:
# -keep-property-name: specifies property names that you want to keep
# -keep-global-name: specifies names that you want to keep in the global scope
```

--------------------------------

### Register H5 Handler in JavaScript

Source: https://github.com/1ili/webviewjavascriptbridge_harmony/blob/master/README.md

Registers a JavaScript function (e.g., 'getH5Info') that can be invoked by the native HarmonyOS side. It receives data from native and can send a response back.

```javascript
setupWebViewJavascriptBridge(function (bridge) {
    bridge.registerHandler('getH5Info', function (data, responseCallback) {
        console.log('原生调用 getH5Info 方法传递的参数', JSON.stringify(data))
        // JS 返回给原生的数据
        var responseData = { 'H5Info': 'xxxxx' }
        responseCallback(responseData)
    })
})

```

--------------------------------

### Call H5 Handler from HarmonyOS

Source: https://github.com/1ili/webviewjavascriptbridge_harmony/blob/master/README.md

Calls a JavaScript-registered handler (e.g., 'getH5Info') from the HarmonyOS native side. It allows passing data to the JS handler and receiving a response back.

```typescript
// JS 已注册过 getH5Info 方法，原生来调用
// responseData 为 JS 给的数据
this.bridge.callHandler({handlerName: 'getH5Info', 
  responseCallback: (responseData) => {
      this.toast("原生调用 getH5Info \n接收到结果：" +
      WebViewJavascriptBridgeTools.jsonStringify(responseData));
    }
  })

```

--------------------------------

### Call Native Handler from JavaScript

Source: https://github.com/1ili/webviewjavascriptbridge_harmony/blob/master/README.md

Calls a native HarmonyOS-registered handler (e.g., 'getNativeInfo') from JavaScript. It allows passing data to the native handler and receiving a response.

```javascript
function testGetNativeInfo() {
    setupWebViewJavascriptBridge(function(bridge) {
        bridge.callHandler('getNativeInfo', { 'key': 'value' }, function (response) {
    			  console.log('JS 获取到原生侧给的数据', response)
    		})
    })
}

```

--------------------------------

### Register Native Handler in HarmonyOS

Source: https://github.com/1ili/webviewjavascriptbridge_harmony/blob/master/README.md

Registers a native method (e.g., 'getNativeInfo') that can be called by JavaScript. The native side receives data from JS and can send a response back using the provided callback.

```typescript
// 注册 getNativeInfo 方法，供 JS 调用
// data 为 JS 调用此方法时传递的参数
// responseCallback() 里的 jsonStr 则返回给 JS
this.bridge.registerHandler('getNativeInfo', 
  (data: Object, responseCallback: WVJBResponseCallback) => {
    responseCallback(jsonStr)
  });

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.