web-dev-qa-db-fra.com

phonegap construit ne montrant pas splashscreen

Cette question a été posée dans le passé, mais aucune des réponses que j'ai trouvées n'a résolu le problème pour moi. 

J'essaie de créer une application phonegap très simple pour afficher un écran de démarrage et indiquer quand il est prêt. C'est juste une application de test pour savoir comment utiliser l'écran de démarrage.

  • J'utilise phonegap build via la cli phonegap.
  • phonegap version 3.5.0
  • testé sur Android uniquement

J'ai un dossier www où se trouve config.xml. Tous les splashscreens sont situés dans www/res/screen/<platform>/filename.png

mon fichier de configuration est

<?xml version='1.0' encoding='utf-8'?>
<widget id="uk.co.workshop14.splashscreen-example-app" version="0.1.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
    <name>splashscreen-example-app</name>
    <description>
        Hello World sample application that responds to the deviceready event.
    </description>
    <author email="[email protected]" href="http://phonegap.com">
        Peter
    </author>

    <preference name="permissions" value="none" />
    <preference name="phonegap-version" value="3.5.0" />
    <preference name="orientation" value="default" />
    <preference name="target-device" value="universal" />
    <preference name="fullscreen" value="true" />
    <preference name="webviewbounce" value="true" />
    <preference name="prerendered-icon" value="true" />
    <preference name="stay-in-webview" value="false" />
    <preference name="ios-statusbarstyle" value="black-opaque" />
    <preference name="detect-data-types" value="true" />
    <preference name="exit-on-suspend" value="false" />
    <preference name="show-splash-screen-spinner" value="true" />
    <preference name="auto-hide-splash-screen" value="false" />
    <preference name="SplashScreenDelay" value="10000" />
    <preference name="disable-cursor" value="false" />
    <preference name="Android-minSdkVersion" value="7" />
    <preference name="Android-installLocation" value="auto" />

    <gap:plugin name="org.Apache.cordova.device" />
    <gap:plugin name="org.Apache.cordova.splashscreen" />

    <icon src="icon.png" />
    <icon gap:platform="Android" gap:qualifier="ldpi" src="res/icon/Android/icon-36-ldpi.png" />
    <icon gap:platform="Android" gap:qualifier="mdpi" src="res/icon/Android/icon-48-mdpi.png" />
    <icon gap:platform="Android" gap:qualifier="hdpi" src="res/icon/Android/icon-72-hdpi.png" />
    <icon gap:platform="Android" gap:qualifier="xhdpi" src="res/icon/Android/icon-96-xhdpi.png" />
    <icon gap:platform="blackberry" src="res/icon/blackberry/icon-80.png" />
    <icon gap:platform="blackberry" gap:state="hover" src="res/icon/blackberry/icon-80.png" />
    <icon gap:platform="ios" height="57" src="res/icon/ios/icon-57.png" width="57" />
    <icon gap:platform="ios" height="72" src="res/icon/ios/icon-72.png" width="72" />
    <icon gap:platform="ios" height="114" src="res/icon/ios/icon-57-2x.png" width="114" />
    <icon gap:platform="ios" height="144" src="res/icon/ios/icon-72-2x.png" width="144" />
    <icon gap:platform="webos" src="res/icon/webos/icon-64.png" />
    <icon gap:platform="winphone" src="res/icon/windows-phone/icon-48.png" />
    <icon gap:platform="winphone" gap:role="background" src="res/icon/windows-phone/icon-173.png" />

    <gap:splash gap:platform="Android" gap:qualifier="port-ldpi" src="res/screen/Android/screen-ldpi-portrait.png" />
    <gap:splash gap:platform="Android" gap:qualifier="port-mdpi" src="res/screen/Android/screen-mdpi-portrait.png" />
    <gap:splash gap:platform="Android" gap:qualifier="port-hdpi" src="res/screen/Android/screen-hdpi-portrait.png" />
    <gap:splash gap:platform="Android" gap:qualifier="port-xhdpi" src="res/screen/Android/screen-xhdpi-portrait.png" />
    <gap:splash gap:platform="blackberry" src="res/screen/blackberry/screen-225.png" />
    <gap:splash gap:platform="ios" height="480" src="res/screen/ios/screen-iphone-portrait.png" width="320" />
    <gap:splash gap:platform="ios" height="960" src="res/screen/ios/screen-iphone-portrait-2x.png" width="640" />
    <gap:splash gap:platform="ios" height="1136" src="res/screen/ios/screen-iphone-portrait-568h-2x.png" width="640" />
    <gap:splash gap:platform="ios" height="1024" src="res/screen/ios/screen-ipad-portrait.png" width="768" />
    <gap:splash gap:platform="ios" height="768" src="res/screen/ios/screen-ipad-landscape.png" width="1024" />
    <gap:splash gap:platform="winphone" src="res/screen/windows-phone/screen-portrait.jpg" />

    <access Origin="*" />
