HarmonyOS应用开发实战：萌宠日记 - 应用启动流程与闪屏页面设计

前言

闪屏页（Splash Page） 是用户打开应用后看到的 第一个界面 ，它承担着 品牌展示 、加载缓冲 、用户体验 三重使命。在 萌宠日记 中，我们设计了一个充满温暖感的闪屏页，包含 Logo 展示 、品牌标语 、宠物插画 和 进入按钮 四个核心元素。

一个好的闪屏页不仅能提升应用的第一印象，还能为后续的数据加载提供缓冲时间，避免用户看到白屏。本文将深入解析萌宠日记闪屏页的设计思路与实现细节。

一、启动流程全景

1.1 从点击图标到看到界面

应用启动的完整链路：

阶段	耗时	关键操作	用户感知
1. 冷启动准备	100-500ms	进程创建、Ability 实例化	系统桌面动画
2. 启动窗口	0-200ms	显示启动窗口背景色	短暂显示纯色背景
3. onCreate	10-50ms	全局初始化、颜色模式设置	无感知
4. onWindowStageCreate	50-200ms	加载 SplashPage 页面内容	闪屏页出现
5. SplashPage 展示	1-3s	用户浏览闪屏页	看到 Logo 和按钮
6. 用户点击 → Index	100-300ms	router.pushUrl 跳转主页	进入主界面

1.2 EntryAbility 中的启动入口

typescript 复制代码

// EntryAbility.ets --- 启动入口
onWindowStageCreate(windowStage: window.WindowStage): void {
  hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

  windowStage.loadContent('pages/SplashPage', (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.');
  });
}

关键点 ：loadContent 的第一个参数指定了要加载的页面路径，这里指向 pages/SplashPage，即闪屏页。该路径在 main_pages.json 中注册。

二、SplashPage 整体布局

2.1 页面结构分析

typescript 复制代码

// SplashPage.ets --- 完整闪屏页代码
@Entry
@Component
struct SplashPage {
  build() {
    Column() {
      Blank()                                      // 上部弹性空间

      // 1. Logo + 标题
      Row({ space: 12 }) {
        Text('🐾').fontSize(48)                    // 宠物爪印 Emoji
        Text('萌宠日记').fontSize(36)
          .fontWeight(FontWeight.Bold)
          .fontColor('#333333')
      }

      // 2. 品牌标语
      Text('记录爱·陪伴成长💕')
        .fontSize(16).fontColor('#F5A623')
        .margin({ top: 8 })

      Blank()                                      // 中部弹性空间

      // 3. 宠物插画占位
      Column() {
        Text('🐱').fontSize(80)                    // 猫咪 Emoji 作为插画
      }
      .width(200).height(200)
      .backgroundColor('#FFF3E0')
      .borderRadius(100)
      .justifyContent(FlexAlign.Center)

      Blank()                                      // 下部弹性空间

      // 4. 开始按钮
      Button('开始记录')
        .width('70%').height(48)
        .fontSize(18).fontColor(Color.White)
        .backgroundColor('#F5A623')
        .borderRadius(24)
        .onClick(() => {
          router.pushUrl({ url: 'pages/Index' })
        })

      Blank()                                      // 底部弹性空间
    }
    .width('100%').height('100%')
    .backgroundColor('#FFF8F0')
    .padding({ left: 24, right: 24, top: 60, bottom: 40 })
  }
}

2.2 布局结构分解

闪屏页使用 Column 垂直布局 ，配合 Blank() 弹性占位 实现居中效果：

复制代码

┌─────────────────────────────┐
│         Blank()             │  ← 上弹性空间（top: 60 固定内边距）
│                             │
│    🐾    萌宠日记           │  ← Logo + 标题（Row 水平排列）
│   记录爱·陪伴成长💕         │  ← 品牌标语
│                             │
│         Blank()             │  ← 中弹性空间（自动撑开）
│                             │
│        [🐱 插画]            │  ← 宠物插画（圆形 200×200）
│                             │
│         Blank()             │  ← 下弹性空间
│                             │
│    [==== 开始记录 ====]     │  ← 按钮（70% 宽度）
│                             │
│         Blank()             │  ← 底部弹性空间（bottom: 40）
└─────────────────────────────┘

