HarmonyOS鸿蒙Next中如何在ArkUI页面中显示来自Web组件接收到的后端返回的数据

HarmonyOS鸿蒙Next中如何在ArkUI页面中显示来自Web组件接收到的后端返回的数据 鸿蒙中调用本地html文件，web组件占上面半部分，下面半部分是ArkUI页面

Web({
  src: $rawfile('xxx.html'),
  controller: this.controller
})

WebS3.html通过websocket后端连通，接收后端返回的数据

socket = new WebSocket('');

我想要接收后端返回的数据显示在下面半部分的鸿蒙ArkUI页面当中

2 回复

开发者您好，关于您咨询的问题，您可参考Demo{https://gitee.com/scenario-samples/web-interation-with-h5-demo}

更多关于HarmonyOS鸿蒙Next中如何在ArkUI页面中显示来自Web组件接收到的后端返回的数据的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，通过ArkUI页面显示来自Web组件接收到的后端数据，可以按照以下步骤实现：

  1. 创建Web组件：使用<web>标签创建Web组件，并设置src属性指向后端API地址。
  2. 监听数据返回：通过onMessage事件监听Web组件接收到的数据。
  3. 更新UI：在事件回调中，将接收到的数据绑定到ArkUI页面的状态变量，触发UI更新。

示例代码：

@Entry
@Component
struct MyPage {
  @State data: string = '';

  build() {
    Column() {
      Web({ src: 'https://api.example.com/data' })
        .onMessage((event) => {
          this.data = event.data;
        })
      Text(this.data)
    }
  }
}

通过这种方式，可以在ArkUI页面中动态显示来自Web组件接收到的后端数据。

回到顶部