OpenHarmony 项目实战：从零构建新闻列表应用（基于 ArkTS）

晚霞的不甘

发布于 2025-12-23 10:36:51

1800

OpenHarmony 项目实战：从零构建新闻列表应用（基于 ArkTS）

摘要：本文以一张真实的 OpenHarmony 开发环境截图为基础，深入解析一个使用 ArkTS 编写的新闻列表应用。通过代码结构、UI 布局、网络请求和状态管理的全面剖析，帮助开发者掌握 OpenHarmony 应用开发的核心技术栈与最佳实践。

一、引言：从图片看 OpenHarmony 实战

在上一篇《Electron 与开源鸿蒙的关系》中，我们探讨了跨平台框架与国产操作系统的生态融合。而本篇将聚焦于 OpenHarmony 的实际开发场景，以一张典型的 DevEco Studio 开发界面截图为例，带领读者走进一个真实运行的 NewsList.ets 组件。

图1：DevEco Studio 中的 news_hongmeng_ArkTS 项目结构与 NewsList.ets 代码

该截图展示了：

项目目录结构
使用 ArkTS 编写的页面组件
网络请求封装
响应式数据绑定
声明式 UI 构建

我们将逐层拆解这个应用，理解其背后的架构设计与技术细节。

二、项目结构解析

2.1 核心目录说明

news_hongmeng_ArkTS/
├── entry/                  # 主入口模块
│   ├── src/
│   │   └── main/
│   │       ├── ets/          # ArkTS 源码
│   │       │   ├── common/     # 公共工具类
│   │       │   │   └── utils/  # HttpUtil.ets
│   │       │   ├── data/       # 数据模型定义
│   │       │   └── pages/      # 页面组件
│   │       │       ├── Home.ets
│   │       │       ├── NewsList.ets ← 当前文件
│   │       │       └── WebView.ets
│   │       └── app.ets         # 应用主入口
│   └── build/                # 构建输出
└── config.json             # 配置文件

2.2 关键文件功能

文件	功能
app.ets	应用启动入口，注册 Ability
Home.ets	首页导航页面
NewsList.ets	新闻列表展示页
WebView.ets	内嵌网页浏览组件
HttpUtil.ets	封装 HTTP 请求逻辑

三、核心组件：NewsList.ets 深度解析

3.1 代码概览

import { httpRequestGet } from '../../common/utils/HttpUtil';

@Component
export default struct NewsList {
  categoryId: string;
  @State appList: Array<any> = [];

  build() {
    List() {
      ForEach(this.appList, item => {
        ListItem() {
          Row() {
            Image(item.logoUrl).width(40).height(40)
            Column() {
              Text(item.name).fontSize(16).fontColor('#222222')
              Row() {
                Text(item.downloadCount).fontSize(16).fontColor('#6C6C6C')
                Text(item.fileSize).fontSize(16).fontColor('#6C6C6C').margin({ left: 10 })
              }.alignItems(HorizontalAlign.Start)
            }.margin({ left: 10 })
          }
        }
      })
    }
  }
}

3.2 技术要点详解

1. 导入网络请求工具

import { httpRequestGet } from '../../common/utils/HttpUtil';

使用相对路径导入自定义工具函数。
httpRequestGet 是封装后的 GET 请求方法，通常包含错误处理、超时控制等。

2. 组件声明与状态管理

@Component
export default struct NewsList {
  categoryId: string;
  @State appList: Array<any> = [];

@Component：声明这是一个可渲染的 UI 组件。
@State：标记为响应式状态变量，当值变化时自动触发 UI 更新。
appList 初始为空数组，后续通过异步请求填充。

3. 声明式 UI 构建

build() {
  List() {
    ForEach(this.appList, item => {
      ListItem() {
        // ...
      }
    })
  }
}

List()：创建垂直滚动列表。
ForEach()：遍历数据源，生成多个 ListItem。
ListItem()：每个条目容器，支持复杂布局。

4. 布局与样式

Row() {
  Image(item.logoUrl).width(40).height(40)
  Column() {
    Text(item.name).fontSize(16).fontColor('#222222')
    Row() {
      Text(item.downloadCount).fontSize(16).fontColor('#6C6C6C')
      Text(item.fileSize).fontSize(16).fontColor('#6C6C6C').margin({ left: 10 })
    }.alignItems(HorizontalAlign.Start)
  }.margin({ left: 10 })
}

Row()：水平排列子元素。
Column()：垂直堆叠子元素。
Image()：显示图标，指定宽高。
Text()：文本显示，设置字体大小与颜色。
margin()：外边距控制。
alignItems()：对齐方式。

提示：ArkUI 支持链式调用，语法简洁，类似 React 或 Flutter。

四、网络请求实现：HttpUtil.ets

虽然截图未显示，但我们可以推断 HttpUtil.ets 的内容如下：

// src/main/ets/common/utils/HttpUtil.ets
export function httpRequestGet(url: string): Promise<any> {
  return new Promise((resolve, reject) => {
    try {
      const request = new HttpRequest();
      request.url = url;
      request.method = 'GET';
      request.onSuccess = (response: HttpResponse) => {
        resolve(response.data);
      };
      request.onError = (error: Error) => {
        reject(error);
      };
      request.send();
    } catch (err) {
      reject(err);
    }
  });
}

说明：OpenHarmony 提供 HttpRequest API，支持同步/异步请求，需注意权限配置。

4.1 权限配置

在 config.json 中需添加：

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

五、生命周期与数据加载

当前代码缺少数据初始化逻辑，完整版本应补充：

@Component
export default struct NewsList {
  categoryId: string;
  @State appList: Array<any> = [];

  onInit() {
    this.loadNewsList();
  }

  private async loadNewsList() {
    try {
      const result = await httpRequestGet(`https://api.example.com/news?category=${this.categoryId}`);
      this.appList = result.data || [];
    } catch (error) {
      console.error('Failed to load news:', error);
    }
  }

  build() {
    // ...
  }
}

关键点：

onInit()：组件初始化时调用。
异步加载避免阻塞主线程。
错误处理增强健壮性。

六、调试与预览

6.1 DevEco Studio 功能区

区域	功能
左侧项目树	查看文件结构
中间编辑器	编写 ArkTS 代码
右侧 Previewer	实时预览 UI 效果
底部终端	输出日志与构建信息
上方工具栏	运行、调试、Git 等操作

6.2 使用模拟器运行

点击绿色三角按钮，选择 HUAWEI Phone [NewDevice_from_Huawei_Phone] 启动模拟器。

优势：无需真机即可快速验证 UI 与交互。

七、优化建议与扩展方向

7.1 性能优化

懒加载图片：

Image(item.logoUrl).lazy(true)

分页加载：

@State currentPage: number = 1;
@State hasMore: boolean = true;

onLoadMore() {
  if (this.hasMore) {
    this.currentPage++;
    this.loadNewsList();
  }
}

缓存机制：

使用 LocalStorage 缓存热门新闻。
防止重复请求。

7.2 功能扩展

扩展功能	实现方式
搜索功能	添加 SearchBar，过滤 appList
下拉刷新	使用 Refresh 组件
点击跳转	在 ListItem 上绑定 onClick
多语言支持	引入 string.json 资源文件