HarmonyOS应用开发-网络请求与web组件

前言

当今世界，移动应用已经成为人们日常生活中不可或缺的一部分。无论是社交媒体、新闻、购物还是娱乐，安卓应用的广泛使用已经改变了我们与数字世界互动的方式。然而，这些应用的实际功能远不止界面和用户体验。它们背后的精密技术和网络请求是应用程序成功运行的关键，同时也为用户提供了无限的可能性。

在这篇博文中，我们将深入探讨HarmonyOS应用应用的两个重要方面：网络请求和Web组件。网络请求是应用与远程服务器通信的媒介，它使应用能够获取和交换数据，从而实现各种功能，如实时更新、用户身份验证和数据存储。同时，Web组件是一种强大的工具，它允许应用将Web内容嵌入到应用内，提供了丰富的多媒体和互动体验。

通过深入了解这两个主题，我们将能够更好地理解如何构建功能强大的HarmonyOS应用，以满足用户的需求和期望。我们将探讨网络请求技术以及如何处理响应数据。此外，我们还将研究如何嵌入Web组件，如WebView，以实现更丰富的应用体验。

HTTP数据请求

什么是HTTP

HTTP是互联网中的基本协议之一，负责在客户端和服务器之间传递信息。HTTP的工作原理确实是一个简单的请求-响应模型。当客户端（通常是浏览器）想要获取Web页面、图像、视频或其他资源时，它会向服务器发送一个HTTP请求。服务器接收到请求后，会处理请求并返回相应的数据，然后客户端将这些数据解析和渲染以呈现给用户。

HTTP的这种简单性和可扩展性使其成为了Web上数据传输的基础。不仅限于文本和超文本（HTML），HTTP还用于传输图像、音频、视频和其他多媒体内容，以及用于实现RESTful API等更高级的应用。

除了上述的基本工作原理，HTTP还涉及状态码、请求方法（如GET、POST、PUT、DELETE等）、请求头和响应头等许多元素，这些元素共同构成了HTTP请求和响应的详细规范，以确保通信的可靠性和安全性。

发起HTTP请求

在HarmonyOS应用程序中，发起HTTP请求是与远程服务器通信的常见任务。这是通过http模块实现的，这个模块提供了丰富的功能，使您可以轻松地进行网络请求。下面我们将介绍一些关键步骤，以帮助您了解如何在HarmonyOS中发起HTTP请求。

首先，需要导入http模块，以便能够使用其功能。接下来，创建一个httpRequest对象，它将代表您的HTTP请求任务。每个请求都需要一个单独的httpRequest对象，所以请确保为每个请求创建一个新的对象。

在某些情况下，可能需要订阅HTTP响应头信息，这可以通过注册一个监听器来实现。这样，您可以在收到响应头时执行特定的操作，以满足您的业务需求。

然后，使用request方法来发起HTTP请求。此方法需要两个参数：请求的URL地址和一个可选的HttpRequestOptions对象，它包含有关请求方式、连接超时时间、请求头字段等的信息。根据您的需求，可以选择使用GET或POST请求。

最后，在处理响应结果时，您需要检查HTTP响应的状态码。如果状态码为200（OK），则表示请求成功。接下来，您可以解析服务器返回的业务数据，并将其用于应用程序的进一步处理。

这些简单的步骤将帮助您轻松地在HarmonyOS应用程序中发起HTTP请求，以获取所需的数据或执行其他操作。网络通信是现代应用的核心之一，通过这些步骤，您可以有效地实现与远程服务器的通信，为您的应用带来更多功能和价值。

import http from '@ohos.net.http';
import Prompt from '@system.prompt';
@Entry
@Component
struct Index {

  build() {
    Row() {
      Column() {
        Button('发起网络请求')
          .width('80%')
          .onClick(() => {
            let httpRequest = http.createHttp();
            let url= "https://EXAMPLE_URL?param1=v1&param2=v2";
            let promise = httpRequest.request(
              // 请求url地址
              url,
              {
                // 请求方式
                method: http.RequestMethod.GET,
                // 可选，默认为60s
                connectTimeout: 60000,
                // 可选，默认为60s
                readTimeout: 60000,
                // 开发者根据自身业务需要添加header字段
                header: {
                  'Content-Type': 'application/json'
                }
              });
            promise.then((data) => {
              if (data.responseCode === http.ResponseCode.OK) {
                console.info('Result:' + data.result);
                console.info('code:' + data.responseCode);
              }
            }).catch((err) => {
              console.info('error:' + JSON.stringify(err));
              Prompt.showToast({
                duration: 3000,
                message: JSON.stringify(err)
              })
            });
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

Web组件

Web组件是一种用于构建Web应用程序的模块化、可重用的元素，它们允许开发人员将特定功能和用户界面元素组合成更大的应用程序。这些组件以一种独立的方式工作，可以包括HTML、CSS和JavaScript，以及其他资源。

ArkUI为我们提供了Web组件来加载网页，借助它我们就相当于在自己的应用程序里嵌入一个浏览器，从而非常轻松地展示各种各样的网页。

加载网页

加载在线网页

Web组件的使用非常简单，只需要在Page目录下的ArkTS文件中创建一个Web组件，传入两个参数就可以了。其中src指定引用的网页路径，controller为组件的控制器，通过controller绑定Web组件，用于实现对Web组件的控制。

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController();
  build() {
    Column() {
      Web({ src: 'https://developer.harmonyos.com/', controller: this.controller })
    }
  }
}

{
    "module" : {
        "requestPermissions":[
           {
             "name": "ohos.permission.INTERNET"
           }
        ]
    }
}

加载本地网页

Web组件同样也可以加载本地网页。首先在main/resources/rawfile目录下创建一个HTML文件，然后通过$rawfile引用本地网页资源。

// xxx.ets
@Entry
@Component
struct SecondPage {
  controller: WebController = new WebController();

  build() {
    Column() {
      Web({ src: $rawfile('index.html'), controller: this.controller })
    }
  }
}

属性

事件

Web组件还提供了处理Javascript的对话框、网页加载进度及各种通知与请求事件的方法。例如onProgressChange可以监听网页的加载进度，onPageEnd在网页加载完成时触发该回调，且只在主frame触发，onConfirm则在网页触发confirm告警弹窗时触发回调。

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller:WebController = new WebController();
  build() {
    Column() {
      Web({ src:$rawfile('index.html'), controller:this.controller })
        .onConfirm((event) => {
          AlertDialog.show({
            title: 'title',
            message: event.message,
            confirm: {
              value: 'onAlert',
              action: () => {
                event.result.handleConfirm();
              }
            },
            cancel: () => {
              event.result.handleCancel();
            }
          })
          return true;
        })
    }
  }
}

处理页面导航

// xxx.ets
@Entry
@Component
struct Page5 {
  controller: WebController = new WebController();

  build() {
    Column() {
      Row() {
        Button("前进").onClick(() => {
          this.controller.forward();
        })
        Button("后退").onClick(() => {
          this.controller.backward();
        })
        Button("刷新").onClick(() => {
          this.controller.refresh();
        })
        Button("停止").onClick(() => {
          this.controller.stop();
        })
        Button("清除历史").onClick(() => {
          this.controller.clearHistory();
        })
      }
      .padding(12)
      .backgroundColor(Color.Gray)
      .width('100%')

      Web({ src: 'https://developer.harmonyos.com/', controller: this.controller })
    }
    .height('100%')
  }
}