</widget>
androidcordovasplash-screenphonegap-build
11
Peter Saxton

Vous n'avez pas la balise de démarrage par défaut qui est

<splash src="splash.png" />

C'est dans la documentation: http://docs.phonegap.com/phonegap-build/configuring/icons-and-splash/

Mettre à jour

Si vous utilisez la version cli-5.1.1 ou supérieure de phonegap, vous avez besoin du nouveau plug-in splashscreen de npm.

Voici le nouveau plugin sur github, où vous pouvez trouver comment l'utiliser:

https://github.com/Apache/cordova-plugin-splashscreen

22
Subjective Effect

J'ai résolu le problème en ajoutant

<preference name="SplashScreen" value="splash" />

Il s'agit d'une préférence supplémentaire par rapport à celles générées lors de l'utilisation de phonegap create. Je ne trouve pas non plus de bonne documentation à ce sujet.

De plus, je n'ai pas besoin d'un écran de démarrage par défaut, comme décrit dans certaines questions lorsque j'ajoute cette préférence 

7
Peter Saxton

Après avoir recherché et essayé beaucoup, finalement cela a fonctionné pour moi:

Ajoutez ceci à vos préférences:

<preference name="SplashScreen" value="splash" />

et ajoutez ceci avant votre première entrée src d'image splash:

<splash src="splash.png" />

Peut-être important de mentionner parce que je ne le savais pas:

Si vous utilisez le convertisseur d'appels téléphoniques en ligne avec l'hydratation activée pour votre application, vous devrez reconstruire complètement votre application au lieu de la mettre à jour. Cela vous aidera également avec des préférences comme "orientation" ou "plein écran"!

2
howard.D

Vous devez (comme dans must) mettre votre splash.png- s dans www/res/drawable-*/splash.png Et icon.png- s dans www/res/drawable-*/icon.png afin d'avoir cette structure dans le dossier www

res
├── drawable-hdpi
│   └── icon.png
├── drawable-land-hdpi
│   └── splash.png
├── drawable-land-ldpi
│   └── splash.png
├── drawable-land-mdpi
│   └── splash.png
├── drawable-land-xhdpi
│   └── splash.png
├── drawable-land-xxhdpi
│   └── splash.png
├── drawable-land-xxxhdpi
│   └── splash.png
├── drawable-ldpi
│   └── icon.png
├── drawable-mdpi
│   └── icon.png
├── drawable-port-hdpi
│   └── splash.png
├── drawable-port-ldpi
│   └── splash.png
├── drawable-port-mdpi
│   └── splash.png
├── drawable-port-xhdpi
│   └── splash.png
├── drawable-port-xxhdpi
│   └── splash.png
├── drawable-port-xxxhdpi
│   └── splash.png
├── drawable-xhdpi
│   └── icon.png
├── drawable-xxhdpi
│   └── icon.png
└── drawable-xxxhdpi
    └── icon.png

Et votre config.xml devrait contenir ces lignes

    <splash qualifier="land-hdpi" src="res/drawable-land-hdpi/splash.png" />
    <splash qualifier="land-ldpi" src="res/drawable-land-ldpi/splash.png" />
    <splash qualifier="land-mdpi" src="res/drawable-land-mdpi/splash.png" />
    <splash qualifier="land-xhdpi" src="res/drawable-land-xhdpi/splash.png" />
    <splash qualifier="land-xxhdpi" src="res/drawable-land-xxhdpi/splash.png" />
    <splash qualifier="land-xxxhdpi" src="res/drawable-land-xxxhdpi/splash.png" />
    <splash qualifier="port-hdpi" src="res/drawable-port-hdpi/splash.png" />
    <splash qualifier="port-ldpi" src="res/drawable-port-ldpi/splash.png" />
    <splash qualifier="port-mdpi" src="res/drawable-port-mdpi/splash.png" />
    <splash qualifier="port-xhdpi" src="res/drawable-port-xhdpi/splash.png" />
    <splash qualifier="port-xxhdpi" src="res/drawable-port-xxhdpi/splash.png" />
    <splash qualifier="port-xxxhdpi" src="res/drawable-port-xxxhdpi/splash.png" />
    <icon qualifier="hdpi" src="res/drawable-hdpi/icon.png" />
    <icon qualifier="ldpi" src="res/drawable-ldpi/icon.png" />
    <icon qualifier="mdpi" src="res/drawable-mdpi/icon.png" />
    <icon qualifier="xhdpi" src="res/drawable-xhdpi/icon.png" />
    <icon qualifier="xxhdpi" src="res/drawable-xxhdpi/icon.png" />
    <icon qualifier="xxxhdpi" src="res/drawable-xxxhdpi/icon.png" />