提示：使用多个 Blank() 组件是 ArkUI 中实现 垂直居中分布 的经典技巧。Blank() 会占据所有剩余空间，将内容均匀撑开。

三、Logo 与标题设计

3.1 品牌标识设计

typescript 复制代码

Row({ space: 12 }) {
  Text('🐾')           // 宠物爪印 --- 品牌图标
    .fontSize(48)
  Text('萌宠日记')       // 品牌名称
    .fontSize(36)
    .fontWeight(FontWeight.Bold)
    .fontColor('#333333')
}

设计要点：

图标选择 ：使用 🐾（宠物爪印）Emoji 作为品牌图标，简洁直观
字体大小 ：48 的图标大小搭配 36 的文字大小，视觉比例协调
字重设置 ：FontWeight.Bold 粗体增强品牌感
颜色选择 ：#333333 深灰色，温和不刺眼

3.2 品牌标语

typescript 复制代码

Text('记录爱·陪伴成长💕')
  .fontSize(16)
  .fontColor('#F5A623')
  .margin({ top: 8 })

品牌标语的设计考量：

设计要素	取值	设计意图
字体大小	`16fp`	比标题小，形成层次感
字体颜色	`#F5A623` 橙色	与主色调一致，温暖活泼
上边距	`8`	与标题保持适当距离
文字内容	记录爱·陪伴成长💕	传递产品情感价值

四、宠物插画占位设计

4.1 圆形占位实现

typescript 复制代码

Column() {
  Text('🐱').fontSize(80)   // 猫咪 Emoji 作为插画
}
.width(200).height(200)       // 固定尺寸
.backgroundColor('#FFF3E0')   // 浅橙色背景
.borderRadius(100)            // 圆角半径 = 宽/2 = 圆形
.justifyContent(FlexAlign.Center)

圆形裁剪 的实现原理：

设置 width 和 height 为相同值（200）
设置 borderRadius(100) 为宽高的一半
Column 内部使用 justifyContent(FlexAlign.Center) 居中内容

4.2 占位图设计方案

萌宠日记使用 Emoji 占位 而非真实图片，优势如下：

无需网络加载：Emoji 是系统内置字体，加载速度极快
无尺寸适配问题：Emoji 自适应字体大小，无需处理多分辨率
开发成本低：不需要设计师提供素材
替换方便：后续可无缝替换为真实图片资源

五、开始按钮交互

5.1 按钮样式配置

typescript 复制代码

Button('开始记录')
  .width('70%')                 // 宽度 70%，非全屏
  .height(48)                   // 固定高度
  .fontSize(18)                 // 按钮文字大小
  .fontColor(Color.White)       // 白色文字
  .backgroundColor('#F5A623')   // 橙色背景
  .borderRadius(24)             // 圆角 = 高度/2 = 胶囊形状
  .onClick(() => {
    router.pushUrl({ url: 'pages/Index' })
  })

按钮样式参数：

参数	值	效果
`width`	`'70%'`	非全屏宽，留出左右边距
`height`	`48`	适中高度，易于点击
`borderRadius`	`24`	胶囊形圆角按钮
`backgroundColor`	`#F5A623`	品牌橙色，与标语呼应
`fontColor`	`Color.White`	白色文字，高对比度

5.2 页面跳转实现

typescript 复制代码

import { router } from '@kit.ArkUI'

// 点击后跳转主页面
router.pushUrl({ url: 'pages/Index' })

router.pushUrl 与 router.replaceUrl 的区别：

方法	行为	萌宠日记选择
`pushUrl`	压入新页面，保留原页面栈	✅ 使用
`replaceUrl`	替换当前页面，不保留历史	不适合，会丢失闪屏页

六、启动窗口背景色优化

6.1 配置启动窗口背景色

在 module.json5 中配置启动窗口：

json 复制代码

{
  "abilities": [
    {
      "name": "EntryAbility",
      "startWindowIcon": "$media:startIcon",
      "startWindowBackground": "$color:start_window_background",
      "exported": true
    }
  ]
}

6.2 颜色资源定义

json 复制代码

{
  "color": [
    {
      "name": "start_window_background",
      "value": "#FFF8F0"
    }
  ]
}

启屏优化策略：

将 startWindowBackground 设置为与 SplashPage 背景色一致的 #FFF8F0
这样从启动窗口到 SplashPage 的过渡是 无缝衔接 的
避免颜色突变造成的视觉闪烁

