鸿蒙 应用启动页：分类、配置

本文同步发表于 微信公众号，微信搜索 程语新视界 即可关注，每个工作日都有文章更新

   启动页是应用冷启动时显示的首个页面，在应用进程尚未运行或应用内容未加载完成前显示。它不仅提供视觉过渡，更承载品牌展示功能，强化用户对产品的认知。

展示场景

二、启动页的分类与实现方式

2.1 两种启动页类型

2.2 配置字段总览（module.json5 abilities标签）

优先级规则：当配置了startWindow时，简易启动页配置（startWindowIcon和startWindowBackground）自动失效。

三、简易启动页配置

3.1 默认配置

新建UIAbility时的默认配置：

{
"abilities": [
{
"startWindowIcon": "$media:startIcon",
"startWindowBackground": "$color:start_window_background"
}
]
}

3.2 自定义配置

{
"abilities": [
{
"name": ".MainAbility",
"srcEntry": "./ets/application/MainAbility/MainAbility.ts",
"startWindowIcon": "$media:my_app_icon", // 自定义图标
"startWindowBackground": "$color:my_brand_blue" // 自定义背景色
}
]
}

3.3 注意

四、增强启动页配置（API 19+）

4.1 配置结构

module.json5
└── abilities.startWindow: "$profile:start_window"
└── resources/base/profile/start_window.json

4.2 二级配置文件字段

4.2.1 启动页显示控制字段

startWindowType 取值：

startWindowColorModeType 取值：

4.2.2 上部分区域展示资源

显示优先级：startWindowAppIcon > startWindowIllustration（同时配置时只显示图标）

4.2.3 下部分区域展示资源

4.2.4 背景配置字段

startWindowBackgroundImageFit 取值：

4.3 完整配置示例

// resources/base/profile/start_window.json
{
"startWindowType": "REQUIRED_SHOW",
"startWindowColorModeType": "FOLLOW_SYSTEM",
"startWindowAppIcon": "$media:app_icon",
"startWindowIllustration": "$media:launch_illustration",
"startWindowBrandingImage": "$media:brand_logo",
"startWindowBackgroundColor": "$color:launch_bg_color",
"startWindowBackgroundImage": "$media:launch_bg_image",
"startWindowBackgroundImageFit": "Cover"
}
// module.json5
{
"module": {
"abilities": [
{
"name": ".MainAbility",
"srcEntry": "./ets/application/MainAbility/MainAbility.ts",
"startWindow": "$profile:start_window" // 指向增强配置
}
]
}
}

五、建议

5.1 图片资源选择

5.2 多设备适配

5.3 启动时延优化

5.4 品牌展示策略