uniapp splash screen如何设置或自定义

在uniapp中如何设置或自定义splash screen？我发现在不同平台上配置方式可能不太一样，能否详细说明Android和iOS平台的配置步骤？另外，是否支持动态修改启动图，比如根据不同节日更换不同的启动画面？如果使用原生开发的方式自定义启动页，需要注意哪些问题？

2 回复

在manifest.json中配置splashscreen选项，设置自动关闭时间、背景图等。也可使用plus.navigator.closeSplashscreen()手动关闭启动页。


在 UniApp 中，启动图（Splash Screen）的设置主要通过 manifest.json 配置文件进行，以下是具体步骤和自定义方法：

1. 基础设置（manifest.json）

在项目根目录的 manifest.json 文件中配置启动图：

{
  "app-plus": {
    "splashscreen": {
      "autoclose": true,           // 是否自动关闭启动页
      "delay": 0,                  // 启动图延迟关闭时间（毫秒）
      "waiting": true,             // 是否显示等待雪花
      "target": "id"               // 跳转页面（默认首页）
    }
  }
}

2. 平台差异化配置

  • Android：
    替换 nativeResources 目录下的 Android 启动图（需按分辨率提供多套图片）。
  • iOS：
    通过 Xcode 编辑 LaunchScreen.storyboard 或替换启动图片（需原生配置）。

3. 自定义启动逻辑（高级）

如需动态控制启动页，可在 App.vue 的 onLaunch 中编写逻辑：

export default {
  onLaunch() {
    // 示例：3秒后手动关闭启动页
    setTimeout(() => {
      plus.navigator.closeSplashscreen();
    }, 3000);
  }
}

4. 注意事项

  • 图片规范：
    Android 需提供 hdpi/xhdpi/xxhdpi 等多分辨率图片，iOS 需适配不同设备尺寸。
  • H5 平台：启动图仅原生 App（Android/iOS）有效，H5 无法使用。
  • 调试技巧：真机调试时修改生效，部分配置需重新打包 App。

通过以上配置即可完成启动图的基础设置与自定义。如需深度定制（如动态背景、广告页），需结合原生开发或插件实现。

回到顶部