纯血鸿蒙Next App冷启动如何显示欢迎页面

在纯血鸿蒙Next开发中，App冷启动时如何正确显示欢迎页面？目前按照官方文档配置了splashscreen能力，但实际启动时会先出现短暂白屏才进入欢迎页。请问是否需要额外设置窗口背景或延迟加载逻辑？具体应该如何优化实现秒开的欢迎页效果？

2 回复

鸿蒙Next冷启动欢迎页？简单！在entry/src/main/resources/base/media放张图，config.json里配个splashScreen，系统自动帮你秀出来。记住：别在欢迎页写复杂逻辑，不然用户以为卡了直接卸载！

更多关于纯血鸿蒙Next App冷启动如何显示欢迎页面的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在纯血鸿蒙Next（HarmonyOS NEXT）中，App冷启动时显示欢迎页面（Splash Screen）的推荐做法是使用启动页（Splash Screen） 特性。以下是具体实现步骤：

1. 配置Splash Screen

在 module.json5 文件中，为Entry Ability配置 splashScreen 属性：

{
  "module": {
    "abilities": [
      {
        "name": "EntryAbility",
        "srcEntry": "./ets/entryability/EntryAbility.ts",
        "description": "$string:EntryAbility_desc",
        "icon": "$media:icon",
        "label": "$string:EntryAbility_label",
        "startWindowIcon": "$media:splash_icon",  // 启动图标
        "startWindowBackground": "$color:splash_bg", // 启动背景色
        "splashScreen": {
          "landscape": "$media:splash_landscape", // 横屏图片
          "portrait": "$media:splash_portrait",   // 竖屏图片
          "contentDisplayMode": "center"          // 内容显示模式
        }
      }
    ]
  }
}

2. 添加资源文件

在 resources/base/media/ 中添加启动图片：

  • splash_icon.png（图标）
  • splash_portrait.png（竖屏图片）
  • splash_landscape.png（横屏图片）

在 resources/base/element/color.json 中定义背景色：

{
  "color": [
    {
      "name": "splash_bg",
      "value": "#FFFFFF"
    }
  ]
}

3. 自定义启动逻辑（可选）

若需更复杂的欢迎页（如延时、动画），可在Ability的 onWindowStageCreate 中处理：

// EntryAbility.ts
import UIAbility from '@ohos.app.ability.UIAbility';
import window from '@ohos.window';

export default class EntryAbility extends UIAbility {
  onWindowStageCreate(windowStage: window.WindowStage) {
    // 设置启动页显示时长（例如2秒）
    setTimeout(() => {
      // 加载主页面
      windowStage.loadContent('pages/Index', (err) => {
        if (err.code) {
          console.error('Failed to load the content. Cause:' + JSON.stringify(err));
        }
      });
    }, 2000);
  }
}

关键点说明：

  • 系统默认行为：配置 splashScreen 后，冷启动会自动显示启动页，直到首个页面加载完成。
  • 图片适配：建议提供多分辨率图片，确保不同设备显示效果。
  • 性能优化：避免在启动页执行耗时操作，以免影响启动速度。

通过以上配置，即可实现冷启动时的欢迎页面显示。

回到顶部