cordova splashscreen插件

介绍

This plugin displays and hides a splash screen during application launch

这个插件显示和隐藏在应用程序启动期间的初始萤幕。

 

 

  

 

安装插件

cordova plugin add cordova-plugin-splashscreen

    

 

 

 

支持的平台

*   亚马逊火 OS

*   Android 系统

*   黑莓 10

*   iOS

*   Windows Phone 7 和 8

*   Windows 8

 

 

 

 

 

方法

*   splashscreen.hide

*   splashscreen.show

 

  

splashscreen.hide

隐藏閃屏。

    navigator.splashscreen.hide();

    

    

splashscreen.show

显示闪屏。

    navigator.splashscreen.show();

  

您的应用程式无法调用 `navigator.splashscreen.show()`，直到该应用程式已启动，且触发了`deviceready` 事件。 但是，由于通常的闪屏为了是在您的应用程式启动之前可以见到，这似乎不符合闪屏的目的。

要是通过在config.xml内设置不显示闪屏，然后再到页面启动过后，调用`navigator.splashscreen.show()`显示闪屏，但是需要在deviceready事件之后才能触发，接着又再关闭。

出于此原因，不太可能您需要调用 `navigator.splashscreen.show()`，也没有这个必要。

 

 

 

使用方式

更改默认闪屏

应用在启动时，默认带有下面这个闪屏：

 

 

如何更改这个默认配置？

（1）找到 config.xml 文件

这个文件是在cordova项目最外层的config.xml文件（不是某个平台内的）

目录结构：

cordovaProjectRoot

  ├ hooks

  ├ platforms

  ├ plugins

  ├ www

  ├ res

  └ config.xml （找到此文件）

 

（2）各个平台下的启动画面配置如下：

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

注意：

“src”属性是相对于项目的根目录而不是www目录（见下面的目录结构）。

 

（3）放入需要使用的一些启动画面的图片到项目中的res/screen/各个平台的文件夹，你可以命名任何你喜欢的名字到图像中。

目录结构：

cordovaProjectRoot

  ├ hooks

  ├ platforms

  ├ plugins

  ├ www

  │  ├ css

  │  ├ img

  │  └ js

  └ res

      └ screen

          ├ android（启动图片摆放处）

          ├ ios（启动图片摆放处）

          └ windows（启动图片摆放处）

 

（4）编译项目

corodva build android

 

注意：

如果你在config.xml文件中，配置了某个图片，但是在res/screen/某平台文件夹内，没有这个图片，则会报如下错误：

 

因此，请按需配置。

 

 

 

设置闪屏时间

通过 SplashScreenDelay （数字型，默认为3000）来设置启动页的显示时间。

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

 

 

隐藏启动画面

如果你不想显示启动画面，可以将 SplashScreenDelay设置为 0，那么程序就直接进入应用主页

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

 

 

 

隐藏spinner

默认情况下，启动页中间位置会有个loading在旋转。

如果不需要，可以通过如下配置将其隐藏。

<preference name="ShowSplashScreenSpinner" value="false"/>

手动控制启动页的隐藏

默认情况下，启动画面展示时间一到就会自动消失。有时我们需要其不要自动消失，而是在程序中进行控制。

比如等到页面初始化加载数据完毕后再将其隐藏。具体实现步骤如下：

（1）首先在配置中将自动隐藏设为 false（默认是不手动关闭的true）

<preference name="AutoHideSplashScreen" value="false" /><preference name="FadeSplashScreen" value="false"/>

（2）在需要的地方使用如下js方法隐藏启动页，需要用在deviceready事件之后

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