HarmonyOS开发实战：小分享-SplashPage启动页设计与2秒延时跳转

前言

启动页（Splash Page）是用户首次打开应用看到的第一个页面，常用于品牌展示、初始化资源、版本检查等场景。本篇以小分享 App 的SplashPage为例，讲解启动页的设计要点、延时跳转实现与@Builder装饰器的应用。详细 API 可参考 HarmonyOS ArkUI 官方文档。

一、SplashPage 完整代码

1.1 SplashPage.ets 全文

小分享 App 的pages/SplashPage.ets如下：

import router from '@ohos.router'; @Entry @Component struct SplashPage { @State showSplash: boolean = true; aboutToAppear(): void { setTimeout(() => { router.replaceUrl({ url: 'pages/HomePage' }); }, 2000); } build() { Column() { Column({ space: 24 }) { // App icon Column() { Text('') .fontSize(60) } .width(100) .height(100) .backgroundColor('#F5A623') .borderRadius(24) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) Text('小分享') .fontSize(32) .fontWeight(FontWeight.Bold) .fontColor('#1A1A1A') Text('分享美好，连接世界') .fontSize(16) .fontColor('#F5A623') Text('一款强大而美观的分享工具') .fontSize(13) .fontColor('#999999') } .alignItems(HorizontalAlign.Center) .layoutWeight(1) .justifyContent(FlexAlign.Center) // Feature list Column({ space: 16 }) { this.FeatureItem('📝', '多种内容分享', '支持文字、图片、链接等多种内容') this.FeatureItem('🎨', '精美排版设计', '线装本排版，图文混排，支持模板') this.FeatureItem('⭐', '我的收藏管理', '一键收藏，随时查看和管理') this.FeatureItem('📋', '丰富模板库', '多种精美模板，一键套用') this.FeatureItem('📤', '一键分享', '支持多平台分享，触达更多人') } .width('100%') .padding({ left: 32, right: 32, bottom: 40 }) // Bottom button Button('小分享') .fontSize(16) .fontColor(Color.White) .backgroundColor('#F5A623') .width('60%') .height(48) .borderRadius(24) .onClick(() => { router.replaceUrl({ url: 'pages/HomePage' }); }) .margin({ bottom: 40 }) } .width('100%') .height('100%') .backgroundColor(Color.White) } @Builder FeatureItem(icon: string, title: string, desc: string) { Row({ space: 12 }) { Text(icon) .fontSize(20) Column({ space: 2 }) { Text(title) .fontSize(14) .fontWeight(FontWeight.Medium) .fontColor('#1A1A1A') Text(desc) .fontSize(12) .fontColor('#999999') } .alignItems(HorizontalAlign.Start) .layoutWeight(1) } .width('100%') } }

二、关键实现解析

2.1 aboutToAppear 生命周期

aboutToAppear是 ArkUI 页面组件的「前置生命周期」，在build之前调用，常用于：

• 初始化状态
• 发起网络请求
• 启动定时器

小分享 App 在aboutToAppear中启动了一个 2 秒的延时跳转：

aboutToAppear(): void { setTimeout(() => { router.replaceUrl({ url: 'pages/HomePage' }); }, 2000); }

提示：setTimeout的回调会保留对组件的引用，组件销毁时务必clearTimeout，否则可能导致内存泄漏。

2.2 replaceUrl 的选择

启动页跳首页时使用replaceUrl而非pushUrl，原因是：

• replaceUrl：销毁当前页，新页入栈
• pushUrl：当前页保留，新页入栈

启动页跳走后不应该再被返回，所以用replaceUrl销毁启动页。

2.3 布局结构

布局结构如下：

Column (主容器) ├─ Column (logo + 标语区，layoutWeight(1) 撑开) ├─ Column (功能列表) └─ Button (底部按钮)

三、@Builder 装饰器详解

3.1 @Builder 的作用

@Builder是 ArkUI 提供的 UI 复用机制，用于封装可重复使用的 UI 片段，类似于其他框架中的「渲染函数」。

3.2 定义 Builder

小分享 App 定义了FeatureItemBuilder 来封装功能列表项：

@Builder FeatureItem(icon: string, title: string, desc: string) { Row({ space: 12 }) { Text(icon) .fontSize(20) Column({ space: 2 }) { Text(title) .fontSize(14) .fontWeight(FontWeight.Medium) .fontColor('#1A1A1A') Text(desc) .fontSize(12) .fontColor('#999999') } .alignItems(HorizontalAlign.Start) .layoutWeight(1) } .width('100%') }

3.3 调用 Builder

调用 Builder 时使用this.xxx()语法：

Column({ space: 16 }) { this.FeatureItem('📝', '多种内容分享', '支持文字、图片、链接等多种内容') this.FeatureItem('🎨', '精美排版设计', '线装本排版，图文混排，支持模板') this.FeatureItem('⭐', '我的收藏管理', '一键收藏，随时查看和管理') this.FeatureItem('📋', '丰富模板库', '多种精美模板，一键套用') this.FeatureItem('📤', '一键分享', '支持多平台分享，触达更多人') }

提示：@Builder的参数支持基础类型和对象，但不支持函数。

3.4 @Builder vs @Component

@Builder与@Component的对比：

四、aboutToAppear 时序详解

4.1 完整生命周期

ArkUI 页面组件的完整生命周期如下：

aboutToAppear → build → onAppear → (显示中) → onDisappear → aboutToDisappear

4.2 各阶段职责

各阶段职责如下：

1. aboutToAppear：初始化状态、发请求、启动定时器
2. build：构建 UI 树
3. onAppear：页面已挂载，可访问 DOM 节点
4. onDisappear：页面即将消失
5. aboutToDisappear：组件即将销毁，清理资源

4.3 实战建议

实战建议如下：

• 网络请求放在aboutToAppear
• 动画启动放在onAppear
• 资源释放放在aboutToDisappear

五、SplashPage 视觉设计

5.1 视觉元素

视觉元素如下：

• App 图标：100 × 100，圆角 24，主色 #F5A623
• 应用名「小分享」：32px 粗体
• 副标题「分享美好，连接世界」：16px 主色
• 描述「一款强大而美观的分享工具」：13px 灰色

5.2 功能列表

功能列表展示了 5 个核心功能：

5.3 底部按钮

底部按钮设计如下：

Button('小分享') .fontSize(16) .fontColor(Color.White) .backgroundColor('#F5A623') .width('60%') .height(48) .borderRadius(24) .onClick(() => { router.replaceUrl({ url: 'pages/HomePage' }); }) .margin({ bottom: 40 })

• 宽度：60%
• 高度：48
• 圆角：24（胶囊形）
• 主色背景

六、延时跳转的优化

6.1 当前实现的问题

当前实现存在一个问题：用户如果不想等 2 秒，必须点底部按钮才能跳转。可以增加点击空白跳转：

build() { Column() { // ... 内容 } .width('100%') .height('100%') .backgroundColor(Color.White) .onClick(() => { router.replaceUrl({ url: 'pages/HomePage' }); }); }

6.2 增加加载进度

可以增加一个加载进度条，让用户更直观地感知跳转倒计时：

@Progress progress: number = 0; aboutToAppear(): void { const timer = setInterval(() => { this.progress += 5; if (this.progress >= 100) { clearInterval(timer); router.replaceUrl({ url: 'pages/HomePage' }); } }, 100); }

6.3 处理 setTimeout 的内存泄漏

处理setTimeout的内存泄漏：

private splashTimer: number = -1; aboutToAppear(): void { this.splashTimer = setTimeout(() => { router.replaceUrl({ url: 'pages/HomePage' }); }, 2000); } aboutToDisappear(): void { if (this.splashTimer !== -1) { clearTimeout(this.splashTimer); this.splashTimer = -1; } }

七、本篇核心知识点

7.1 SplashPage 设计要点

SplashPage 设计要点总结如下：

1. 启动页用于品牌展示与初始化
2. 使用replaceUrl跳转，避免返回启动页
3. 通过aboutToAppear启动延时跳转
4. 用@Builder封装可复用的功能列表项

7.2 @Builder 关键特性

@Builder关键特性总结如下：

1. 用于封装可复用的 UI 片段
2. 支持参数化
3. 通过this.xxx()调用
4. 适合简单 UI 复用，复杂组件用@Component

7.3 生命周期核心回调

生命周期核心回调总结如下：

• aboutToAppear：初始化状态
• build：构建 UI
• onAppear：UI 已挂载
• aboutToDisappear：清理资源

总结

本文详细讲解了 HarmonyOS SplashPage 启动页的设计与实现，结合小分享 App 的实际代码演示了aboutToAppear、replaceUrl、@Builder等核心知识点。下一篇我们将看 HomePage 首页布局——Header + Scroll + BottomTabBar 三段式架构。

附录：完整实现细节

1. 核心 API 参考

2. 完整代码示例

// 核心功能代码 // 详见正文中的完整实现

3. 常见问题排查

4. 最佳实践

1. 错误处理完善，使用 try/catch 包裹
2. 资源及时释放，避免内存泄漏
3. 异步操作使用 async/await
4. 权限配置完整，按需申请

5. 完整代码文件索引

6. 实现要点总结

核心实现要点：

1. API 的正确使用方法和参数说明
2. 完整的代码实现流程
3. 常见问题的排查方案
4. 性能优化和安全建议

7. 总结

本文详细讲解了小分享 App 中对应功能的完整实现。通过本文的学习，读者可以掌握 HarmonyOS 开发的核心 API 使用方法和最佳实践。

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