HarmonyOS开发者社区

在鸿蒙（HarmonyOS）应用中自定义 Splash 启动页，可以通过以下两种核心方法实现：

方法一：通过主题（Theme）配置静态 Splash（推荐）

适合简单静态图片展示，无需额外代码，系统自动处理。

步骤：

1. 准备 Splash 图片
   将图片（如 splash_background.png）放入 resources > base > media 目录。

2. 定义主题文件
   在 resources > base > element 目录下创建 theme.json（若不存在）：

   json

   {
     "name": "splashTheme",
     "window": {
       "designWidth": 720,
       "autoDesignWidth": false,
       "windowBackground": "$media:splash_background" // 引用图片资源
     }
   }

3. 在 config.json 中应用主题
   修改入口 Ability 的配置：

   json

   {
     "module": {
       "abilities": [
         {
           "name": "EntryAbility",
           "srcEntrance": "./ets/EntryAbility.ts",
           "theme": "splashTheme", // 应用自定义主题
           // ...其他配置
         }
       ]
     }
   }

4. 调整启动图标（可选）
   在 theme.json 中添加：

   json

   "window": {
     "icon": "$media:app_icon", // 启动图标
     "iconText": "App Name"     // 图标下方文字（可选）
   }

方法二：创建自定义 Splash Ability（动态 Splash）

适合需要动画、延时或复杂逻辑的场景。

步骤：

1. 新增 Splash Ability
   在 ets 目录下创建 SplashAbility 和对应页面：

   text

   ets/
   ├── SplashAbility
   │   ├── SplashAbility.ts
   │   └── pages
   │       └── SplashPage.ets

2. 配置 config.json
   将 SplashAbility 设为入口：

   json

   {
     "abilities": [
       {
         "name": "SplashAbility",
         "srcEntrance": "./ets/SplashAbility/SplashAbility.ts",
         "isLauncherAbility": true, // 设为启动入口
         "metaData": {
           "customizeData": [
             {
               "name": "hwc-theme",
               "value": "androidhwext:style/Theme.Emui.NoTitleBar" // 隐藏标题栏
             }
           ]
         }
       },
       {
         "name": "MainAbility", // 主能力
         "srcEntrance": "./ets/MainAbility/MainAbility.ts"
       }
     ]
   }

3. 实现 SplashPage.ets
   自定义启动页 UI（可加入动画）：

   typescript

   // SplashPage.ets
   @Entry
   @Component
   struct SplashPage {
     build() {
       Column() {
         Image($r("app.media.splash_background")) // 全屏背景图
           .width('100%')
           .height('100%')
       }
     }
   }

4. 跳转到主页面
   在 SplashAbility.ts 中延时跳转：

   typescript

   // SplashAbility.ts
   import Ability from '@ohos.app.ability.UIAbility';
   import { BusinessError } from '@ohos.base';
   
   export default class SplashAbility extends Ability {
     onWindowStageCreate(windowStage: any) {
       windowStage.loadContent('pages/SplashPage', (err: BusinessError) => {
         if (err) console.error('加载Splash页面失败');
       });
   
       // 2秒后跳转到主Ability
       setTimeout(() => {
         let want = {
           bundleName: 'com.example.app',
           abilityName: 'MainAbility'
         };
         this.context.startAbility(want)
           .then(() => this.context.terminateSelf()) // 关闭SplashAbility
           .catch((err: BusinessError) => console.error('跳转失败: ' + err));
       }, 2000);
     }
   }

关键注意事项

1. 图片尺寸适配
   Splash 图片需提供不同分辨率的版本（如 base/hdpi/xhdpi），确保全屏显示无拉伸。

2. 启动性能优化

   • 静态 Splash：图片不宜过大（推荐压缩至 200KB 内）。

   • 动态 Splash：避免在 onCreate 执行耗时操作，确保快速跳转。

3. 隐藏默认标题栏
   在 theme.json 或 Ability 的 metaData 中设置无标题栏样式。

4. 测试真机效果
   部分模拟器可能不显示自定义 Splash，需在真机验证。

总结

• 简单场景：使用主题配置静态图片（高效便捷）。

• 复杂需求：通过 SplashAbility 实现动态效果（灵活控制）。
  根据实际需求选择方案，并注意资源优化与真机适配。