张家界市网站建设_网站建设公司_响应式开发_seo优化

前言

在真正动手开发鸿蒙PC应用之前，读懂工程结构和关键配置文件非常重要。只有搞清楚每个目录、每个 JSON5 配置、每个入口 Ability 与页面之间的关系，我们才能做到“改哪里心里有数”，避免一上来就被各种路径、页面路由搞懵。

本篇文章基于一个简单的鸿蒙PC应用工程（例如当前的hongmengPC工程），从整体结构到关键配置文件，逐层拆解鸿蒙PC应用是如何启动到Index.ets页面，并在 PC 窗口中展示 UI 的。

阅读完本篇，你将能够：

• 说清楚鸿蒙PC应用工程整体目录的含义；
• 理解 AppScope、entry 模块以及资源目录的职责；
• 明白app.json5、module.json5、main_pages.json等配置文件的作用；
• 理解入口EntryAbility如何加载pages/Index页面；
• 为后续扩展多页面、多模块的鸿蒙PC应用打下结构基础。

目录

1. 鸿蒙PC应用工程整体结构概览
2. 应用级配置：AppScope 与 app.json5
3. 模块级配置：entry 模块与 module.json5
4. 页面入口配置：main_pages.json 与页面路由
5. UI 入口代码：EntryAbility 与 Index.ets
6. 关键配置文件表格总览
7. UML 结构类图（mermaid）
8. 总结

一、鸿蒙PC应用工程整体结构概览

下面以hongmengPC工程为例，简要看一下与鸿蒙PC应用最相关的核心目录（只列出和本篇主题相关的部分）：

• AppScope/
  • app.json5：应用级配置（包名、应用名、图标等）
  • resources/：应用级资源（字符串、图标等）
