当前位置：首页 > news >正文

HarmonyOS入门 : 获取网络数据，并渲染到界面上

news 2025/12/26 12:50:06

1. 环境搭建

开发HarmonyOS需要安装DevEco Studio，下载地址 : https://developer.huawei.com/consumer/cn/deveco-studio/

2. 如何入门

入门HarmonyOS我们可以从一个实际的小例子入手，比如获取网络数据，并将其渲染到界面上。
本文就是基于"获取网络数据，并将其渲染到界面上"这个小例子，来介绍如何入门HarmonyOS。

3. 鸿蒙获取网络数据，并渲染到界面上

3.1 如何发起HTTP请求

关于如何发起HTTP请求，官网上已经有现成的介绍 : 从网络获取数据-华为开发者学堂 (huawei.com)

对应的代码如下，可以发现和Android上发起HTTP请求差别不大，只不过Android中一般用的是Okhttp这个库，而鸿蒙这里用的是自带的http这个库。

export function httpRequestGet(url: string): Promise<ResponseResult> {let httpRequest = http.createHttp();let responseResult = httpRequest.request(url, {method: http.RequestMethod.GET,readTimeout: Const.HTTP_READ_TIMEOUT,header: {'Content-Type': ContentType.JSON},connectTimeout: Const.HTTP_READ_TIMEOUT,extraData: {}});let serverData: ResponseResult = new ResponseResult();// Processes the data and returns.return responseResult.then((value: http.HttpResponse) => {if (value.responseCode === Const.HTTP_CODE_200) {// Obtains the returned data.let result = `${value.result}`;let resultJson: ResponseResult = JSON.parse(result);if (resultJson.code === Const.SERVER_CODE_SUCCESS) {serverData.data = resultJson.data;}serverData.code = resultJson.code;serverData.msg = resultJson.msg;} else {serverData.msg = `${$r('app.string.http_error_message')}&${value.responseCode}`;}return serverData;}).catch(() => {serverData.msg = $r('app.string.http_error_message');return serverData;})
}

接下来，我们用实际代码来实现一个简单的demo。

3.2 搭建HTTP服务器

这里我们用到了一个现成的服务器 : https://gitee.com/harmonyos_codelabs/NewsData

这是一个关于新闻资讯的服务器，服务器基于node.js，具体环境搭建详见 gitee 中的说明文档。

启动成功后的效果如下
在这里插入图片描述

3.3 编写HTTP请求相关代码

这里请求的是刚才我们启动的本地服务器中的/news/getNewsType接口，用来获取新闻类别。
当请求成功后，会直接以String字符串的形式赋值给serverData.data。

这里，我将相关代码放到了IndexViewModel.ts中。

class IndexViewModel{export async function httpRequestAsync() : Promise<ResponseResult> {let httpResult = await httpRequestGet("http://192.168.102.141:9588/news/getNewsType")return httpResult}export function httpRequestGet(url: string): Promise<ResponseResult> {let httpRequest = http.createHttp();let responseResult = httpRequest.request(url, {method: http.RequestMethod.GET,/*header: {'Content-Type': 'application/json'},*/readTimeout: 15,connectTimeout: 15,});let serverData: ResponseResult = new ResponseResult();return responseResult.then((value: http.HttpResponse) => {serverData.code = value.responseCodeserverData.data = value.result.toString();return serverData;}).catch(() => {serverData.data = "http_error_message";return serverData;})}
}

3.4 编写界面

这里用到了鸿蒙里基础的界面组件。比如Column是一个列表组件，Text是一个文本组件，Button是一个按钮组件。
具体组件的信息可以查阅官网文档。

Button官方文档
Text官方文档
Column官方文档

@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Column() {Text(this.message).id('H').fontSize(30).fontWeight(FontWeight.Bold).alignRules({center: { anchor: '__container__', align: VerticalAlign.Center },middle: { anchor: '__container__', align: HorizontalAlign.Center }})Button(){Text("button").fontSize(20).textAlign(TextAlign.Center).width('60%').height(48).fontWeight(FontWeight.Bold)}.onClick(event=>{//TODO 按钮点击事件，待实现})}.height('100%').width('100%')}
}

3.5 按钮点击事件

这里我们希望点击Button按钮的时候，就能发起HTTP请求，向服务器获取数据。
在这之前，我们需要先添加IndexViewModel.ts里相关方法的引用。

import { httpRequestAsync, httpRequestGet } from '../viewmodel/IndexViewModel';

接着，就可以在onClick点击事件里调用方法，发起HTTP请求了。
在HTTP请求回调中，会将响应的数据赋值给message变量，而这个message变量是在Text组件中显示的。当这个message变量改变的时候，UI会自动刷新界面。

.onClick(event=>{httpRequestAsync().then((value)=>{this.message = `${value.code} ${value.data}`})
})

接着，运行项目可以发现，能正常发起HTTP请求，并将数据渲染到界面上了。

4. 其他遇到的问题

在入门鸿蒙开发途中，还遇到了其他的一些小问题，再次一并记录。

4.1 自动生成签名

运行到鸿蒙模拟器上时，是不需要签名的。但是运行到真机上时，是需要签名的，我们可以配置自动生成一个签名，如下图所示，在Project Structure中。

在这里插入图片描述

4.2 ArkTS工程目录结构

AppScope > app.json5：应用的全局配置信息，详见app.json5配置文件。
entry：HarmonyOS工程模块，编译构建生成一个HAP包。
src > main > ets：用于存放ArkTS源码。
src > main > ets > entryability：应用/服务的入口。
src > main > ets > entrybackupability：应用提供扩展的备份恢复能力。
src > main > ets > pages：应用/服务包含的页面。
src > main > resources：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。关于资源文件，详见资源分类与访问。
src > main > module.json5：模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明，详见module.json5配置文件。
build-profile.json5：当前的模块信息、编译信息配置项，包括buildOption、targets配置等。
hvigorfile.ts：模块级编译构建任务脚本。
obfuscation-rules.txt：混淆规则文件。混淆开启后，在使用Release模式进行编译时，会对代码进行编译、混淆及压缩处理，保护代码资产。详见开启代码混淆。
oh-package.json5：用来描述包名、版本、入口文件（类型声明文件）和依赖项等信息。
oh_modules：用于存放三方库依赖信息。
build-profile.json5：工程级配置信息，包括签名signingConfigs、产品配置products等。其中products中可配置当前运行环境，默认为HarmonyOS。

hvigorfile.ts：工程级编译构建任务脚本。

oh-package.json5：主要用来描述全局配置，如：依赖覆盖（overrides）、依赖关系重写（overrideDependencyMap）和参数化配置（parameterFile）等。

原文链接 : 鸿蒙课程学习总结（01）_鸿蒙compatiblesdkversion12-CSDN博客

4.3 同时适配手机和平板 : GridRow / GridCol

通过GridRow的Columns和GridCol的span的xs,sm,md,lg，可以同时适配不同的平板/手机。
GridRow， columns: 5 ; GridCol，span: { xs: 1, sm: 2, md: 3, lg: 4 }， (都带有margin left & right : 10)

手机效果
平板效果

4.4 获取bundleName的方法

const bundleName = (getContext(this) as common.UIAbilityContext).applicationInfo.name;
const url = `@bundle:${bundleName}/phone/ets/pages/MainPage`;

4.5 HarmonyOS 实用Demo/组件仓库

Codelabs: 分享知识与见解，一起探索HarmonyOS的独特魅力
帮助开发者快速熟悉OpenHarmony SDK所提供的API和应用开发流程，我们提供了一系列的应用示例 (gitee.com)