前言

鸿蒙PC应用为桌面场景带来了统一的分布式体验，对习惯了 Web、移动端或传统桌面开发的同学来说，快速跑通“第一个鸿蒙PC Hello World”是非常重要的起点。
本篇文章将带你从开发环境准备开始，一步步创建鸿蒙PC应用工程，并在 Index.ets 中实现一个最简单的 Hello World 页面：居中显示文本，点击后文案发生变化。

阅读完本篇，你将完成：

• 一个可运行在 PC 设备（如 2in1）的鸿蒙应用工程；
  
• 理解工程中入口 Ability 与页面 Index.ets 的基本关系；

• 完成一个点击后从 Hello World 切换到 Welcome 的 Hello World 示例。

目录

1. 开发环境概览
2. 安装与配置开发工具
3. 创建鸿蒙PC应用工程
4. 理解工程结构与入口配置
5. 在 Index.ets 中实现 Hello World 页面
6. 运行、预览与调试应用
7. 常见问题与排查建议
8. UML 类图（mermaid）
9. 流程图（mermaid）
10. 总结

一、开发环境概览

1.1 开发环境要求

下面是一个典型的鸿蒙PC应用开发环境示例配置表（可根据你本机情况适当调整）：

1.2 鸿蒙PC应用的工程形态

在鸿蒙应用中，PC 形态通常通过设备类型（如 2in1）来区分。你会在 module.json5 中看到类似配置：

• deviceTypes: ["2in1"]：表示该模块目标设备为 PC/2in1 形态；
• pages 指向页面配置文件 main_pages.json；
• mainElement 指向入口 EntryAbility。

二、安装与配置开发工具

1. 安装 DevEco Studio

   • 前往官方站点下载适配 HarmonyOS 的 DevEco Studio 安装包；
   • 按向导完成安装，选择合适的安装路径。

2. 配置 HarmonyOS SDK

   • 首次启动 DevEco Studio 时，在 SDK 管理界面选择需要支持 PC/2in1 的 HarmonyOS 版本（例如 6.0.1）；
   • 确认下载并安装对应的平台工具与编译链。

3. 配置模拟器或真机

   • 若使用模拟器，在 DevEco Studio 中创建 PC/2in1 模拟器实例；
   • 若有真实鸿蒙PC设备，则在设备中开启开发者模式，并与开发机通过 USB 或网络连接。

三、创建鸿蒙PC应用工程

以 DevEco Studio 为例，新建工程的大致流程如下（具体界面以 IDE 实际版本为准）：

1. 打开 DevEco Studio，选择 New Project；
2. 在模板中选择适合 PC/2in1 的应用模板（如 Stage 模型应用）；
3. 设置工程名（如 hongmengPC）、包名（如 com.example.hongmengpc）、保存路径等；
4. 在设备类型中确认包含 2in1；
5. 完成向导后，IDE 会在指定目录下生成完整工程结构。

四、理解工程结构与入口配置

4.1 应用级配置

在工程根目录的 AppScope 下，你可以看到应用级配置，例如：

• AppScope/app.json5：配置 bundleName、应用图标、名称等；
• AppScope/resources：存放应用级资源（图标、字符串等）。

4.2 模块级配置

PC 入口模块通常为 entry，其配置文件 entry/src/main/module.json5 中包含：

• type: "entry"：表示为入口模块；
• mainElement: "EntryAbility"：指定主 Ability；
• deviceTypes: ["2in1"]：表示目标设备为 PC/2in1；
• pages: "$profile:main_pages"：引用页面列表配置。

4.3 页面入口配置

entry/src/main/resources/base/profile/main_pages.json 中指定应用默认加载的页面：

{
  "src": [
    "pages/Index"
  ]
}

这意味着入口窗口会加载 ets/pages/Index.ets 中定义的页面结构。

五、在 Index.ets 中实现 Hello World 页面

5.1 Hello World 页面代码结构

在当前工程中，我们在 entry/src/main/ets/pages/Index.ets 中实现一个简单的 Hello World 页面，代码示例如下：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  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.message = 'Welcome';
        })
    }
    .height('100%')
    .width('100%')
  }
}

5.2 关键知识点拆解

• @Entry：标记这是应用的入口 UI 组件；
• @Component：声明这是一个可复用 UI 组件；
• struct Index：定义页面结构体（可类比为页面类）；
• @State message: string：定义页面状态，用于驱动 UI 更新；
• build()：ArkUI 声明式 UI 的构建函数；
• RelativeContainer()：相对布局容器，用来实现中间对齐；
• Text(this.message)：显示当前状态中的文本；
• .alignRules(...)：控制文本在容器中的垂直、水平居中；
• .onClick(() => { this.message = 'Welcome'; })：点击时修改状态，触发 UI 重绘。

六、运行、预览与调试应用

6.1 构建并运行

在 DevEco Studio 中，你可以通过以下方式运行 PC 应用：

1. 在工具栏选择目标设备（PC 模拟器或真实鸿蒙PC设备）；
2. 选择 entry 模块作为运行目标；
3. 点击运行按钮，IDE 会自动编译并部署应用；
4. 构建成功后，将在目标设备上启动主窗口并显示 Index 页面。

6.2 交互体验

运行后，你应该能在 PC 窗口中看到类似效果：

• 窗口中间显示一行粗体的 Hello World 文本；
• 当你用鼠标点击这行文本时，文案会变为 Welcome；
• 这就是最简单的鸿蒙PC Hello World 交互示例。

6.3 调试建议

• 若应用未启动，请检查设备/模拟器是否在线；
• 若构建报错，优先关注 ArkTS 语法错误、资源引用是否正确；
• 可在 DevEco Studio 中使用日志面板查看运行时日志。

七、常见问题与排查建议

八、UML 类图（mermaid）

下面使用 mermaid 以 UML 类图的形式描述 Index 组件的结构关系。你可以在支持 mermaid 的 Markdown 渲染器中直接查看图形。

说明：

• Index：鸿蒙PC应用首页组件；
• message：页面状态，控制 Text 文本内容；
• build()：ArkUI 声明式 UI 构建函数。

九、流程图（mermaid）

下面使用 mermaid 流程图描述从创建工程到看到 Hello World 的关键步骤：

你可以根据实际项目，将步骤进一步细化，如增加“配置 SDK”“创建模拟器”等节点。

十、总结

本篇文章从开发环境准备开始，带你完成了第一个鸿蒙PC应用 Hello World 示例，重点包括：

• 认识鸿蒙PC应用工程的基本结构与入口配置；
• 在 Index.ets 中使用 ArkUI 声明式写法实现简单页面；
• 理解状态驱动 UI 更新的基本方式（点击文本修改 @State）；
• 掌握从创建工程到运行在 PC 设备上的基本流程；
• 使用 mermaid 以 UML 类图和流程图的方式，清晰表达组件结构与开发流程。

在后续的文章中，我们将基于这个 Hello World 工程继续扩展，增加窗口管理、复杂布局、数据存储和网络通信等能力，逐步构建完整的鸿蒙PC应用体系。

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