uniapp splash页面如何自定义设置

在uniapp中如何自定义splash页面的样式和持续时间？目前官方文档说明不够详细，尝试修改manifest.json中的splashscreen配置后效果不理想。想请教具体实现方案：

  1. 如何更改背景图片或颜色？
  2. 是否可以动态控制splash页面的显示时长？
  3. 需要区分Android和iOS平台单独配置吗？
    遇到白屏时间过长或图片拉伸问题该如何解决？
2 回复

在uniapp中，自定义启动页需修改pages.json中的globalStyle，设置app-plus.splashscreen属性，如关闭自动关闭、自定义图片路径等。也可通过原生插件进一步定制。


在 UniApp 中，自定义 Splash（启动）页面主要通过以下步骤实现：

1. 修改 manifest.json 文件

在项目的 manifest.json 文件中配置启动页面：

  • 打开 manifest.json，找到 “App启动页面配置” 或 “app-plus” 下的 “splashscreen” 节点。
  • 示例配置：
    {
  "app-plus": {
    "splashscreen": {
      "autoclose": true,           // 是否自动关闭启动页
      "waiting": true,             // 是否显示等待界面
      "delay": 0,                  // 启动页延迟关闭时间（毫秒）
      "target": "自定义页面路径"    // 可选，指定跳转的页面
    }
  }
}
  • 可设置背景颜色、图片等，具体参数参考 UniApp 官方文档。

2. 自定义启动图片

  • 替换 static 目录下的启动图片（如 splash.png），确保尺寸适配不同设备。
  • 在 manifest.json 中指定图片路径：
    "splashscreen": {
  "autoclose": true,
  "target": "pages/index/index",
  "background": "#FFFFFF",        // 背景色
  "image": "static/splash.png"    // 启动图片路径
}

3. 使用自定义页面作为启动页

如果需要更复杂的启动逻辑（如动画或网络检查），可以：

  • 创建一个自定义页面（如 splash.vue），并在 pages.json 中设为首页：
    {
  "pages": [
    {
      "path": "pages/splash/splash",
      "style": {
        "navigationBarTitleText": "启动页"
      }
    },
    {
      "path": "pages/index/index",
      "style": {}
    }
  ]
}
  • 在 splash.vue 中编写逻辑，例如延时跳转：
    <template>
  <view class="splash">
    <!-- 自定义内容 -->
  </view>
</template>

<script>
export default {
  onLoad() {
    setTimeout(() => {
      uni.reLaunch({ url: '/pages/index/index' });
    }, 2000); // 延迟2秒跳转
  }
}
</script>

4. 注意事项

  • 平台差异：Android 和 iOS 对启动页的配置可能不同，需分别测试。
  • 性能优化：避免启动页加载过久，影响用户体验。

通过以上步骤，即可灵活自定义 UniApp 的 Splash 页面。

回到顶部