Pour une image complète, voici la section Android de mon config.xml

<platform name="Android">
    <allow-intent href="market:*" />
    <preference name="Android-minSdkVersion" value="14" />
    <preference name="Android-targetSdkVersion" value="22" />
    <preference name="SplashScreen" value="splash" />
    <preference name="SplashScreenDelay" value="3000" />
    <preference name="ShowSplashScreenSpinner" value="false" />
    <preference name="FadeSplashScreen" value="false" />
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <splash qualifier="land-hdpi" src="res/drawable-land-hdpi/splash.png" />
    <splash qualifier="land-ldpi" src="res/drawable-land-ldpi/splash.png" />
    <splash qualifier="land-mdpi" src="res/drawable-land-mdpi/splash.png" />
    <splash qualifier="land-xhdpi" src="res/drawable-land-xhdpi/splash.png" />
    <splash qualifier="land-xxhdpi" src="res/drawable-land-xxhdpi/splash.png" />
    <splash qualifier="land-xxxhdpi" src="res/drawable-land-xxxhdpi/splash.png" />
    <splash qualifier="port-hdpi" src="res/drawable-port-hdpi/splash.png" />
    <splash qualifier="port-ldpi" src="res/drawable-port-ldpi/splash.png" />
    <splash qualifier="port-mdpi" src="res/drawable-port-mdpi/splash.png" />
    <splash qualifier="port-xhdpi" src="res/drawable-port-xhdpi/splash.png" />
    <splash qualifier="port-xxhdpi" src="res/drawable-port-xxhdpi/splash.png" />
    <splash qualifier="port-xxxhdpi" src="res/drawable-port-xxxhdpi/splash.png" />
    <icon qualifier="hdpi" src="res/drawable-hdpi/icon.png" />
    <icon qualifier="ldpi" src="res/drawable-ldpi/icon.png" />
    <icon qualifier="mdpi" src="res/drawable-mdpi/icon.png" />
    <icon qualifier="xhdpi" src="res/drawable-xhdpi/icon.png" />
    <icon qualifier="xxhdpi" src="res/drawable-xxhdpi/icon.png" />
    <icon qualifier="xxxhdpi" src="res/drawable-xxxhdpi/icon.png" />
</platform>

Exécutez maintenant phonegap remote build Android et ouvrez le fichier journal à partir de phonegap build. 

Le fichier journal est situé à https://build.phonegap.com/apps/X/logs/Android/build/ où X est votre App ID

Dans le journal, vous devriez voir quelque chose comme

...
[crunch] Processing image to cache: /project/res/drawable-hdpi/icon.png => /project/bin/res/drawable-hdpi/icon.png
[crunch]   (processed image to cache entry /project/bin/res/drawable-hdpi/icon.png: 0% size of source)
[crunch] Processing image to cache: /project/res/drawable-land-ldpi/splash.png => /project/bin/res/drawable-land-ldpi/splash.png
...

Si vous voyez ces lignes, votre écran de démarrage devrait fonctionner.

Notez également cette ligne dans config.xml

<preference name="SplashScreen" value="splash" />

Cela indique à la génération d’écart téléphonique que vos fichiers png d’écran de démarrage portent le nom splash.png. De cette façon, le système est capable de les localiser.

0
Levon

J'ai eu le même problème et je l'ai résolu en convertissant l'image de démarrage en .png au lieu de .jpg .

0
jgleal

Cordova implémente des API de niveau périphérique en tant que plug-ins. Utilisez la commande plug-in de la CLI, décrite dans l'Interface de ligne de commande, pour ajouter cette fonctionnalité à un projet: Veuillez utiliser le lien suivant pour plus d'informations

http://docs.phonegap.com/fr/3.3.0/cordova_splashscreen_splashscreen.md.html

0
Rathore

Dans mon cas, je viens d'ajouter <preference name="ShowSplashScreenSpinner" value="false"/>, il fait la magie.

