HarmonyOS鸿蒙Next原生应用如何与内嵌H5页面实现双向通信？

在鸿蒙原生应用中与内嵌 H5 页面实现双向通信，可以通过以下几种方式实现：

1. 使用 DsBridge 第三方库

DsBridge 是一个强大的桥梁库，允许鸿蒙原生环境与 JavaScript 交互，支持同步和异步调用、命名空间 API 管理等功能。

原生侧代码示例：

import { JavaScriptInterface, WebViewControllerProxy } from '@hzw/ohos-dsbridge';

interface People {
  name: string;
  age: number;
}

@Entry
@Component
struct DsBridgePage {
  private controller: WebViewControllerProxy = WebViewControllerProxy.createController();
  private localPath = $rawfile('index.html');
  @State isLoading: boolean = true;
  @State peopleInfo: People = {
    name: '张三',
    age: 18,
  };

  aboutToAppear() {
    this.controller.addJavascriptObject(this);
    this.controller.setClosePageListener(() => {
      return true;
    });
  }

  aboutToDisappear() {
    this.controller.destroy();
  }

  registerShowHarmonyInfo() {
    this.controller.callJs('showAlert', [this.peopleInfo], (result: boolean) => {
      console.log('resultInfo-ShowAlert', result);
    });
  }

  @JavaScriptInterface(false)
  test(args: string): string {
    console.log('来自WebH5的参数', args);
    return `${JSON.stringify(this.peopleInfo)}`;
  }

  build() {
    Column() {
      Web({ src: this.localPath, controller: this.controller.getWebViewController() })
        .javaScriptAccess(true)
        .javaScriptProxy(this.controller.javaScriptProxy)
        .onAlert((event) => {
          return false;
        })
        .onPageEnd(() => {
          this.registerShowHarmonyInfo();
        })
        .onProgressChange((event) => {
          if (event?.newProgress == 100) {
            this.isLoading = false;
          }
        })
        .onConsole((event) => {
          console.info('getMessage:' + event?.message.getMessage());
          return false;
        })
        .width('100%')
        .height('100%')
        .backgroundColor("#ffeef5ee");
    }
    .height('100%')
    .width('100%');
  }
}

H5 侧代码示例：

document.addEventListener('DOMContentLoaded', () => {
  // 调用原生方法
  dsBridge.call('test', 'Hello from H5', (result) => {
    console.log('从原生返回的数据：', result);
  });
});

// 注册供原生调用的 JavaScript 方法
dsBridge.register('showAlert', (message) => {
  alert('从原生调用：' + message);
  return 'H5 响应';
});

2. 使用 Web 组件的 runJavaScript 和 javaScriptProxy

通过 runJavaScript 方法，原生侧可以直接调用 H5 页面中的 JavaScript 方法。同时，通过 javaScriptProxy，H5 页面可以调用原生侧的方法。

原生侧代码示例：

import webview from '@ohos.web.webview';

@Entry
@Component
struct MyWeb {
  webController: webview.WebviewController = new webview.WebviewController();
  webUrl: string | Resource = "";

  build() {
    Column() {
      Web({ src: this.webUrl, controller: this.webController })
        .javaScriptProxy({
          object: {
            nativeMethod: (channelName: string, paramsCallback: IParamsCallback) => {
              if (!channelName || !paramsCallback) {
                return;
              }
              switch (channelName) {
                case "openNativePage":
                  paramsCallback.success();
                  console.log("luvi > h5调用 openNativePage 方法，携带参数" + paramsCallback.name);
                  break;
                case "getCity":
                  paramsCallback.success();
                  console.log("luvi > h5调用 getCity 方法，携带参数" + paramsCallback.name);
                  break;
                default:
                  break;
              }
            },
          },
          name: 'JSBridge',
          methodList: ['nativeMethod'],
          controller: this.webController,
        })
        .fileAccess(true)
        .domStorageAccess(true)
        .zoomAccess(false)
        .width("100%")
        .height("100%");
    };
  }
}

H5 侧代码示例：

function openNativePage() {
  window.JSBridge.nativeMethod("openNativePage", {
    success: function(res) {
      console.log("H5 > openNativePage success. " + res);
    },
    fail: function() {
      console.log("H5 > openNativePage fail.");
    }
  });
}

function getCity() {
  window.JSBridge.nativeMethod("getCity", {
    success: function(res) {
      console.log("H5 > getCity success. " + res);
    },
    fail: function() {
      console.log("H5 > getCity fail.");
    }
  });
}

3. 使用消息机制

通过 createMessagePorts 创建通信端口，原生侧和 H5 侧可以通过 postMessage 和 onmessage 实现双向通信。

原生侧代码示例：

import webview from '@ohos.web.webview';

@Entry
@Component
struct MyWeb {
  webController: webview.WebviewController = new webview.WebviewController();
  webUrl: string | Resource = "";

  build() {
    Column() {
      Web({ src: this.webUrl, controller: this.webController })
        .onMessage((event) => {
          console.log('从 H5 收到的消息：', event.data);
        })
        .width("100%")
        .height("100%");
    };
  }

  aboutToAppear() {
    this.webController.createMessagePorts().then((ports) => {
      const [port1, port2] = ports;
      port1.onMessage = (event) => {
        console.log('从 H5 收到的消息：', event.data);
      };
      this.webController.postMessage(port2, 'Hello from Native');
    });
  }
}

H5 侧代码示例：

window.addEventListener('message', (event) => {
  console.log('从原生收到的消息：', event.data);
});

// 向原生发送消息
const port = new MessagePort();
port.postMessage('Hello from H5');

通过以上方法，可以在鸿蒙原生应用中与内嵌的 H5 页面实现高效的双向通信。