Cordova - 启动画面

Cordova - 启动屏幕

启动屏幕（Splash Screen）是应用程序启动时最初显示的画面。Cordova 启动屏幕插件（cordova-plugin-splashscreen）允许您在应用程序的 Web 视图初始化时显示一个启动屏幕，通常是一张图片。

步骤 1 - 安装启动屏幕插件

在项目的根目录中使用 Cordova CLI 安装插件：

your-cordova-project/ cordova plugin add cordova-plugin-splashscreen

步骤 2 - 配置启动屏幕

启动屏幕的配置主要在项目的 config.xml 文件中完成。您需要添加偏好设置，并可能需要声明平台特定的启动屏幕图片。

config.xml 中的基本偏好设置

在 config.xml 文件的主 <widget> 元素内部添加以下偏好设置：

<!-- AutoHideSplashScreen: 如果您想手动隐藏启动屏幕，请设置为 false -->
<preference name="AutoHideSplashScreen" value="true" />

<!-- SplashScreenDelay: 显示启动屏幕的持续时间（毫秒，如果 AutoHideSplashScreen 为 true） -->
<preference name="SplashScreenDelay" value="3000" />

<!-- FadeSplashScreenDuration: 隐藏启动屏幕时的淡出效果持续时间（毫秒） -->
<preference name="FadeSplashScreenDuration" value="500" />

<!-- SplashMaintainAspectRatio: 如果为 true，启动屏幕图片将不会拉伸以适应屏幕 -->
<preference name="SplashMaintainAspectRatio" value="true" />

<!-- ShowSplashScreenSpinner: (Android, iOS) 是否在启动屏幕上显示加载指示器 -->
<preference name="ShowSplashScreenSpinner" value="true" />

<!-- SplashScreenSpinnerColor: (Android) 加载指示器的颜色。可以是颜色名称或 #HEX 值 -->
<preference name="SplashScreenSpinnerColor" value="blue" />

SplashScreen 偏好设置（例如 <preference name="SplashScreen" value="screen" />）告诉 Cordova 您的启动屏幕图片文件的基本名称。例如，如果 value="screen"，Cordova 将在每个平台的各种密度特定的资源文件夹中查找类似 screen.png 的文件。

添加启动屏幕图片

您需要为不同的屏幕尺寸、分辨率和方向提供启动屏幕图片。具体的图片位置和命名约定因平台而异。

一种常见的现代方法是放置一个单一的高分辨率源启动屏幕图片（例如 res/splash.png，至少 2732x2732 像素），然后使用 cordova-res 等工具自动为 Android 和 iOS 生成所有所需的尺寸。使用 npm i -g cordova-res 全局安装它，并在项目根目录中运行 cordova-res --skip-config --copy。

或者，您可以手动创建图片并放置在平台特定的目录中（例如 platforms/android/app/src/main/res/drawable-land-xhdpi/screen.png），或者使用 <splash> 标签在 <platform> 块内的 config.xml 中显式定义它们：

<platform name="android">
    <splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>
    <splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/>
    <!-- ... 更多密度和方向 ... -->
</platform>
<platform name="ios">
    <splash src="res/screen/ios/Default-568h@2x~iphone.png" width="640" height="1136"/>
    <!-- ... 更多 iOS 尺寸 ... -->
</platform>

请确保 src 中的图片路径是相对于项目根目录的，并且图片文件确实存在。

步骤 3 - 程序化控制启动屏幕（可选）

如果您在 config.xml 中设置了 <preference name="AutoHideSplashScreen" value="false" />，您需要手动在您的 JavaScript 代码中隐藏启动屏幕，通常是在您的应用初始化完成后：

// 在您的 onDeviceReady 函数中或应用初始化后
if (navigator.splashscreen) {
    navigator.splashscreen.hide();
}

如果需要，您也可以再次显示它，尽管这种情况不常见：

if (navigator.splashscreen) {
    navigator.splashscreen.show();
}

测试启动屏幕

配置好 config.xml 并添加图片后，为目标平台重建应用：

your-cordova-project/ cordova build android
# 或
your-cordova-project/ cordova build ios

然后，在设备或模拟器上运行应用。您应该会看到启动屏幕显示，其显示时长由 SplashScreenDelay 指定（如果 AutoHideSplashScreen 为 true），或者直到您通过程序代码隐藏它。例如，如果 SplashScreenDelay 为 3000，启动屏幕将显示 3 秒，然后主应用内容才会出现。如果 SplashMaintainAspectRatio 为 true，图片将不会扭曲以填充屏幕。

最佳实践

• 保持简洁：启动屏幕应轻量且能快速显示。
• 提供所有尺寸：确保为所有必要的分辨率和方向提供启动屏幕，以避免出现黑边或缩放不当。
• 彻底测试：在各种设备和操作系统版本上进行测试。
• 考虑使用 cordova-res：这个工具能显著简化启动屏幕（和图标）资源的管理。