Voici la partie Android dans mon config.xml

    <platform name="Android">
        <allow-intent href="market:*" />
        <preference name="ShowSplashScreenSpinner" value="false"/>
    <splash src="res/screen/Android/splash-land-hdpi.png" density="land-hdpi"/>
   <splash src="res/screen/Android/splash-land-hdpi.png" density="land-ldpi"/>
   <splash src="res/screen/Android/splash-land-hdpi.png" density="land-mdpi"/>
   <splash src="res/screen/Android/splash-land-hdpi.png" density="land-xhdpi"/>
   <splash src="res/screen/Android/splash-land-hdpi.png" density="port-hdpi"/>
   <splash src="res/screen/Android/splash-land-hdpi.png" density="port-ldpi"/>
   <splash src="res/screen/Android/splash-land-hdpi.png" density="port-mdpi"/>
   <splash src="res/screen/Android/splash-land-hdpi.png" density="port-xhdpi"/> 
 </platform>
0
RAJESH KUMAR ARUMUGAM

Phonegap met régulièrement à jour son système de génération, vous pouvez donc également vous tenir au courant de ces modifications. Jusqu'à hier, je voyais Splash sur Android mais je ne le voyais pas fonctionner aujourd'hui (sur la version 6.5.0), même si je n'avais apporté aucune modification à config.xml.

Après avoir ajouté les préférences suivantes à la préférence de version de générateur récemment introduite, cela fonctionne à nouveau.

<preference name='phonegap-version' value='cli-6.5.0' />
<preference name='pgb-builder-version' value='2' />

builder-version 1 pour ancien constructeur et 2 pour le nouveau qui utilise cordova comme constructeur. 

Lisez le billet de blog pgb suivant pour plus de détails.

https://blog.phonegap.com/phonegap-7-0-1-now-on-build-and-it-includes-some-important-changes-89087fe465f5

0
Ajay Singh

Après beaucoup de frustration, j’ai heureusement trouvé ce fil qui avait diverses suggestions.

Changer simplement l'attribut density en qualifier sur les éléments splash du fichier config.xml a finalement résolu le problème pour moi. J'inclus la déclaration du plugin au cas où cela aiderait.

<plugin name="cordova-plugin-splashscreen" spec="~5.0.2" />

<platform name="Android">
    <icon qualifier="ldpi" src="www/res/icon/Android/drawable-ldpi-icon.png" />
    <icon qualifier="mdpi" src="www/res/icon/Android/drawable-mdpi-icon.png" />
    <icon qualifier="hdpi" src="www/res/icon/Android/drawable-hdpi-icon.png" />
    <icon qualifier="xhdpi" src="www/res/icon/Android/drawable-xhdpi-icon.png" />
    <icon qualifier="xxhdpi" src="www/res/icon/Android/drawable-xxhdpi-icon.png" />
    <icon qualifier="xxxhdpi" src="www/res/icon/Android/drawable-xxxhdpi-icon.png" />
    <splash qualifier="land-ldpi" src="www/res/screen/Android/drawable-land-ldpi-screen.png" />
    <splash qualifier="land-mdpi" src="www/res/screen/Android/drawable-land-mdpi-screen.png" />
    <splash qualifier="land-hdpi" src="www/res/screen/Android/drawable-land-hdpi-screen.png" />
    <splash qualifier="land-xhdpi" src="www/res/screen/Android/drawable-land-xhdpi-screen.png" />
    <splash qualifier="land-xxhdpi" src="www/res/screen/Android/drawable-land-xxhdpi-screen.png" />
    <splash qualifier="land-xxxhdpi" src="www/res/screen/Android/drawable-land-xxxhdpi-screen.png" />
    <splash qualifier="port-ldpi" src="www/res/screen/Android/drawable-port-ldpi-screen.png" />
    <splash qualifier="port-mdpi" src="www/res/screen/Android/drawable-port-mdpi-screen.png" />
    <splash qualifier="port-hdpi" src="www/res/screen/Android/drawable-port-hdpi-screen.png" />
    <splash qualifier="port-xhdpi" src="www/res/screen/Android/drawable-port-xhdpi-screen.png" />
    <splash qualifier="port-xxhdpi" src="www/res/screen/Android/drawable-port-xxhdpi-screen.png" />
    <splash qualifier="port-xxxhdpi" src="www/res/screen/Android/drawable-port-xxxhdpi-screen.png" />
</platform>
0
Brett84c