日期：2026-03-26
项目阶段：UI/UX 基础配置
开发环境：HarmonyOS (ArkTS) / 类似声明式开发框架

---

📝 概述

在“黑马云音乐”项目的初始化阶段，我首先对应用的视觉入口进行了定制化修改。本次练习主要涵盖三个核心维度：应用图标、应用名称以及启动页背景图标。

通过修改配置文件与资源引用，我们成功将默认模板替换为自定义的“黑马云”风格元素。以下是详细的操作步骤与技术解析。

---

🛠️ 核心修改步骤

1. 修改应用图标 (App Icon)

应用图标是用户在桌面识别应用的第一要素。在配置文件中，我们通过 $media 资源引用机制来替换默认图标。

配置代码：

"icon": "$media:logo"

• 技术解析：
  • $media：表示引用媒体资源目录（通常位于 resources/base/media）。
  • logo：资源文件名（不含扩展名，如 .png 或 .svg）。
• 操作指引：
  1. 准备一张符合规范的高清图标（建议包含多分辨率适配）。
  2. 将文件命名为 logo.png (或其他格式) 并放入项目的媒体资源目录。
  3. 确保配置文件中的键值对指向正确的资源名称。

---

2. 修改应用名称 (App Label)

应用名称显示在桌面图标下方及系统设置中。我采用资源解耦的方式，通过字符串资源文件进行动态管理，便于后续的多语言适配。

配置代码：

"label": "$string:EntryAbility_label"

资源文件内容 (string.json)：

{
  "name": "EntryAbility_label",
  "value": "黑马云音乐"
}

• 💡 开发者小贴士 (Mac 用户)：
  在 IDE 中快速跳转定义时：

  • Windows/Linux：按住 Ctrl + 鼠标左键点击变量名。
  • macOS：按住 Command + 鼠标左键点击变量名。

  这将直接带你跳转到 string.json 或对应的资源定义文件，极大提高开发效率。

• 自定义指南：
  只需修改 "value" 字段的内容，即可实时生效应用名称。例如改为 "黑云试听版" 或 "My Music"。

---

3. 修改启动页背景图标 (Start Window Icon)

为了提升用户体验，避免启动时的白屏或默认图标突兀感，我自定义了应用冷启动阶段的窗口图标。

配置代码：

"startWindowIcon": "$media:logo"

• 效果说明：
  当用户点击图标启动应用，直到主页面完全加载完成之前的这段时间（即启动窗），系统将显示此处配置的图标。保持与桌面图标一致（使用相同的 $media:logo）可以确保视觉流的连贯性。

---

✅ 修改成功示意

经过上述配置并重新编译运行后，应用呈现出预期的“黑马云”风格。

图注：左侧为桌面展示效果，右侧为应用启动瞬间的窗口效果，图标与名称均已更新。

---

🚀 下一步计划

基础视觉配置已完成，接下来我们将进入核心功能开发阶段：

• 实现音乐播放器内核集成
• 设计“黑马”主题色的 UI 界面
• 接入在线音乐列表 API
• 优化启动速度与内存占用

---

备注：开发过程中请记得定期清理构建缓存 (Clean Project)，以确保资源修改能立即生效，避免旧缓存导致的显示异常。