HarmonyOS鸿蒙Next中如何在hthml文件查看从ets发送的数据

HarmonyOS鸿蒙Next中如何在hthml文件查看从ets发送的数据

项目介绍：本项项目基于鸿蒙API9 开发一个地图显示功能，从物联网云平台获取经纬度，然后在应用上显示

项目没有使用鸿蒙自带的的地图开发组件，使用的Web组件加载ylhtml.html页面，进而显示当前经纬度，在ets端用postMessage发送数据至html

问题：如何在html查看获取的数据

4 回复

感谢大哥~~

更多关于HarmonyOS鸿蒙Next中如何在hthml文件查看从ets发送的数据的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HTML 接收到 ets 发送的数据需要以下几步：

ETS文件中的步骤：

1、创建两个消息端口。

2、在应用侧的消息端口(如端口1)上注册回调事件。

3、将另一个消息端口(如端口0)发送到HTML侧，由HTML侧保存并使用。

4、将经纬度传递给 HTML

示例代码：

import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct Index {
  controller: webview.WebviewController = new webview.WebviewController();
  ports: webview.WebMessagePort[] = [];
  private longitude: number = 116.40;
  private latitude: number = 39.90;
  build() {
    Column() {
      Button('发送经纬度给 HTML')
        .onClick(() => {
          try {
            // 4、将经纬度传递给 HTML
            if (this.ports && this.ports[1]) {
              this.ports[1].postMessageEvent(`经度：${this.longitude}；纬度：${this.latitude}`);
            } else {
              console.error(`ports is null, Please initialize first`);
            }
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      Web({ src: $rawfile('index.html'), controller: this.controller }).onPageEnd(() => {
        try {
          // 1、创建两个消息端口。
          this.ports = this.controller.createWebMessagePorts();
          // 2、在应用侧的消息端口(如端口1)上注册回调事件。
          this.ports[1].onMessageEvent((result: webview.WebMessage) => {
          })
          // 3、将另一个消息端口(如端口0)发送到HTML侧，由HTML侧保存并使用。
          this.controller.postMessage('__init_port__', [this.ports[0]], '*');
        } catch (error) {
          console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
        }
      })
    }
  }
}

HTML 中的步骤：

  1. 保存从应用侧发送过来的端口。

  2. 接收ets侧发送过来的消息。

示例代码：

<!--index.html-->
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebView Message Port Demo</title>
</head>
<body>
<h1>WebView Message Port Demo</h1>
<p class="output">display received message send from ets</p>
<script>
    var h5Port;
    var output = document.querySelector('.output');
    window.addEventListener('message', function (event) {
        if (event.data === '__init_port__') {
            if (event.ports[0] !== null) {
                h5Port = event.ports[0]; // 1. 保存从应用侧发送过来的端口。
                h5Port.onmessage = function (event) {
                  // 2. 接收ets侧发送过来的消息。
                  var msg = 'Got message from ets:';
                  var result = event.data;
                  if (typeof(result) === 'string') {
                    console.info(`received string message from html5, string is: ${result}`);
                    msg = msg + result;
                  } else if (typeof(result) === 'object') {
                    if (result instanceof ArrayBuffer) {
                      console.info(`received arraybuffer from html5, length is: ${result.byteLength}`);
                      msg = msg + 'length is ' + result.byteLength;
                    } else {
                      console.info('not support');
                    }
                  } else {
                    console.info('not support');
                  }
                  output.innerHTML = msg;
                }
            }
        }
    })
</script>
</body>
</html>

官网文档完整版代码链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/web-app-page-data-channel

在HarmonyOS鸿蒙Next中，要在HTML文件查看从ETS发送的数据，可以使用WebView组件。首先，在ETS文件中通过WebView的postMessage方法将数据发送到HTML文件。然后在HTML文件中通过监听message事件来接收数据。示例代码如下：

ETS文件：

webview.postMessage({ data: 'Your data here' });

HTML文件：

<script>
  window.addEventListener('message', (event) => {
    console.log('Received data:', event.data);
  });
</script>

通过这种方式，可以在HTML文件中查看从ETS发送的数据。

在HarmonyOS Next中通过Web组件实现ets与html数据交互，可以通过以下方式在html中查看接收的数据：

  1. 在ets中使用postMessage发送数据：
// ets端代码示例
webController.postMessage({
  longitude: 123.456, // 经度数据
  latitude: 78.910   // 纬度数据
});
  1. 在html中通过监听message事件接收数据：
<script>
window.addEventListener('message', (event) => {
  // 方式1：控制台打印查看
  console.log('Received data:', event.data);
  
  // 方式2：页面显示数据
  document.getElementById('coordinates').innerHTML = 
    `经度：${event.data.longitude}, 纬度：${event.data.latitude}`;
});
</script>

<!-- 用于显示坐标的DOM元素 -->
<div id="coordinates"></div>

调试建议：

  1. 使用Chrome开发者工具远程调试Web组件（需开启调试模式）
  2. 确保ets和html中的字段名称一致
  3. 先发送简单测试数据验证通道是否畅通

注意：数据交互需要遵循同源策略，确保ets和html在相同安全上下文中。

回到顶部