【Harmonyos】开源鸿蒙跨平台训练营DAY3：为开源鸿蒙跨平台工程集成网络请求能力，实现数据清单列表的完整构建与开源鸿蒙设备运行验证（及常见问题与方法）

lbb 小魔仙2026-01-22 12:01

🚀 鸿蒙跨平台开发 DAY3 保姆级任务通关大纲（零基础友好）


🌸你好呀！我是 lbb小魔仙
🌟 感谢陪伴～ 小白博主在线求友
🌿 跟着小白学Linux/Java/Python
📖 专栏汇总：
《Linux》专栏 | 《Java》专栏 | 《Python》专栏

  • [🚀 鸿蒙跨平台开发 DAY3 保姆级任务通关大纲（零基础友好）](#🚀 鸿蒙跨平台开发 DAY3 保姆级任务通关大纲（零基础友好）)
    • [🔍 【开篇】今日任务核心：搞懂"网络请求+列表"的底层逻辑](#🔍 【开篇】今日任务核心：搞懂“网络请求+列表”的底层逻辑)
    • [🛠️ 【步骤1】环境准备：先把"工具"搭好（必做）](#🛠️ 【步骤1】环境准备：先把“工具”搭好（必做）)
      • [1.1 检查开发装备](#1.1 检查开发装备)
      • [1.2 初始化工程](#1.2 初始化工程)
    • [🌐 【步骤2】网络权限：给App"上网许可证"（必做）](#🌐 【步骤2】网络权限：给App“上网许可证”（必做）)
      • [2.1 配置权限文件](#2.1 配置权限文件)
    • [📡 【步骤3】网络请求](#📡 【步骤3】网络请求)
    • [📊 【步骤4】数据列表：把"冰冷的JSON"变成"好看的界面"](#📊 【步骤4】数据列表：把“冰冷的JSON”变成“好看的界面”)
      • [4.1 数据解析：给JSON"穿衣服"](#4.1 数据解析：给JSON“穿衣服”)
      • [4.2 列表渲染：让数据"排排坐"](#4.2 列表渲染：让数据“排排坐”)
      • [4.3 兜底处理：别让App"崩着脸"](#4.3 兜底处理：别让App“崩着脸”)
    • [🧪 【步骤5】真机验证：让代码"在鸿蒙设备上活起来"](#🧪 【步骤5】真机验证：让代码“在鸿蒙设备上活起来”)
      • [5.1 设备连接](#5.1 设备连接)
      • [5.2 运行+截图](#5.2 运行+截图)
    • [📤 【步骤6】代码提交：让别人也能"抄作业"](#📤 【步骤6】代码提交：让别人也能“抄作业”)
      • [6.1 Git提交](#6.1 Git提交)
      • [6.2 推到AtomGit](#6.2 推到AtomGit)
    • [⚠️ 【避坑指南】新手常踩的5个"坑"](#⚠️ 【避坑指南】新手常踩的5个“坑”)
    • [🎯 【收尾】今日学习总结+延伸建议](#🎯 【收尾】今日学习总结+延伸建议)

哈喽各位鸿蒙开发的新手小伙伴！小魔仙带着超详细的 DAY3 任务来啦～👋

  • 在上一篇入门内容铺垫后，今天咱们要把 "配置网络权限→发起请求拿数据→渲染列表→真机验证→推到远程仓库"
  • 这整套流程，拆成像搭积木一样好懂的步骤！ 毕竟鸿蒙开发的 "动态功能第一步闭环" 太重要啦 ------ 从 "App 只能看静态页面" 到"能联网拿数据、优雅展示还能被别人一键克隆跑起来"，这中间的每一步都藏着新手容易踩的小坑，但跟着小魔仙的节奏走，零基础也能稳稳拿下～
  • 接下来咱们就从 "给 App 开'上网权限'" 开始，一步步把你的 App 从 "静态哑巴页" 变成"会联网的活应用"，成就感直接拉满！✨

✨ 从0到1实现网络请求+列表渲染+设备验证

🔍 【开篇】今日任务核心：搞懂"网络请求+列表"的底层逻辑

目标拆解（用大白话讲）：

  • 让你的App能合法上网 → 权限配置
  • 让App能拿数据 → 网络请求
  • 让数据变成好看的列表 → 渲染+异常处理
  • 让代码在鸿蒙设备上跑起来 → 设备验证+提交

🛠️ 【步骤1】环境准备：先把"工具"搭好（必做）

1.1 检查开发装备

  • 🛠️ DevEco Studio：确认装了Flutter插件
  • 📱 鸿蒙环境：SDK、模拟器/真机调试功能正常

1.2 初始化工程

  • 选技术栈（Flutter）→ 新建工程
  • 先跑个空白页：确保能在鸿蒙设备上正常启动（这步很重要！）

📢就是新建一个工程，看看能不能建立成功

🌐 【步骤2】网络权限：给App"上网许可证"（必做）

2.1 配置权限文件

  • 📄 Flutter工程：
  • 在 module.json5 中，找到 requestPermissions 字段（如果没有就新增），添加网络权限：
    • module.json5加：ohos.permission.INTERNET

你添加之后在右上角会显示一个Sync Now，让工程重新同步配置。

📡 【步骤3】网络请求

方案：原生API（零基础必学，懂底层）

🎯 Flutter示例：用dart:io写请求（附代码片段）

我会用最直白的步骤，带你用鸿蒙原生 API 实现网络请求，这是理解网络底层原理的关键一步。

1、🔧 前置条件
  • 你已经在 module.json5 中配置了ohos.permission.INTERNET权限。
  • 你的工程是基于 ArkTS的鸿蒙应用（不是 React Native/Flutter 跨平台工程）
2. 导入网络模块

在你的 .ets 页面文件开头，导入鸿蒙的 HTTP 网络模块：

bash 复制代码 
import http from '@ohos.net.http';

📢在你输入上之后会有一个小警告，但完全不用在意，上角的那个警告，只是因为你导入了 http 模块但还没实际使用它，IDE 认为这是一个 "未使用的导入"，是个纯粹的提示，完全不影响代码运行。

3. 封装网络请求函数

封装这个 fetchData 函数，需要放在你的 Index.ets 文件里，具体是放在 Index 这个结构体的内部，作为一个类方法。

✅ 正确位置示例

🎯 精准位置

你要把 fetchData 和loadData函数，加在 @State message: string = 'Hello World'; 这一行的下面，build() { ... } 这一行的上面。

代码：

bash 复制代码 
import http from '@ohos.net.http';

// 定义数据接口
interface Todo {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @State dataList: Todo[] = [];

  async fetchData(url: string): Promise<Todo[]> {
    let httpRequest = http.createHttp();
    try {
      let response = await httpRequest.request(url, {
        method: http.RequestMethod.GET,
        connectTimeout: 10000,
        readTimeout: 10000
      });
      if (response.responseCode === 200) {
        return JSON.parse(response.result.toString()) as Todo[];
      } else {
        throw new Error(`请求失败，状态码：${response.responseCode}`);
      }
    } catch (error) {
      console.error('网络请求异常：', error);
      if (error instanceof Error) {
        throw error;
      } else {
        throw new Error(String(error));
      }
    } finally {
      httpRequest.destroy();
    }
  }

  async loadData() {
    try {
      const data = await this.fetchData('https://jsonplaceholder.typicode.com/todos');
      this.dataList = data;
      this.message = `加载完成！共 ${data.length} 条数据`;
    } catch (error) {
      if (error instanceof Error) {
        this.message = error.message;
      } else {
        this.message = '数据加载失败';
      }
    }
  }

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('HelloWorld')
        .fontSize($r('app.float.page_text_font_size'))
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .onClick(() => {
          this.loadData();
        })
    }
    .height('100%')
    .width('100%')
  }
}
4、在页面中调用并渲染数据

🎯 精准位置

这部分代码（dataList、isLoading、errorMsg 状态变量和 onPageShow 生命周期），需要添加到你的Index结构体内部，和之前的fetchData、loadData 函数放在一起。

在@State message: string = 'Hello World';后面加上

bash 复制代码 
  @State dataList: Todo[] = [];
  @State isLoading: boolean = false;
  @State errorMsg: string = '';

在build()前面加：

bash 复制代码 
onPageShow() {
   this.loadData();
 }

📊 【步骤4】数据列表：把"冰冷的JSON"变成"好看的界面"

4.1 数据解析：给JSON"穿衣服"

  • 🧩 写Model类（TypeScript接口/Dart实体类）→ 类型安全不报错

4.2 列表渲染：让数据"排排坐"

  • 📜 Flutter用ListView.builder（附代码+注释）

4.3 兜底处理：别让App"崩着脸"

  • ⏳ 加载中：显示"转圈动画"
  • 🚫 空数据：显示"暂无内容"
  • ❌ 出错了：显示"重试按钮"

🎯 改动 1：新增「空数据」状态判断（核心）

在你原来的 build() 方法里，找到「错误状态」和「列表状态」之间，新增空数据判断：

bash 复制代码 
// 👇 你原来的错误状态（保留不动）
else if (this.errorMsg) {
  Text(this.errorMsg).fontColor(Color.Red).margin({ top: 20 });
  Button('重新加载').onClick(() => this.loadData()).margin({ top: 10 });
}
// 👇 新增这一段（空数据判断）
else if (this.dataList.length === 0) {
  Column({ space: 15 }) {
    Text('暂无数据').fontColor('#999').fontSize(16);
    // 可选：加图标 Image('empty_icon.svg').width(80).height(80);
  }
  .padding(40)
  .layoutWeight(1)
  .justifyContent(FlexAlign.Center);
}
// 👆 新增结束
// 👇 你原来的列表状态（保留不动）
else {
  List({ space: 10 }) { ... }
}

🎯 改动 2：优化错误状态 UI（可选）

如果你想让错误提示更友好，把原来的错误状态代码替换成这个：

bash 复制代码 
// ❌ 你原来的错误状态代码
else if (this.errorMsg) {
  Text(this.errorMsg).fontColor(Color.Red).margin({ top: 20 });
  Button('重新加载').onClick(() => this.loadData()).margin({ top: 10 });
}

// ✅ 替换后的优化版（可选改）
else if (this.errorMsg) {
  Column({ space: 15 }) {
    Text(this.errorMsg).fontColor('#999').fontSize(16);
    Button('重新加载').onClick(() => this.loadData()).backgroundColor('#007AFF');
  }
  .padding(40)
  .layoutWeight(1)
  .justifyContent(FlexAlign.Center);
}

🎯 改动 3：简化生命周期（可选）

把你原来单独的 onPageShow() 函数：

bash 复制代码 
// ❌ 你原来的写法（保留也能用，不用改）
onPageShow(): void {
  this.loadData();
}

替换成 Column 的链式调用（写在 build() 里的 Column 最后）：

bash 复制代码 
// ✅ 简化写法（可选改）
Column() {
  // 里面的加载/错误/空数据/列表逻辑
}
.width('100%')
.height('100%')
.padding(10)
.onPageShow(() => this.loadData()); // 把生命周期写在这

🧪 【步骤5】真机验证：让代码"在鸿蒙设备上活起来"

5.1 设备连接

  • 🖥️ 模拟器：启动鸿蒙模拟器

5.2 运行+截图

  • 点击"Run"→ 看设备上的列表是否正常加载

📤 【步骤6】代码提交：让别人也能"抄作业"

6.1 Git提交

✅ 已包含的必要文件

配置文件：build-profile.json5、hvigorfile.ts、oh-package.json5 都齐全，这是工程能正常编译的基础。

源码目录：entry 和 AppScope 都在，包含了你的页面和应用配置。

忽略规则：.gitignore 已存在，能避免提交不必要的缓存文件。

先执行以下命令，确认本地已有 Git 仓库（有输出则说明已初始化）：

bash 复制代码 
git status

如果显示 On branch main 等信息，说明仓库正常，直接往下做即可。

添加本次修改的文件到暂存区

添加所有修改 / 新增文件：

bash 复制代码 
git add .
bash 复制代码 
git commit -m "feat: <你自己的任务名称>"

6.2 推到AtomGit

  • 📦 建公开仓库→ 推代码→ 确保git clone能直接跑

⚠️ 【避坑指南】新手常踩的5个"坑"

  1. ❌ 忘开权限：网络请求直接被系统"拦截"
  2. ❌ HTTP没配置：App连不上非HTTPS接口
  3. ❌ 三方库不兼容：先查"鸿蒙SDK版本+库版本"是否匹配
  4. ❌ 没做异常处理：断网时App直接崩溃
  5. ❌ 长列表用错组件：滑动卡顿（必须用builder类组件）

🎯 【收尾】今日学习总结+延伸建议

  • 📚 必回顾：权限→请求→解析→渲染→验证的全流程
  • 🚀 进阶方向：封装网络请求工具类、列表性能优化

欢迎加入开源鸿蒙跨平台社区： https://openharmonycrossplatform.csdn.net

📕个人领域 ：Linux/C++/java/AI

🚀 个人主页 ：有点流鼻涕 · CSDN

💬 座右铭 ： "向光而行，沐光而生。"

相关推荐
2501_906150562 小时前
拥有自己的问卷调研系统：调问开源问卷系统，让数据主动权握在手中
开源
小风呼呼吹儿2 小时前
Flutter 框架跨平台鸿蒙开发 - 老年便捷助手：打造适合老年人的智能工具箱
flutter·华为·harmonyos
秋月的私语2 小时前
Windows系统下Git换行符问题的完整解决方案
windows·git
奔跑的露西ly2 小时前
【HarmonyOS NEXT】Stage模型与FA模型对比
华为·harmonyos·鸿蒙
小雨下雨的雨2 小时前
禅息：在鸿蒙与 Flutter 之间寻找呼吸的艺术
算法·flutter·华为·重构·交互·harmonyos
怜渠客2 小时前
【原创工具】Excel像素画生成 By怜渠客
windows·实用工具·怜渠客
IT陈图图2 小时前
基于 Flutter × OpenHarmony 音乐播放器应用——构建录音控制按钮与录音状态按钮
flutter·华为·鸿蒙·openharmony
[H*]2 小时前
Flutter框架跨平台鸿蒙开发——Image综合应用
flutter·华为·harmonyos
weixin_489690022 小时前
MicroSIP自定义web拨打协议
服务器·前端·windows
热门推荐
01GitHub 镜像站点02OpenCode 入门教程：介绍 · 安装 · 配置第三方 API (如 Claude)03在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）04AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南05安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）062025 Telegram 最新免费社工库机器人（LetsTG可[特殊字符]）搭建指南（含 Python 脚本）07UV安装并设置国内源08Linux下V2Ray安装配置指南09BongoCat - 跨平台键盘猫动画工具10Claude Code Skills 实用使用手册