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 事件之前。因此，您不太可能需要调用 navigator.splashscreen.show() 来使启动画面在应用程序启动时可见。