• entry/
  • src/main/ets/entryability/EntryAbility.ets：入口 UIAbility
  • src/main/ets/pages/Index.ets：主页面（当前 Hello World 页面）
  • src/main/module.json5：模块级配置，指定EntryAbility、设备类型2in1等
  • src/main/resources/base/profile/main_pages.json：页面列表及入口页面
  • src/main/resources/base/element/*.json：模块级资源（字符串、颜色、float 等）

从结构上看：

• AppScope 层：描述整个鸿蒙PC应用的“壳”信息（app 名称、icon、包名）；
• entry 模块：是真正承载 PC 端 UI 和逻辑的“入口模块”；
• ets/pages：页面级 UI 代码，如Index.ets；
• 各种配置文件把“应用 → 模块 → Ability → 页面”这一链路串起来。

二、应用级配置：AppScope 与 app.json5

应用级配置文件位于：

• AppScope/app.json5

示例内容（和工程实际类似）：

{ "app": { "bundleName": "com.example.hongmengpc", "vendor": "example", "versionCode": 1000000, "versionName": "1.0.0", "icon": "$media:layered_image", "label": "$string:app_name" } }

这里的关键字段：

• bundleName：应用包名，系统用来唯一标识应用；
• icon：应用图标资源引用；
• label：应用展示名称，引用字符串资源app_name（在AppScope/resources/base/element/string.json中定义）。

你可以把 AppScope 理解为整个鸿蒙PC应用的“身份证”。

三、模块级配置：entry 模块与 module.json5

鸿蒙PC应用的 UI 通常实现在入口模块entry中，对应配置文件：

• entry/src/main/module.json5

示例内容（截取核心部分）：

{ "module": { "name": "entry", "type": "entry", "description": "$string:module_desc", "mainElement": "EntryAbility", "deviceTypes": [ "2in1" ], "deliveryWithInstall": true, "installationFree": false, "pages": "$profile:main_pages", "abilities": [ { "name": "EntryAbility", "srcEntry": "./ets/entryability/EntryAbility.ets", "description": "$string:EntryAbility_desc", "icon": "$media:layered_image", "label": "$string:EntryAbility_label", "startWindowIcon": "$media:startIcon", "startWindowBackground": "$color:start_window_background", "exported": true, "skills": [ { "entities": [ "entity.system.home" ], "actions": [ "ohos.want.action.home" ] } ] } ] } }

几个重点字段：

• type: "entry"：说明这是一个入口模块；
• mainElement: "EntryAbility"：指定默认启动的 Ability 名称；
• deviceTypes: ["2in1"]：表明这是面向鸿蒙PC/二合一设备的应用；
• pages: "$profile:main_pages"：指定页面列表配置文件；
• abilities：定义具体 Ability 列表，其中
  • name: "EntryAbility"与mainElement对应；
  • srcEntry指向EntryAbility.ets源文件；
  • skills中配置了entity.system.home和ohos.want.action.home，表示可作为系统首页能力。

在 PC 端场景下，deviceTypes写成"2in1"是关键，使得应用可以在对应形态的设备上安装/运行。

四、页面入口配置：main_pages.json 与页面路由

模块级页面入口由 profile 文件控制：

• entry/src/main/resources/base/profile/main_pages.json

示例内容：

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

这里的含义很直接：

• src数组中的每一项代表一个页面路径；
• "pages/Index"对应entry/src/main/ets/pages/Index.ets；
• 第一项通常作为默认页面，即应用启动时加载的页面。

当系统启动EntryAbility后，会根据module.json5中的pages字段找到main_pages.json，再根据这里的"pages/Index"加载Index页面。

五、UI 入口代码：EntryAbility 与 Index.ets

5.1 EntryAbility：连接窗口与页面

入口 Ability 代码路径：

• entry/src/main/ets/entryability/EntryAbility.ets

核心片段如下（示例简化版）：

import{AbilityConstant,ConfigurationConstant,UIAbility,Want}from'@kit.AbilityKit';import{hilog}from'@kit.PerformanceAnalysisKit';import{window}from'@kit.ArkUI';constDOMAIN=0x0000;exportdefaultclassEntryAbilityextendsUIAbility{onCreate(want:Want,launchParam:AbilityConstant.LaunchParam):void{try{this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);}catch(err){hilog.error(DOMAIN,'testTag','Failed to set colorMode. Cause: %{public}s',JSON.stringify(err));}}onWindowStageCreate(windowStage:window.WindowStage):void{windowStage.loadContent('pages/Index',(err)=>{if(err.code){hilog.error(DOMAIN,'testTag','Failed to load the content. Cause: %{public}s',JSON.stringify(err));return;}hilog.info(DOMAIN,'testTag','Succeeded in loading the content.');});}}

关键点：

• EntryAbility继承自UIAbility，是 UI 的入口；
• onWindowStageCreate中，通过windowStage.loadContent('pages/Index', ...)显式加载页面；
• 参数'pages/Index'与main_pages.json的页面路径保持一致。

这一步完成了从 Ability 到具体页面组件的映射。

5.2 Index.ets：PC 页面本身（示例延续第 1 篇）

首页 UI 实现在：

• entry/src/main/ets/pages/Index.ets

示例代码（与第 1 篇保持一致）：

@Entry@Componentstruct Index{@Statemessage: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%')}}

该页面做了两件事：

• 使用RelativeContainer在 PC 窗口中心居中显示一段文本；
• 通过@State管理message，点击文本后从Hello World改为Welcome。

从“配置角度”看，Index.ets是被EntryAbility以及一系列 JSON5 配置文件串联起来的最终 UI 终点。

六、关键配置文件表格总览

下面用一个表格快速回顾本篇涉及的关键配置文件及其作用。

七、UML 结构类图（mermaid）

八、总结

本篇从“结构”和“配置”的视角，系统梳理了一个鸿蒙PC应用从 AppScope 到页面的完整链路：

• 工程整体结构：AppScope、entry 模块、ets 与 resources 的分工；
• 应用级配置：app.json5描述应用的基本信息；
• 模块级配置：module.json5决定入口 Ability、设备类型（PC/2in1）、页面 profile；
• 页面入口配置：main_pages.json列出页面并指定默认入口；
• UI 入口代码：EntryAbility通过loadContent('pages/Index')加载页面；
• 页面实现：Index.ets用 ArkUI 声明式写法构建鸿蒙PC窗口里的具体 UI。

通过结构图和流程图，你可以对鸿蒙PC应用的“启动链路”形成一个完整的心智模型：
从 app.json5 → module.json5 → main_pages.json → EntryAbility.ets → Index.ets，每一步都清晰可控。

在后续文章中，我们可以在这个结构基础上继续扩展：增加更多页面、拆分模块、引入多窗口、多语言、多环境配置等，让鸿蒙PC应用工程保持清晰、可演进。

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