HarmonyOS 鸿蒙Next如何配置App启动图

发布于 1周前 作者 eggper 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next如何配置App启动图

【关键字】

启动图 / icon / 自定义

【问题描述】

App启动时默认显示的是白底中间icon的画面，是否有办法配置启动图？

【解决方案】

可以按照如下步骤实现：

  1. 创建一个空项目。

  2. 新建Splash.ets，用于显示启动图，2秒后跳转到首页。

    关键代码如下：

    import router from ‘@ohos.router’

@Entry
@Component
struct Splash {


aboutToAppear() {
setTimeout(()=> {
router.replaceUrl({ url: ‘pages/Index’});
}, 2000)
}


build() {
Stack() {
// 背景
Image($r(‘app.media.bg_splash’))
.width(‘100%’)
.height(‘100%’)
.objectFit(ImageFit.Cover)
.hoverEffect(HoverEffect.None)
}
}
}

  3. EntryAbility.ets中把 windowStage.loadContent(‘pages/Index’ 修改为 windowStage.loadContent(‘pages/Splash’。

    说明：主窗口默认会有颜色，所以设置startWindowBackground为透明是达不到效果的。图片的话，可以尝试将starticon设置为透明的空图片。目前规格就是这样，这些配置不可缺失，只可修改。

Harmonyos Next教程
3 回复

在HarmonyOS鸿蒙Next中配置App启动图，可以通过以下方式实现：

  1. 设置startWindowIcon和startWindowBackground：

    • 在项目的resources目录中放置启动图标（startWindowIcon）和背景图（startWindowBackground）。
    • 确保在config.json或相关配置文件中正确引用了这些资源。

  2. 自定义启动页面：

    • 创建一个新的页面（如Splash页面）作为启动页。
    • 在该页面中，可以使用Image组件来显示启动图，并可以实现更复杂的UI设计和交互逻辑。
    • 通过路由或页面跳转机制，在启动页显示一段时间后跳转到应用的首页或其他页面。

  3. 资源适配：

    • 为了确保启动图在不同设备和屏幕尺寸上能够正确显示，可以创建不同的资源目录（如tablet、phone等），并放置对应尺寸的启动图标和背景图。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。

可以按照如下步骤： 1、创建一个空项目 2、新建 Splash.ets，用于显示启动图，2秒后跳转到首页

import router from '[@ohos](/user/ohos).router'

[@Entry](/user/Entry)
[@Component](/user/Component)
struct Splash {

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

build() {
Stack() {
// 背景
Image($r('app.media.bg_splash'))
.width('100%')
.height('100%')
.objectFit(ImageFit.Cover)
.hoverEffect(HoverEffect.None)
}
}
}

3、EntryAbility.ets 中

windowStage.loadContent(‘pages/Index’ 修改为 windowStage.loadContent(‘pages/Splash’）

主窗口默认会有颜色，所以设置startWindowBackground为透明是达不到效果的（主窗口创建页面的过程，目前没法透明）；图片的话，可以尝试将starticon设置为透明的空图片。目前规格就是这样，这些配置不可缺失，只可修改

还要修改main_pages.json文件，把文件加入路由里。

{
  "src": [
    "pages/Splash",
    "pages/MainPage"
  ]
}

HarmonyOS 鸿蒙Next 配置App启动图 也可以参考下面代码

@Component
struct MCounter {
  @State countDown: number = 5

  aboutToAppear() {
    let timer = setInterval(() => {
      this.countDown = this.countDown - 1
      if (this.countDown == 0) {
        router.replaceUrl({ url: "pages/fileManager" })
        clearTimeout(timer)
      }
    }, 1000)
  }


  build() {
    Column() {
      Text(this.countDown.toString())
    }
  }
}


@Entry
@Component
struct Index {
  build() {
    Column() {
      MCounter()
    }.width('100%')
    .height('100%')
    .backgroundColor(Color.Orange)
  }
}
复制
如果还想进一步取消启动时的icon，参考以下结论：主窗口默认会有颜色，所以设置startWindowBackground为透明是达不到效果的（主窗口创建页面的过程，目前没法透明）；图片的话，可以尝试将starticon设置为透明的空图片。目前规格就是这样，这些配置不可缺失，只可修改。
回到顶部