master.

cordova-plugin-splashscreen

此插件在您的 Web 应用程序启动时显示和隐藏启动画面。使用其方法，您还可以手动显示和隐藏启动画面。

cordova-plugin-splashscreen

安装

// npm hosted (new) id
cordova plugin add cordova-plugin-splashscreen

// you may also install directly from this repo
cordova plugin add https://github.com/apache/cordova-plugin-splashscreen.git

支持的平台

浏览器

平台启动画面图像配置

配置示例

在顶层的 config.xml 文件中（不是在 platforms 中的那个），添加此处指定的配置元素。

"src" 属性的值是相对于项目根目录的，而不是相对于 www 目录的（请参见下面的 目录结构）。您可以随意命名源图像文件。应用程序中的内部名称由 Cordova 自动确定。

目录结构

projectRoot
    hooks
    platforms
    plugins
    www
        css
        img
        js
    res
        screen

<preference name="SplashScreenDelay" value="10000" />

偏好设置

config.xml

AutoHideSplashScreen (布尔值，默认为 true)。指示是否自动隐藏启动画面。启动画面会在 SplashScreenDelay 首选项中指定的时间后隐藏。
```
  <preference name="AutoHideSplashScreen" value="true" />
```
SplashScreenDelay (数字，默认为 3000)。自动隐藏启动画面前等待的毫秒数。
```
  <preference name="SplashScreenDelay" value="3000" />
```
此值过去以秒为单位（但现在是毫秒），因此小于 30 的值将继续被视为秒。（请将此视为将在未来版本中消失的已弃用补丁。）

要禁用启动画面，请将以下首选项添加到 config.xml
```
  <preference name="SplashScreenDelay" value="0"/>
```
FadeSplashScreen (布尔值，默认为 true): 设置为 false 以防止启动画面在其显示状态更改时淡入和淡出。
```
  <preference name="FadeSplashScreen" value="false"/>
```
FadeSplashScreenDuration (浮点数，默认为 500): 指定启动画面淡入淡出效果执行的毫秒数。
```
  <preference name="FadeSplashScreenDuration" value="750"/>
```
注意: FadeSplashScreenDuration 包含在 SplashScreenDelay 中，例如，如果您在 config.xml 中定义了 <preference name="SplashScreenDelay" value="3000" /> 和 <preference name="FadeSplashScreenDuration" value="1000"/>
- 00:00 - 显示启动画面
- 00:02 - 开始淡入淡出
- 00:03 - 隐藏启动画面
通过 <preference name="FadeSplashScreen" value="false"/> 关闭淡入淡出技术上意味着淡入淡出持续时间为 0，因此在此示例中，总启动画面延迟仍为 3 秒。

注意: 这仅适用于应用程序启动 - 当您在应用程序的代码中手动显示/隐藏启动画面时，需要考虑淡入淡出超时
```
  navigator.splashscreen.show();
  window.setTimeout(function () {
      navigator.splashscreen.hide();
  }, splashDuration - fadeDuration);
```

怪癖

您可以在 config.xml 中使用以下首选项

<platform name="browser">
    <preference name="SplashScreen" value="/images/browser/splashscreen.jpg" /> <!-- defaults to "/img/logo.png" -->
    <preference name="AutoHideSplashScreen" value="true" /> <!-- defaults to "true" -->
    <preference name="SplashScreenDelay" value="3000" /> <!-- defaults to "3000" -->
    <preference name="SplashScreenBackgroundColor" value="green" /> <!-- defaults to "#464646" -->
    <preference name="ShowSplashScreen" value="false" /> <!-- defaults to "true" -->
    <preference name="SplashScreenWidth" value="600" /> <!-- defaults to "170" -->
    <preference name="SplashScreenHeight" value="300" /> <!-- defaults to "200" -->
</platform>

注意：SplashScreen 值应为绝对值，以便在子页面中工作。

方法

splashscreen.show
splashscreen.hide

splashscreen.hide

关闭启动画面。

navigator.splashscreen.hide();

splashscreen.show

显示启动画面。

navigator.splashscreen.show();

在应用程序启动且 deviceready 事件触发之前，您的应用程序无法调用 navigator.splashscreen.show()。但是，由于通常启动画面旨在在您的应用程序启动之前可见，这似乎会适得其反。在 config.xml 中提供任何参数都会在您的应用程序启动后以及完全启动并接收到 deviceready 事件之前自动 show 启动画面。因此，您不太可能需要调用 navigator.splashscreen.show() 来使启动画面在应用程序启动时可见。