Cordova iOS 项目中 SplashScreen 加载问题的分析与解决

问题背景

在 Cordova iOS 7.0.1 及以上版本中，许多开发者遇到了 SplashScreen 加载异常的问题。主要表现为以下几种情况：

1. 启动时 SplashScreen 完全不显示，出现黑屏或白屏
2. 启动时先显示系统默认启动图，然后才显示 Cordova 的 SplashScreen
3. SplashScreen 显示位置偏移或大小不正确
4. 应用启动时直接崩溃，报错找不到 CDVLaunchScreen.storyboard

问题原因分析

经过开发者社区的深入探讨和问题排查，发现这些问题主要由以下几个因素导致：

1. 图片尺寸过大：iOS 14+ 设备对启动图片大小有限制，超过 2400x2400px 或 100KB 的图片会导致显示异常
2. 资源文件配置错误：Cordova iOS 7.x 版本对 SplashScreen 的配置方式有所改变
3. 插件兼容性问题：特别是 cordova-plugin-googlemaps 插件会影响 SplashScreen 的正常显示
4. Storyboard 引用错误：Xcode 项目中 Launch Screen File 配置不正确

解决方案

1. 正确配置 SplashScreen 图片

在 config.xml 中，应该使用以下格式配置 iOS 平台的 SplashScreen：

<platform name="ios">
    <splash src="resources/ios/splash/Default@2x~universal~anyany.png" />
    <splash src="resources/ios/splash/Default@3x~universal~anyany.png" />
</platform>

关键点：

• 不需要指定 width 和 height 属性
• 推荐使用 2208x2208 (@3x) 和 2732x2732 (@2x) 两种尺寸
• 图片文件应放在项目的 resources/ios/splash 目录下

2. 解决 cordova-plugin-googlemaps 插件冲突

如果项目中使用了 cordova-plugin-googlemaps 插件，可以采取以下措施：

1. 更新到最新版本的插件（已包含修复）
2. 或者手动修改插件代码，移除对 SplashScreen 的干扰

3. Xcode 项目配置调整

在 Xcode 中需要检查以下配置：

1. 确保 General 标签页中的 Launch Screen File 设置为 "CDVLaunchScreen"（不带 .storyboard 后缀）
2. 确认 CDVLaunchScreen.storyboard 文件已正确包含在项目中

4. 使用兼容性更好的 Cordova iOS 版本

如果问题仍然存在，可以考虑使用经过社区验证的兼容版本：

cordova platform add --link https://github.com/jessyefuster/cordova-ios/tree/7.1.1

最佳实践建议

1. 图片优化：确保 SplashScreen 图片大小不超过推荐尺寸，并优化文件大小
2. 逐步测试：每次修改后，清理项目并重新构建（cordova clean 和 cordova prepare）
3. 版本控制：保持 Cordova 和相关插件为最新稳定版本
4. 多设备测试：在不同型号和 iOS 版本的设备上测试 SplashScreen 显示效果

总结

Cordova iOS 项目中的 SplashScreen 问题通常不是单一原因导致，而是配置、兼容性和资源文件等多方面因素共同作用的结果。通过系统性地检查图片配置、插件兼容性和项目设置，大多数问题都可以得到有效解决。开发者应当特别注意 Cordova iOS 7.x 版本的变化，并遵循社区验证过的最佳实践来确保 SplashScreen 的正常显示。