HarmonyOS应用开发实战：萌宠日记 - 应用启动流程与闪屏页面设计 前言闪屏页Splash Page是用户打开应用后看到的第一个界面它承担着品牌展示、加载缓冲、用户体验三重使命。在萌宠日记中我们设计了一个充满温暖感的闪屏页包含Logo 展示、品牌标语、宠物插画和进入按钮四个核心元素。一个好的闪屏页不仅能提升应用的第一印象还能为后续的数据加载提供缓冲时间避免用户看到白屏。本文将深入解析萌宠日记闪屏页的设计思路与实现细节。一、启动流程全景1.1 从点击图标到看到界面应用启动的完整链路阶段耗时关键操作用户感知1. 冷启动准备100-500ms进程创建、Ability 实例化系统桌面动画2.启动窗口0-200ms显示启动窗口背景色短暂显示纯色背景3.onCreate10-50ms全局初始化、颜色模式设置无感知4.onWindowStageCreate50-200ms加载 SplashPage 页面内容闪屏页出现5.SplashPage 展示1-3s用户浏览闪屏页看到 Logo 和按钮6.用户点击 → Index100-300msrouter.pushUrl 跳转主页进入主界面1.2 EntryAbility 中的启动入口// 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 页面结构分析// 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 品牌标识设计Row({ space: 12 }) { Text() // 宠物爪印 — 品牌图标 .fontSize(48) Text(萌宠日记) // 品牌名称 .fontSize(36) .fontWeight(FontWeight.Bold) .fontColor(#333333) }设计要点图标选择使用宠物爪印Emoji 作为品牌图标简洁直观字体大小48的图标大小搭配36的文字大小视觉比例协调字重设置FontWeight.Bold粗体增强品牌感颜色选择#333333深灰色温和不刺眼3.2 品牌标语Text(记录爱·陪伴成长) .fontSize(16) .fontColor(#F5A623) .margin({ top: 8 })品牌标语的设计考量设计要素取值设计意图字体大小16fp比标题小形成层次感字体颜色#F5A623橙色与主色调一致温暖活泼上边距8与标题保持适当距离文字内容记录爱·陪伴成长传递产品情感价值四、宠物插画占位设计4.1 圆形占位实现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 按钮样式配置Button(开始记录) .width(70%) // 宽度 70%非全屏 .height(48) // 固定高度 .fontSize(18) // 按钮文字大小 .fontColor(Color.White) // 白色文字 .backgroundColor(#F5A623) // 橙色背景 .borderRadius(24) // 圆角 高度/2 胶囊形状 .onClick(() { router.pushUrl({ url: pages/Index }) })按钮样式参数参数值效果width70%非全屏宽留出左右边距height48适中高度易于点击borderRadius24胶囊形圆角按钮backgroundColor#F5A623品牌橙色与标语呼应fontColorColor.White白色文字高对比度5.2 页面跳转实现import { router } from kit.ArkUI // 点击后跳转主页面 router.pushUrl({ url: pages/Index })router.pushUrl与router.replaceUrl的区别方法行为萌宠日记选择pushUrl压入新页面保留原页面栈✅ 使用replaceUrl替换当前页面不保留历史不适合会丢失闪屏页六、启动窗口背景色优化6.1 配置启动窗口背景色在module.json5中配置启动窗口{ abilities: [ { name: EntryAbility, startWindowIcon: $media:startIcon, startWindowBackground: $color:start_window_background, exported: true } ] }6.2 颜色资源定义{ color: [ { name: start_window_background, value: #FFF8F0 } ] }启屏优化策略将startWindowBackground设置为与 SplashPage 背景色一致的#FFF8F0这样从启动窗口到 SplashPage 的过渡是无缝衔接的避免颜色突变造成的视觉闪烁七、页面过渡动画7.1 当前实现与优化方向萌宠日记当前使用router.pushUrl的默认跳转效果。HarmonyOS 提供了丰富的页面过渡动画 API// 页面转场动画示例可扩展 import { PageTransition } from kit.ArkUI Entry Component struct SplashPage { build() { // 页面内容... } // 页面进入动画 pageTransition() { PageTransition({ duration: 300, curve: Curve.EaseInOut }) } }7.2 淡入淡出动画// 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 启动时间测量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 闪屏页的无障碍支持Text() .fontSize(48) .accessibilityText(宠物爪印图标) // 屏幕朗读描述 Button(开始记录) .accessibilityText(点击进入萌宠日记主页面)9.2 适老化设计考量萌宠日记闪屏页的适老化设计大按钮设计height: 48确保点击区域足够大高对比度橙色背景 白色文字符合 WCAG 对比度标准简洁布局4 个核心元素信息层级清晰大字体最小字号 16fp确保可读性十、从闪屏到首页的平滑过渡10.1 数据加载时机onClick(() { // 点击后立即跳转 router.pushUrl({ url: pages/Index }) // 首页数据在 Index 的 aboutToAppear 中加载 })10.2 Index 页面的初始化// 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-accessArkUI 动画开发https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-animation应用配置文件详解https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/module-configuration-file