ionic7 splash-screen(启动页)实现

最新推荐文章于 2024-08-23 07:40:02 发布

古老的大月亮

最新推荐文章于 2024-08-23 07:40:02 发布

阅读量552

点赞数 3

文章标签：前端前端框架

本文链接：https://blog.csdn.net/m0_74382023/article/details/137243457

版权

前言：

关于启动页的设置我看了一下ionci文档和capacitor文档发现它们提出了两个不同的插件，这两个插件是否有必要关联也没有说，并且在实现过程中也发现了其他问题，所以这里记录一下。

正文：

ionic文档所提的插件：splash-screen插件管理splash(显示时间、全屏显示、遮挡状态栏) Splash Screen Capacitor Plugin API | Ionic Documentation

capacitor文档插件：capacitor/assets插件实现图片裁剪 Splash Screens and Icons | Capacitor Documentation

步骤：

1.首先，先按照capacitor/assets插件的文档创建对应的目录和插入对应的图片（icon图片最小1024-1024 splash图片最小为2732-2732），

2.根据splash-screen插件的文档，去设置这个启动页的相关配置(我这个配置是我的需求所要的，你可以根据ionic文档去调整这个设置)

// 在capacitor.config.ts文件中配置
import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'xxxx',
  appName: 'xx',
  webDir: 'xx',
  server: {
    hostname: 'localhost',
    iosScheme: 'capacitor',
    androidScheme: 'http',
  },
  plugins: {
    SplashScreen: {
      // splash显示时间
      launchShowDuration: 1500,
      // 是否自动隐藏
      launchAutoHide: false,
      // 是否显示加载动画
      showSpinner: false,
      // Splash Screen全屏显示
      splashFullScreen: true,
      // 是否沉浸(遮挡状态栏、导航栏)
      splashImmersive: true,
    },
  },
  ios: {
    scheme: 'xxxx'
  }
};

export default config;

// 注意别忘了，还要在capacitor.config.json文件中配置相同的内容
		"SplashScreen": {
			"launchShowDuration": 2000,
			"launchAutoHide": false,
			"showSpinner": false,
			"androidSpinnerStyle": "small",
			"iosSpinnerStyle": "small",
			"splashFullScreen": true,
			"splashImmersive": true
		}

3.执行npx capacitor-assets generate，这个命令我认为是将我们所给的图片自动裁剪成适配多种机型的图片,并且它会去同步多端生成配置。

问题：

我的测试机型是安卓11（我个人不喜欢升级系统），在我的手机上是没问题的一切正常，但是在安卓12及其以上的机型，展示的启动页就不是我们设置的图片了，而是icon。Splash screen is showing app icon instead of splash on Android 12+ · Issue #495 · ionic-team/capacitor-assets · GitHub

相关原因是安卓官方导致的：https://developer.android.com/develop/ui/views/launch/splash-screen?hl=zh-cn