鸿蒙HarmonyOS 5.0快速开发APP：一步一步教你从入门到进阶

电信巨擘华为10月22日宣布推出“纯血”鸿蒙作业系统（操作系统） HarmonyOS 5.0，引发全球智能装备市场高度关注。这套系统强调完全自主研发，是首个国产行动作业系统。这套系统已成为全球第三大行动作业系统，仅次于苹果iOS系统和谷歌旗下的安卓（Android）。

华为宣布正式发布纯血鸿蒙作业系统之后，引发全球科技界关注。作为电子科技的领头羊，华为推出任何新产品及技术，拥有电子半导体业“独立自主”、摆脱依赖技术的背景。

在10月22日晚的发表会上，公司常务董事余承东强调此次推出鸿蒙5.0，代表华为实现了全面突破：“我们在操作系统的研发，用10年的时间干了欧美同行30多年才做成的事。”北京刊出评论员文章称，“‘纯血’鸿蒙更代表着企业在操作系统领域从‘跟跑’到‘领跑’的奋进，是打破‘缺芯少魂’困局的重要一步。”

上面都是吹水的哈，本文直接上手第一个鸿蒙项目，如何在开发工具DevEco Studio上run起来一个简单应用。

好的！下面是稍复杂一点的鸿蒙项目示例。这次我们将创建一个 新闻阅读应用，它包含以下功能：

• 从网络获取新闻列表。
• 显示新闻的标题和简短内容。
• 点击某条新闻，进入新闻详情页面。

项目：新闻阅读应用

项目功能：

1. 从网络获取新闻数据：使用简单的 API（模拟）从服务器获取新闻列表。
2. 展示新闻列表：使用 ListContainer 显示新闻的标题和简要内容。
3. 点击查看详情：点击新闻标题，进入详细页面，显示新闻的全文内容。

---

1. 项目结构

news-app
├── src
│   ├── main
│   │   ├── java
│   │   │   └── com.example.newsapp
│   │   │       └── MainAbility.java        // 主入口代码
│   │   │       └── NewsDetailAbility.java  // 新闻详情页面
│   │   ├── resources
│   │   │   ├── base
│   │   │   │   └── layout
│   │   │   │       ├── main_layout.xml     // 新闻列表页面布局
│   │   │   │       └── news_detail.xml     // 新闻详情页面布局
│   │   ├── config.json                     // 配置文件
│   ├── resources.json                     // 资源文件信息

---

2. 布局文件：main_layout.xml

路径：news-app/src/main/resources/base/layout/main_layout.xml

这是新闻列表页面的布局，包含：

• 一个 ListContainer，用于显示新闻的标题和简要内容。

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_parent"
    ohos:orientation="vertical"
    ohos:padding="10vp">

    <!-- 新闻列表 -->
    <ListContainer
        ohos:id="$+id:news_list"
        ohos:width="match_parent"
        ohos:height="match_parent"/>
</DirectionalLayout>

---

3. 新闻详情页面布局：news_detail.xml

路径：news-app/src/main/resources/base/layout/news_detail.xml

显示新闻的详细内容，包含：

• 一个 Text 用于显示新闻标题。
• 一个 Text 用于显示新闻的详细内容。

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_parent"
    ohos:orientation="vertical"
    ohos:padding="20vp">

    <!-- 新闻标题 -->
    <Text
        ohos:id="$+id:news_title"
        ohos:width="match_parent"
        ohos:height="wrap_content"
        ohos:text_size="25fp"
        ohos:text_color="#000000"
        ohos:margin_bottom="10vp"/>