HarmonyOS鸿蒙Next中web与arkts交互发送请求demo

HarmonyOS鸿蒙Next中web与arkts交互发送请求demo

介绍

本篇Codelab是基于ArkTS的声明式开发范式的样例，主要介绍了Web组件如何加载本地、云端的H5和Vue页面并与原生交互发起请求。

demo详情链接

https://gitee.com/scenario-samples/web-network

2 回复

在HarmonyOS鸿蒙Next中，Web与ArkTS交互发送请求的Demo可以通过以下步骤实现：

  1. Web页面准备：在Web页面中，使用JavaScript与ArkTS进行交互。可以通过window.postMessage方法向ArkTS发送消息。

    <!DOCTYPE html>
<html>
<body>
<button onclick="sendMessage()">发送请求</button>
<script>
    function sendMessage() {
        window.postMessage('Hello ArkTS', '*');
    }
</script>
</body>
</html>

  2. ArkTS代码准备：在ArkTS中，通过WebView组件加载Web页面，并监听来自Web的消息。

    import web_webview from '[@ohos](/user/ohos).web.webview';

[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
  @State message: string = 'Hello World';
  private webviewController: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Web({ src: 'www/index.html', controller: this.webviewController })
        .onPageEnd(() => {
          this.webviewController.setWebMessageListener((message) => {
            console.log('Received message from Web:', message);
            this.message = message;
          });
        })
    }
  }
}

  3. 交互实现：当用户在Web页面点击按钮时，window.postMessage会将消息发送到ArkTS。ArkTS通过setWebMessageListener监听并处理该消息。

以上代码展示了如何在HarmonyOS鸿蒙Next中实现Web与ArkTS的简单交互，发送请求并接收消息。

更多关于HarmonyOS鸿蒙Next中web与arkts交互发送请求demo的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，使用ArkTS与Web进行交互并发送请求的示例如下：

  1. Web端：在HTML中定义JavaScript函数，用于接收ArkTS发送的数据。

    <script>
    function receiveData(data) {
        console.log("Received data from ArkTS:", data);
    }
</script>

  2. ArkTS端：使用WebView组件加载Web页面，并通过postMessage发送数据。

    import webview from '[@ohos](/user/ohos).web.webview';

let webView = webview.createWebView();
webView.loadUrl('file:///path/to/your/webpage.html');

// 发送数据到Web
webView.postMessage('receiveData', { message: 'Hello from ArkTS' });

  3. 监听Web返回：通过onMessageEvent监听Web返回的数据。

    webView.onMessageEvent((event) => {
    console.log("Received message from Web:", event.data);
});
回到顶部