Javascript 启动应用程序时的启动屏幕

Javascript 启动应用程序时的启动屏幕,javascript,android,cordova,mobile,splash-screen,Javascript,Android,Cordova,Mobile,Splash Screen,我目前正在使用apache cordova创建一个应用程序。当我的应用程序启动时,我需要启动屏幕来显示。我试着从互联网上搜索信息,但没有找到好结果。。我想补充一点,我使用JS、HTML和CSS(+XML) 目前,;我已经安装了extension-SplashScreen,我在config.xml中的代码如下所示 <?xml version="1.0" encoding="utf-8"?> <widget xmlns:cdv="http://cordova.apache.org/

我目前正在使用apache cordova创建一个应用程序。当我的应用程序启动时,我需要启动屏幕来显示。我试着从互联网上搜索信息,但没有找到好结果。。我想补充一点,我使用JS、HTML和CSS(+XML)

目前,;我已经安装了extension-SplashScreen,我在config.xml中的代码如下所示

<?xml version="1.0" encoding="utf-8"?>
<widget xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:vs="http://schemas.microsoft.com/appx/2014/htmlapps" id="io.cordova.myapp741b74" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" defaultlocale="en-US">
  <name>MobiiliLukkari</name>
  <description>A blank project that uses Apache Cordova to help you build an app that targets multiple mobile platforms: Android, iOS, Windows, and Windows Phone.</description>
  <author href="http://cordova.io" email="dev@cordova.apache.org">Apache Cordova Team </author>
  <content src="index.html" />
  <access origin="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <vs:features />

  <preference name="SplashScreen"         value="screen"/>
  <preference name="SplashScreenDelay"    value="5000" />
  <feature name="SplashScreen">
    <param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen" />
    <param name="onload" value="true" />
  </feature>

  <preference name="windows-target-version" value="8.1" />
  <!-- Support for Cordova 5.0.0 plugin system -->
  <plugin name="cordova-plugin-whitelist" version="1" />
  <allow-intent href="http://*/*" />
  <allow-intent href="https://*/*" />
  <allow-intent href="tel:*" />
  <allow-intent href="sms:*" />
  <allow-intent href="mailto:*" />
  <allow-intent href="geo:*" />
  <platform name="android">
    <allow-intent href="market:*" />
  </platform>
  <platform name="ios">
    <allow-intent href="itms:*" />
    <allow-intent href="itms-apps:*" />
  </platform>



  <platform name="android">


    <icon src="res/icons/android/icon-36-ldpi.png" density="ldpi" />
    <icon src="res/icons/android/icon-48-mdpi.png" density="mdpi" />
    <icon src="res/icons/android/icon-72-hdpi.png" density="hdpi" />
    <icon src="res/icons/android/icon-96-xhdpi.png" density="xhdpi" />


  </platform>
  <platform name="ios">
    <!-- iOS 8.0+ -->
    <!-- iPhone 6 Plus  -->
    <icon src="res/icons/ios/icon-60-3x.png" width="180" height="180" />
    <!-- iOS 7.0+ -->
    <!-- iPhone / iPod Touch  -->
    <icon src="res/icons/ios/icon-60.png" width="60" height="60" />
    <icon src="res/icons/ios/icon-60-2x.png" width="120" height="120" />
    <!-- iPad -->
    <icon src="res/icons/ios/icon-76.png" width="76" height="76" />
    <icon src="res/icons/ios/icon-76-2x.png" width="152" height="152" />
    <!-- iOS 6.1 -->
    <!-- Spotlight Icon -->
    <icon src="res/icons/ios/icon-40.png" width="40" height="40" />
    <icon src="res/icons/ios/icon-40-2x.png" width="80" height="80" />
    <!-- iPhone / iPod Touch -->
    <icon src="res/icons/ios/icon-57.png" width="57" height="57" />
    <icon src="res/icons/ios/icon-57-2x.png" width="114" height="114" />
    <!-- iPad -->
    <icon src="res/icons/ios/icon-72.png" width="72" height="72" />
    <icon src="res/icons/ios/icon-72-2x.png" width="144" height="144" />
    <!-- iPhone Spotlight and Settings Icon -->
    <icon src="res/icons/ios/icon-small.png" width="29" height="29" />
    <icon src="res/icons/ios/icon-small-2x.png" width="58" height="58" />
    <!-- iPad Spotlight and Settings Icon -->
    <icon src="res/icons/ios/icon-50.png" width="50" height="50" />
    <icon src="res/icons/ios/icon-50-2x.png" width="100" height="100" />
  </platform>
  <platform name="windows">
    <icon src="res/icons/windows/Square150x150Logo.scale-100.png" width="150" height="150" />
    <icon src="res/icons/windows/Square150x150Logo.scale-240.png" width="360" height="360" />
    <icon src="res/icons/windows/Square30x30Logo.scale-100.png" width="30" height="30" />
    <icon src="res/icons/windows/Square310x310Logo.scale-100.png" width="310" height="310" />
    <icon src="res/icons/windows/Square44x44Logo.scale-100.png" width="44" height="44" />
    <icon src="res/icons/windows/Square44x44Logo.scale-240.png" width="106" height="106" />
    <icon src="res/icons/windows/Square70x70Logo.scale-100.png" width="70" height="70" />
    <icon src="res/icons/windows/Square71x71Logo.scale-100.png" width="71" height="71" />
    <icon src="res/icons/windows/Square71x71Logo.scale-240.png" width="170" height="170" />
    <icon src="res/icons/windows/StoreLogo.scale-100.png" width="50" height="50" />
    <icon src="res/icons/windows/StoreLogo.scale-240.png" width="120" height="120" />
    <icon src="res/icons/windows/Wide310x150Logo.scale-100.png" width="310" height="150" />
    <icon src="res/icons/windows/Wide310x150Logo.scale-240.png" width="744" height="360" />
  </platform>
  <platform name="wp8">
    <icon src="res/icons/wp8/ApplicationIcon.png" width="99" height="99" />
    <icon src="res/icons/wp8/Background.png" width="159" height="159" />
  </platform>
  <platform name="android">
    <splash src="res/screens/android/screen-hdpi-landscape.png" density="land-hdpi" />
    <splash src="res/screens/android/screen-ldpi-landscape.png" density="land-ldpi" />
    <splash src="res/screens/android/screen-mdpi-landscape.png" density="land-mdpi" />
    <splash src="res/screens/android/screen-xhdpi-landscape.png" density="land-xhdpi" />
    <splash src="res/screens/android/screen-hdpi-portrait.png" density="port-hdpi" />
    <splash src="res/screens/android/screen-ldpi-portrait.png" density="port-ldpi" />
    <splash src="res/screens/android/screen-mdpi-portrait.png" density="port-mdpi" />
    <splash src="res/screens/android/screen-xhdpi-portrait.png" density="port-xhdpi" />
  </platform>
  <platform name="ios">
    <splash src="res/screens/ios/screen-iphone-portrait.png" width="320" height="480" />
    <splash src="res/screens/ios/screen-iphone-portrait-2x.png" width="640" height="960" />
    <splash src="res/screens/ios/screen-ipad-portrait.png" width="768" height="1024" />
    <splash src="res/screens/ios/screen-ipad-portrait-2x.png" width="1536" height="2048" />
    <splash src="res/screens/ios/screen-ipad-landscape.png" width="1024" height="768" />
    <splash src="res/screens/ios/screen-ipad-landscape-2x.png" width="2048" height="1536" />
    <splash src="res/screens/ios/screen-iphone-568h-2x.png" width="640" height="1136" />
    <splash src="res/screens/ios/screen-iphone-portrait-667h.png" width="750" height="1334" />
    <splash src="res/screens/ios/screen-iphone-portrait-736h.png" width="1242" height="2208" />
    <splash src="res/screens/ios/screen-iphone-landscape-736h.png" width="2208" height="1242" />
  </platform>
  <platform name="windows">
    <splash src="res/screens/windows/SplashScreen.scale-100.png" width="620" height="300" />
    <splash src="res/screens/windows/SplashScreen.scale-240.png" width="1152" height="1920" />
    <splash src="res/screens/windows/SplashScreenPhone.scale-240.png" width="1152" height="1920" />
  </platform>
  <platform name="wp8">
    <splash src="res/screens/wp8/SplashScreenImage.png" width="768" height="1280" />
  </platform>
  <access origin="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" />
  <access origin="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
  <access origin="http://code.jquery.com/jquery-1.11..min.js" />
  <access origin="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js" />
  <access origin="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
  <access origin="https://ajax.microsoft.com/ajax/jQuery/jquery-3.1.1.min.js" />
  <access origin="http://code.jquery.com/jquery-1.4.5.min.js" />
  <access origin="http://code.jquery.com/jquery-migrate-1.2.1.min.js" />
  <access origin="http://code.jquery.com/ui/1.11.4/jquery-ui.js" />
  <access origin="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" />
  <access origin="https://mail.epedu.fi/owa/auth/logon.aspx?replaceCurrent=1&amp;url=https%3a%2f%2fmail.epedu.fi%2fowa%2f" />
  <access origin="https://wille.epedu.fi/" />
  <preference name="Orientation" value="portrait" />
  <preference name="Fullscreen" value="True" />
  <plugin name="cordova-plugin-splashscreen" version="3.1.0" />