七、页面过渡动画

7.1 当前实现与优化方向

萌宠日记当前使用 router.pushUrl 的默认跳转效果。HarmonyOS 提供了丰富的页面过渡动画 API：

typescript 复制代码

// 页面转场动画示例（可扩展）
import { PageTransition } from '@kit.ArkUI'

@Entry
@Component
struct SplashPage {
  build() {
    // 页面内容...
  }

  // 页面进入动画
  pageTransition() {
    PageTransition({ duration: 300, curve: Curve.EaseInOut })
  }
}

7.2 淡入淡出动画

typescript 复制代码

// SplashPage 淡入效果
@Entry
@Component
struct SplashPage {
  @State opacityValue: number = 0

  aboutToAppear(): void {
    // 页面出现时，逐渐增加透明度
    animateTo({ duration: 800, curve: Curve.EaseOut }, () => {
      this.opacityValue = 1
    })
  }

  build() {
    Column() {
      // 内容...
    }
    .opacity(this.opacityValue)
  }
}

八、启动性能优化

8.1 启动时间测量

typescript 复制代码

onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
  // 记录启动开始时间
  hilog.info(DOMAIN, 'testTag', 'App launch start: %{public}s', Date.now().toString())
  // ... 初始化逻辑
}

onWindowStageCreate(windowStage: window.WindowStage): void {
  windowStage.loadContent('pages/SplashPage', (err) => {
    // 记录页面加载完成时间
    hilog.info(DOMAIN, 'testTag', 'SplashPage loaded at: %{public}s', Date.now().toString())
  })
}

8.2 启动优化策略

有序列表 --- 优化启动速度的 5 个策略：

减少 onCreate 中的同步操作：将耗时操作延迟到后台线程或 SplashPage 展示后
使用启动窗口背景色：避免白屏，让用户感知到应用立即响应
懒加载非首屏页面：只加载 SplashPage，其他页面按需加载
避免在主线程执行网络请求：网络请求会阻塞 UI 渲染
使用 AppStartup 框架：管理初始化任务的执行顺序和并行度

九、无障碍与适老化

9.1 闪屏页的无障碍支持

typescript 复制代码

Text('🐾')
  .fontSize(48)
  .accessibilityText('宠物爪印图标')  // 屏幕朗读描述

Button('开始记录')
  .accessibilityText('点击进入萌宠日记主页面')

9.2 适老化设计考量

萌宠日记闪屏页的适老化设计：

大按钮设计 ：height: 48 确保点击区域足够大
高对比度：橙色背景 + 白色文字，符合 WCAG 对比度标准
简洁布局：4 个核心元素，信息层级清晰
大字体：最小字号 16fp，确保可读性

十、从闪屏到首页的平滑过渡

10.1 数据加载时机

typescript 复制代码

onClick(() => {
  // 点击后立即跳转
  router.pushUrl({ url: 'pages/Index' })
  // 首页数据在 Index 的 aboutToAppear 中加载
})

10.2 Index 页面的初始化

typescript 复制代码

// Index.ets --- 主容器初始化
aboutToAppear(): void {
  // 预初始化各 Tab 的导航栈
  this.homeStack.pushPath({ name: 'home' })
  this.diaryStack.pushPath({ name: 'diary' })
  this.recordStack.pushPath({ name: 'record' })
}

总结

本文从 萌宠日记 的 闪屏页设计 出发，完整解析了应用的启动流程。核心要点包括：

启动链路：从点击图标到闪屏页再到主页的完整流程
SplashPage 布局：使用 Column + Blank() 实现垂直居中分布
品牌展示：Logo、标语、插画、按钮四要素设计
启动窗口优化：背景色一致，视觉无缝衔接
性能优化：启动时间测量、懒加载、白屏消除

下一篇我们将深入 自定义主题色系统设计与资源管理，解析萌宠日记如何通过资源文件统一管理色彩和字符串。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

页面路由开发指导：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-routing
页面转场动画：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-page-transition
启动窗口配置：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/uiability-usage
无障碍开发指导：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/accessibility-kit
应用启动优化：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/app-startup
资源分类与访问：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/resource-categories-and-access
ArkUI 动画开发：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-animation
应用配置文件详解：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/module-configuration-file