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 ComponentBuilder与Component的对比维度BuilderComponent复用粒度UI 片段完整组件状态管理共享外部状态独立状态调用方式this.xxx()标签调用适用场景简单 UI 复用复杂独立组件四、aboutToAppear 时序详解4.1 完整生命周期ArkUI 页面组件的完整生命周期如下aboutToAppear → build → onAppear → (显示中) → onDisappear → aboutToDisappear4.2 各阶段职责各阶段职责如下aboutToAppear初始化状态、发请求、启动定时器build构建 UI 树onAppear页面已挂载可访问 DOM 节点onDisappear页面即将消失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 设计要点总结如下启动页用于品牌展示与初始化使用replaceUrl跳转避免返回启动页通过aboutToAppear启动延时跳转用Builder封装可复用的功能列表项7.2 Builder 关键特性Builder关键特性总结如下用于封装可复用的 UI 片段支持参数化通过this.xxx()调用适合简单 UI 复用复杂组件用Component7.3 生命周期核心回调生命周期核心回调总结如下aboutToAppear初始化状态build构建 UIonAppearUI 已挂载aboutToDisappear清理资源总结本文详细讲解了 HarmonyOS SplashPage 启动页的设计与实现结合小分享 App 的实际代码演示了aboutToAppear、replaceUrl、Builder等核心知识点。下一篇我们将看 HomePage 首页布局——Header Scroll BottomTabBar 三段式架构。附录完整实现细节1. 核心 API 参考API作用说明本文涉及的核心 API功能实现参见华为官方文档2. 完整代码示例// 核心功能代码 // 详见正文中的完整实现3. 常见问题排查问题原因解决方案编译错误import 路径错误检查路径和 API 版本运行时异常参数不合法使用 try/catch 捕获性能问题主线程耗时操作使用异步 API4. 最佳实践错误处理完善使用 try/catch 包裹资源及时释放避免内存泄漏异步操作使用 async/await权限配置完整按需申请5. 完整代码文件索引文件路径说明本文涉及的代码文件见正文6. 实现要点总结核心实现要点API 的正确使用方法和参数说明完整的代码实现流程常见问题的排查方案性能优化和安全建议7. 总结本文详细讲解了小分享 App 中对应功能的完整实现。通过本文的学习读者可以掌握 HarmonyOS 开发的核心 API 使用方法和最佳实践。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力