</widget>

MobiiliLukkari
一个空白项目,使用Apache Cordova帮助您构建一个针对多个移动平台的应用程序:Android、iOS、Windows和Windows Phone。
阿帕奇科尔多瓦团队

那么,我应该如何解决这个问题呢?在应用程序启动后,如何让启动屏幕显示几秒钟。

在我的工作项目中,只需检查我的ios和Android设置。 我读过一个项目,当我的应用程序还没有完成加载时,它帮助阻止启动屏幕消失,下面的设置允许启动屏幕保持打开,直到设备准备就绪,然后清除它。效果很好

<platform name="android">
    <allow-intent href="market:*" />
    <preference name="SplashScreen" value="screen" />
    <preference name="SplashScreenDelay" value="10000" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <preference name="FadeSplashScreen" value="false" />
    <preference name="AutoHideSplashScreen" value="false" />
    <preference name="ShowSplashScreenSpinner" value="true" />
    <!-- 10000 to keep open whilst heating page is loaded into DOM -->
    <preference name="SplashMaintainAspectRatio" value="true" />
  </platform>
  <platform name="ios">
    <preference name="FadeSplashScreen" value="false" />
    <preference name="SplashScreen" value="screen" />
    <preference name="AutoHideSplashScreen" value="false" />
  </platform>

有很多混合文档,但我可以确认上面的设置对我的项目有效。

非常有效。非常感谢。
    setTimeout(function () {
        navigator.splashscreen.hide();
    }, 50);