cordova-plugin-splashscreen 4.0.0

cordova-plugin-splashscreen 4.0.0

×

测试测试✗
Lang语言 Obj-CObjective C
许可证 Apache 2
发布最后发布2016年11月

由 Holly Schinsky，Shazron Abdullah 维护。

cordova-plugin-splashscreen 4.0.0

  • 由
  • Adobe PhoneGap 团队

标题：Splashscreen

描述：控制您应用的启动画面。

Android iOS Windows 8.1 商店 Windows 8.1 电话 Windows 10 商店 Travis CI
Build Status Build Status Build Status Build Status Build Status

cordova-plugin-splashscreen

此插件用于与启动画面一起工作。该插件在应用程序启动时显示和隐藏启动画面。

在此插件的 Apache Cordova 问题跟踪器 中报告问题。

安装

// 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

支持的平台

  • Amazon Fire OS
  • Android
  • BlackBerry 10
  • iOS
  • Windows Phone 7 和 8
  • Windows（需要 cordova-windows 版本 >= 4.4.0）
  • 浏览器

注意：在 Windows（与 Android 和 iOS 相比）上扩展启动画面不需要该插件，如果您不使用插件 API 的情况下，即程序性质的显示/隐藏。

示例配置

在顶级 config.xml 文件中（不是在 platforms 中的那个文件），添加像这里指定那样的配置元素。

请注意，“src”属性的值相对于项目根目录，而不是相对于 www 目录（请参阅下面的“目录结构”）。您可以命名源图像任何您喜欢的名字。应用内的内部名称由 Cordova 决定。

目录结构

projectRoot
    hooks
    platforms
    plugins
    www
        css
        img
        js
    res
        screen
            android
            ios
            windows

<platform name="android">
    <!-- you can use any density that exists in the Android project -->
    <splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>
    <splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/>
    <splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/>
    <splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>

    <splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/>
    <splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi"/>
    <splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi"/>
    <splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi"/>
</platform>

<platform name="ios">
    <!-- images are determined by width and height. The following are supported -->
    <splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/>
    <splash src="res/screen/ios/Default@2x~iphone.png" width="640" height="960"/>
    <splash src="res/screen/ios/Default-Portrait~ipad.png" width="768" height="1024"/>
    <splash src="res/screen/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
    <splash src="res/screen/ios/Default-Landscape~ipad.png" width="1024" height="768"/>
    <splash src="res/screen/ios/Default-Landscape@2x~ipad.png" width="2048" height="1536"/>
    <splash src="res/screen/ios/Default-568h@2x~iphone.png" width="640" height="1136"/>
    <splash src="res/screen/ios/Default-667h.png" width="750" height="1334"/>
    <splash src="res/screen/ios/Default-736h.png" width="1242" height="2208"/>
    <splash src="res/screen/ios/Default-Landscape-736h.png" width="2208" height="1242"/>
</platform>

<platform name="windows">
    <!-- images are determined by width and height. The following are supported -->
    <splash src="res/screen/windows/splashscreen.png" width="620" height="300"/>
    <splash src="res/screen/windows/splashscreenphone.png" width="1152" height="1920"/>
</platform>

<platform name="blackberry10">
    <!-- Add a rim:splash element for each resolution and locale you wish -->
    <!-- http://developer.blackberry.com/html5/documentation/rim_splash_element.html -->
    <rim:splash src="res/screen/blackberry/splashscreen.png"/>
</platform>

<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"/>

苹果iOS特性：要在ios平台上禁用启动屏幕，也应将<preference name="FadeSplashScreenDuration" value="0"/>添加到config.xml。

  • 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);
  • ShowSplashScreenSpinner（布尔值，默认为true）：将值设为false以隐藏启动屏幕上的旋转图标。
    <preference name="ShowSplashScreenSpinner" value="false"/>

Android特性

在您的config.xml中，您可以添加以下首选项

<preference name="SplashMaintainAspectRatio" value="true|false" />
<preference name="SplashShowOnlyFirstTime" value="true|false" />

SplashMaintainAspectRatio首选项是可选的。如果设置为true，启动屏幕的可绘制区域不会拉伸以适应屏幕，而是简单地“覆盖”屏幕，就像CSS的“background-size:cover”。当启动屏幕图像不能以任何方式变形时，此设置非常有用，例如当它们包含风景或文本时。此设置与有较大边距（安全区域）的图像一起使用最佳，这些边距可以在具有不同宽高比的屏幕上安全裁剪。

插件在方向改变时重新加载启动屏幕的可绘制区域，因此您可以指定纵向和横向方向的不同的可绘制区域。

SplashShowOnlyFirstTime首选项也是可选的，默认为true。当设置为true时，启动屏幕仅在应用启动时出现。但是，如果您计划使用navigator.app.exitApp()关闭应用并强制下次启动时启动屏幕出现，应将此属性设置为false（这也适用于使用后退按钮关闭应用）。

浏览器特性

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

<platform name="browser">
    <preference name="SplashScreen" value="/images/browser/splashscreen.jpg" /> <!-- defaults to "/img/logo.png" -->
    <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值仅在浏览器平台上使用。在其他平台，此值将被忽略。

苹果iOS特性

  • 在iOS中，启动屏幕图像被称为启动图像。这些图像在iOS上是必需的。

Windows特性

  • SplashScreenSpinnerColor（字符串，默认为系统强调色）：hash，rgb表示法或CSS颜色名称。
<preference name="SplashScreenSpinnerColor" value="#242424"/>
<preference name="SplashScreenSpinnerColor" value="DarkRed"/>
<preference name="SplashScreenSpinnerColor" value="rgb(50,128,128)"/>
  • SplashScreenBackgroundColor（字符串，默认为 #464646）：十六进制符号。
<preference name="SplashScreenBackgroundColor" value="0xFFFFFFFF"/>

方法

  • splashscreen.show
  • splashscreen.hide

splashscreen.hide

关闭启动画面。

navigator.splashscreen.hide();

BlackBerry 10, WP8, iOS 特别处理

在 config.xml 文件的 AutoHideSplashScreen 设置必须是 false。要在 deviceready 事件处理器中延迟关闭启动画面两秒，可以添加以下定时器：

setTimeout(function() {
    navigator.splashscreen.hide();
}, 2000);

splashscreen.show

显示启动画面。

navigator.splashscreen.show();

您的应用在应用启动并触发 deviceready 事件之前不能调用 navigator.splashscreen.show()。但是，由于启动画面通常应该在应用启动之前可见，这似乎与启动画面的目的相违背。通过在 config.xml 中提供一些配置，可以在您的应用启动后立即自动显示启动画面，在它完全启动并收到 deviceready 事件之前。因此，您可能不需要调用 navigator.splashscreen.show() 来使启动画面在应用启动时可见。