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

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

展示场景

场景	触发条件	显示特性
应用冷启动	应用无后台进程时启动	显示启动页，有200ms透明渐隐动效过渡到应用内容
多任务卡片	应用在启动页阶段退出到后台	多任务视图中显示启动页作为预览
应用主动销毁退出	应用主动销毁，系统未生成快照时	退出动效中显示启动页
进程恢复	应用从后台恢复，内容未就绪时	临时显示启动页直至内容加载完成

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

2.1 两种启动页类型

类型	特点	适用场景	API版本要求
简易启动页	基础配置，仅支持图标+背景色	所有UIAbility必须配置	所有版本
增强启动页	丰富配置，支持图标/插画/品牌图/背景图等	需要复杂品牌展示的应用	API 19+

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

字段	类型	必填	描述
startWindowIcon	string	是	简易启动页图标资源索引（≤255字节）
startWindowBackground	string	是	简易启动页背景颜色资源索引（≤255字节）
startWindow	string	否	增强启动页配置文件索引（≤255字节）

优先级规则：当配置了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 注意

1. 图标尺寸：startWindowIcon图标不会随窗口缩放，按实际大小居中显示

2. 适配建议：避免设计针对单一设备全屏尺寸的图标，防止在其他尺寸设备上显示异常

3. 背景色：不建议使用透明色，考虑各种场景下的显示效果和系统动效连续性

4. 全屏需求：如需全屏资源展示，请使用增强启动页

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

4.1 配置结构

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

4.2 二级配置文件字段

4.2.1 启动页显示控制字段

字段	类型	必填	描述	默认值	版本
startWindowType	string	否	控制启动页显示/隐藏策略	REQUIRED_SHOW	API 20+
startWindowColorModeType	string	否	启动页深浅色模式	FOLLOW_SYSTEM	API 20+

startWindowType 取值：

值	含义	适用场景
REQUIRED_SHOW	强制显示，不受Ability管理服务控制	品牌展示要求高的应用
REQUIRED_HIDE	强制隐藏，不受Ability管理服务控制	极速启动应用
OPTIONAL_SHOW	可选显示，默认显示，可被hideStartWindow隐藏	通用场景

startWindowColorModeType 取值：

值	含义
FOLLOW_SYSTEM	启动页颜色模式跟随系统深浅色
FOLLOW_APPLICATION	启动页颜色模式跟随应用深浅色

4.2.2 上部分区域展示资源

字段	类型	必填	描述	显示规则	版本
startWindowAppIcon	string	否	应用图标资源	系统缩放，保持宽高比 展示区域：128vp/192vp/256vp*256vp	API 19+
startWindowIllustration	string	否	插画资源	超出区域则缩放，否则保持原尺寸 展示区域宽高比：1	API 19+

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

4.2.3 下部分区域展示资源

字段	类型	必填	描述	显示规则	版本
startWindowBrandingImage	string	否	品牌标识资源	超出区域则缩放，否则保持原尺寸 窗口高度<300vp时隐藏	API 19+

4.2.4 背景配置字段

字段	类型	必填	描述	默认值	版本
startWindowBackgroundColor	string	是	背景颜色资源	-	API 19+
startWindowBackgroundImage	string	否	背景图片资源	-	API 19+
startWindowBackgroundImageFit	string	否	背景图填充方式	Cover	API 19+

startWindowBackgroundImageFit 取值：

值	含义	适用场景
Contain	保持宽高比缩放，完全显示在边界内	完整展示图片
Cover	保持宽高比缩放，覆盖整个边界	全屏背景
Auto	智能缩放，保持比例同时填充视图	自适应
Fill	不保持宽高比，拉伸填充边界	平铺效果
ScaleDown	保持宽高比，只缩小不放大	大图适配
None	保持原有尺寸显示	像素级控制

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 图片资源选择

1. 格式推荐：优先使用 JPG 或 PNG 格式

   • 解码性能更优

   • 显示效果更好

   • 文件体积更小

2. 分辨率限制：不超过256×256像素

   • 关键影响启动时延

   • 过大的图片会增加解码时间

   • 系统会自动缩放适配

3. 图标设计：

   • 简洁明了，突出品牌

   • 考虑深浅色模式适配

5.2 多设备适配

设备类型	简易启动页	增强启动页
手机	适用，但图标尺寸固定	推荐，系统自动缩放
平板/2in1	可能显示不佳	强烈推荐，完美适配
折叠屏	不推荐	推荐，支持多种形态

5.3 启动时延优化

1. 图片压缩：使用工具压缩图片资源

2. 资源预加载：在合适时机预加载启动资源

3. 避免透明背景：透明色会增加合成开销

4. 简化设计：减少启动页元素复杂度

5.4 品牌展示策略

1. 一致性：启动页与应用内品牌设计保持一致

2. 信息层级：主次分明，突出核心品牌元素

3. 动效配合：结合200ms渐隐动效，平滑过渡