Comment ajouter une icône d'application dans les projets phonegap?

85

J'ai créé un nouveau projet phonegap (v 3.0.0-0.14.0) avec le fichier config.xml par défaut, puis j'ai ajouté les plates-formes iOS et Android.

La configuration contient tous les chemins vers toutes les icônes de plate-forme.

J'ai écrasé les icônes par défaut pour iOS et Android afin que le chemin et le nom correspondent toujours à ces png.

Lors de l'exécution dans le simulateur, les icônes ne s'affichent pas. Je l'ai recherché dans xCode où il me dit que le dossier "Resources" pour les icônes contient toujours les icônes par défaut phonegap. Même chose avec Android.

Qu'est-ce que je fais mal?

Comment puis-je ajouter des icônes d'applications personnalisées pour iOS et Android avec phonegap?

Merci

mon config.xml

<icon src="icon.png" />

<icon gap:density="ldpi" gap:platform="android" src="res/icon/android/icon-36-ldpi.png" />
<icon gap:density="mdpi" gap:platform="android" src="res/icon/android/icon-48-mdpi.png" />
<icon gap:density="hdpi" gap:platform="android" src="res/icon/android/icon-72-hdpi.png" />
<icon gap:density="xhdpi" gap:platform="android" src="res/icon/android/icon-96-xhdpi.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="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="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" />
Markus
la source
4
est-ce ceci? la construction locale ignore le fichier de configuration? stackoverflow.com/questions/15018098/…
Markus
Markus a raison, son commentaire devrait être une réponse
drodsou
1
J'ai pris le temps de faire une FAQ sur tout ce que vous devez savoir pour déboguer / faire fonctionner les icônes (cordova 5.1.1). Vérifiez stackoverflow.com/a/31674547/82609
Sebastien Lorber

Réponses:

67

Heureusement, il y a un peu dans la documentation sur les images de démarrage, ce qui m'a mis sur la route pour trouver le bon emplacement pour les images d'icônes. Alors voilà.

Emplacement des fichiers Une fois que vous avez construit votre projet à l'aide de l'interface de ligne de commande "cordova build ios", vous devriez avoir une structure de fichiers complète pour votre application iOS dans le platforms/ios/dossier.

À l'intérieur de ce dossier se trouve un dossier portant le nom de votre application. Qui à son tour contient un resources/répertoire où vous trouverez les dossiers icons/et splashscreen/.

Dans le dossier des icônes, vous trouverez quatre fichiers d'icônes (pour 57px et 72 px, chacun en version standard et @ 2x). Ce sont les icônes d'espace réservé Phonegap que vous avez vues jusqu'à présent.

Que faire

Tout ce que vous avez à faire est de sauvegarder les fichiers d'icônes dans ce dossier. Donc, c'est:

YourPhonegapProject/Platforms/ios/YourAppName/Resources/icons

Idem pour les fichiers d'écran de démarrage.

Remarques

  1. Après avoir placé les fichiers là-bas, reconstruisez le projet en utilisant cordova build iosET utilisez la commande de menu «Nettoyer le produit» de xCode. Sans cela, vous verrez toujours les espaces réservés Phonegap.

  2. Il est plus sage de renommer vos fichiers de la manière iOS / Apple (c'est-à-dire [email protected] etc.) au lieu d'éditer les noms dans info.plist ou config.xml. Au moins cela a fonctionné pour moi.

  3. Et au fait, ignorez le chemin étrange et le nom de fichier étrange donné pour les icônes dans config.xml (ie <icon gap:platform="ios" height="114" src="res/icon/ios/icon-57-2x.png" width="114" />). Je viens de laisser ces définitions là-bas, et les icônes sont apparues très bien même si mon icône 114px a été nommée à la [email protected]place de icon-57-2x.png.

  4. N'utilisez pas config.xml pour empêcher l'effet de brillance d'Apple sur l'icône. Au lieu de cela, cochez la case dans xCode (cliquez sur le titre du projet dans la colonne de navigation de gauche, sélectionnez votre application sous l'en-tête Cible et faites défiler jusqu'à la section des icônes).

Wytze
la source
ne laissera-t-il pas les noms de fichiers dans config.xml rompre la construction avec le service de compilation phonegap? cela ne fonctionne que parce que la construction locale ignore le config.xml. et si phonegap décide de le lire? Je suggérerais de copier ces fichiers avec une sorte de processus de construction.
Markus
1
Salut Markus, je n'ai aucune expérience avec le service Phonegap Build (sauf que c'était déconcertant quand je l'ai essayé brièvement et sans succès). Je ne peux donc pas juger de votre commentaire, mais je vous crois sur parole. Par conséquent, ma réponse ne s'adresse qu'à ceux qui font leurs propres constructions.
Wytze
1
Cette réponse est obsolète (mais fonctionne pour 3.0.0). Aucun processus manuel n'est plus nécessaire pour gérer cela. Vérifiez la documentation de bord et ma réponse ici stackoverflow.com/a/31674547/82609
Sebastien Lorber
46

FAQ: ÉCRAN ICÔNE / SPLASH (Cordova 5.x / 2015)

Je présente ma réponse sous forme de FAQ générale qui peut vous aider à résoudre de nombreux problèmes que j'ai rencontrés lors de l'utilisation des icônes / écrans de démarrage. Vous découvrirez peut-être comme moi que la documentation n'est pas toujours très claire ni à jour. Cela ira probablement à la documentation StackOverflow lorsqu'elle sera disponible.

Premièrement: répondre à la question

Comment puis-je ajouter des icônes d'applications personnalisées pour iOS et Android avec phonegap?

Dans votre version de Cordova, la iconbalise est inutile. Il n'est même pas documenté dans Cordova 3.0.0. Vous devez utiliser la version de la documentation qui correspond au cli que vous utilisez et non la dernière!

La balise icon ne fonctionne pas du tout pour Android avant la version 3.5.0 selon ce que je peux voir dans les différentes versions de la documentation. Dans 3.4.0, ils conseillent toujours de copier manuellement les fichiers

Dans les versions plus récentes : votre config.xmlapparence est meilleure pour les nouvelles versions de Cordova. Cependant, il y a encore beaucoup de choses que vous voudrez peut-être savoir. Si vous décidez de mettre à niveau, voici quelques éléments utiles à modifier:

  • Vous n'avez pas besoin de l' gap:espace de noms
  • Vous avez besoin <preference name="SplashScreen" value="screen" />d'Android

Voici plus de détails sur les questions que vous pourriez vous poser lorsque vous essayez de gérer les icônes et l'écran de démarrage:

Puis-je utiliser une ancienne version de Cordova / Phonegap

Non, la fonction icône / écran de démarrage n'était pas dans les anciennes versions de Cordova, vous devez donc utiliser une version récente. Dans les versions précédentes, seul Phonegap Build gérait les icônes / l'écran de démarrage, donc la construction locale et la gestion des icônes n'étaient possibles qu'avec un hook. Je ne connais pas la version minimale pour utiliser cette fonctionnalité, mais avec la version 5.1.1, cela fonctionne bien à la fois dans Cordova / Phonegap cli. Avec Cordova 3.5, cela n'a pas fonctionné pour moi.

Edit : pour Android, vous devez utiliser au moins 3.5.0

Comment puis-je déboguer le processus de génération des icônes?

Le cli utilise une commande CP. Si vous fournissez un chemin d'icône non valide, une cperreur s'affiche :

sebastien@sebastien-xps:cordova (dev *+$%)$ cordova run android --device
cp: no such file or directory: /home/sebastien/Desktop/Stample-react/cordova/res/www/stample_splash.png

Edit : vous avez utilisé cordova build <platform> --verbosepour obtenir des journaux d'utilisation de la commande cp pour voir où vos icônes sont copiées

Les icônes doivent aller dans un dossier selon la configuration. Pour moi, cela va dans de nombreux sous-dossiers dans:platforms/android/build/intermediates/res/armv7/debug/drawable-hdpi-v4/icon.png

Ensuite, vous pouvez trouver l'APK et l'ouvrir en tant qu'archive zip pour vérifier que les icônes sont présentes. Ils doivent être dans un res/drawable*dossier car il s'agit d'un dossier spécial pour Android.

Où dois-je placer les icônes / écrans de démarrage dans mon projet?

Dans de nombreux exemples, vous trouverez que les icônes / écrans de démarrage sont déclarés dans un resdossier. Il ress'agit d'un dossier Android spécial dans l'APK de sortie, mais cela ne signifie pas que vous devez utiliser un resdossier dans votre projet.

Vous pouvez placer votre icône n'importe où, mais le chemin que vous utilisez doit être relatif à la racine du projet , et ne faites pas wwwattention! Ceci est documenté, mais pas clairement car tous les exemples utilisent reset vous ne savez pas où se trouve ce dossier :(

Je veux dire que si vous mettez l'icône en www/icon.pngvous, vous devez absolument l'inclure wwwdans votre chemin.

Edit Mars 2016 : après la mise à jour de mes versions, il semble maintenant que les icônes sont relatives au wwwdossier mais la documentation n'a pas été modifiée ( problème )

Ça <icon src="icon.png"/>marche?

Non! .

Sur Android, il semble que cela fonctionnait avant (quand l'attribut de densité n'était pas encore pris en charge?) Mais plus maintenant. Voir ce numéro de Cordova

Sur iOS, il semble que l'utilisation de cette déclaration globale puisse remplacer des déclarations plus spécifiques, alors faites attention et construisez avec --verbosepour vous assurer que tout fonctionne comme prévu.

Puis-je utiliser le même fichier icône / écran de démarrage pour toutes les densités.

Oui, vous pouvez. Vous pouvez même utiliser le même fichier pour l'icône et l'écran de démarrage (juste pour tester!). J'ai utilisé un "gros" fichier d'icônes de 65 Ko sans aucun problème.

Quelle est la différence lors de l'utilisation de la balise platform par rapport à l'attribut platform

<icon src="icon.png" platform="android" density="ldpi" />

est le même que

<platform name="android">
    <icon src="www/stample_icon.png" density="ldpi" />
</platform>

Dois-je utiliser l'espace de noms gap: si j'utilise Phonegap?

D'après mon expérience, les nouvelles versions de Phonegap ou Cordova sont toutes les deux capables de comprendre les déclarations d'icônes sans utiliser d' gap:espace de noms xml.

Cependant, j'attends toujours une réponse valide ici: le plugin cordova / phonegap ajoute VS config.xml

Pour autant que je sache, certaines fonctionnalités avec l' gap:espace de noms peuvent être disponibles plus tôt dans PhonegapBuild, puis dans Phonegap, puis portées sur Cordova (?)

Est <preference name="SplashScreen" value="screen" />nécessaire?

Au moins pour Android, oui. J'ai ouvert un numéro avec des explications supplémentaires.

L'ordre de déclaration des icônes est-il important?

Oui! Cela n'a peut-être aucun impact sur Android mais sur iOS d'après mes tests. C'est un comportement inattendu et non documenté, j'ai donc ouvert un autre problème .

Ai-je besoin cordova-plugin-splashscreen?

Oui, cela est absolument nécessaire si vous voulez que l'écran de démarrage fonctionne. La documentation n'est pas claire ( problème ) et pensons que le plugin n'est nécessaire que pour proposer une API javascript en écran de démarrage.

Comment puis-je redimensionner rapidement les images pour toutes les largeurs / hauteurs / densités

Il existe des outils pour vous aider à le faire. Le meilleur pour moi est http://makeappicon.com/ mais il nécessite de fournir une adresse e-mail.

Les autres solutions possibles sont:

Pouvez-vous me donner un exemple de configuration?

Oui. Voici mon vraiconfig.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="co.x" version="0.2.6" xmlns="http://www.w3.org/ns/widgets" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:gap="http://phonegap.com/ns/1.0">
    <name>x</name>
    <description>
        x
    </description>
    <author email="[email protected]" href="https://x.co">
        x
    </author>
    <content src="index.html" />
    <preference name="permissions"                  value="none" />
    <preference name="webviewbounce"                value="false" />
    <preference name="StatusBarOverlaysWebView"     value="false" />
    <preference name="StatusBarBackgroundColor"     value="#0177C6" />
    <preference name="detect-data-types"            value="true" />
    <preference name="stay-in-webview"              value="false" />
    <preference name="android-minSdkVersion"        value="14" />
    <preference name="android-targetSdkVersion"     value="22" />
    <preference name="phonegap-version"             value="cli-5.1.1" />

    <preference name="SplashScreenDelay"            value="10000" />
    <preference name="SplashScreen"                 value="screen" />


    <plugin name="cordova-plugin-device"                spec="1.0.1" />
    <plugin name="cordova-plugin-console"               spec="1.0.1" />
    <plugin name="cordova-plugin-whitelist"             spec="1.1.0" />
    <plugin name="cordova-plugin-crosswalk-webview"     spec="1.2.0" />
    <plugin name="cordova-plugin-statusbar"             spec="1.0.1" />
    <plugin name="cordova-plugin-screen-orientation"    spec="1.3.6" />
    <plugin name="cordova-plugin-splashscreen"          spec="2.1.0" />

    <access origin="http://*" />
    <access origin="https://*" />

    <access launch-external="yes" origin="tel:*" />
    <access launch-external="yes" origin="geo:*" />
    <access launch-external="yes" origin="mailto:*" />
    <access launch-external="yes" origin="sms:*" />
    <access launch-external="yes" origin="market:*" />

    <platform name="android">
        <icon src="www/stample_icon.png" density="ldpi" />
        <icon src="www/stample_icon.png" density="mdpi" />
        <icon src="www/stample_icon.png" density="hdpi" />
        <icon src="www/stample_icon.png" density="xhdpi" />
        <icon src="www/stample_icon.png" density="xxhdpi" />
        <icon src="www/stample_icon.png" density="xxxhdpi" />
        <splash src="www/stample_splash.png" density="land-hdpi"/>
        <splash src="www/stample_splash.png" density="land-ldpi"/>
        <splash src="www/stample_splash.png" density="land-mdpi"/>
        <splash src="www/stample_splash.png" density="land-xhdpi"/>
        <splash src="www/stample_splash.png" density="land-xhdpi"/>
        <splash src="www/stample_splash.png" density="land-xhdpi"/>
        <splash src="www/stample_splash.png" density="port-hdpi"/>
        <splash src="www/stample_splash.png" density="port-ldpi"/>
        <splash src="www/stample_splash.png" density="port-mdpi"/>
        <splash src="www/stample_splash.png" density="port-xhdpi"/>
        <splash src="www/stample_splash.png" density="port-xxhdpi"/>
        <splash src="www/stample_splash.png" density="port-xxxhdpi"/>
    </platform>

    <platform name="ios">
        <icon src="www/stample_icon.png" width="180" height="180" />
        <icon src="www/stample_icon.png" width="60" height="60" />
        <icon src="www/stample_icon.png" width="120" height="120" />
        <icon src="www/stample_icon.png" width="76" height="76" />
        <icon src="www/stample_icon.png" width="152" height="152" />
        <icon src="www/stample_icon.png" width="40" height="40" />
        <icon src="www/stample_icon.png" width="80" height="80" />
        <icon src="www/stample_icon.png" width="57" height="57" />
        <icon src="www/stample_icon.png" width="114" height="114" />
        <icon src="www/stample_icon.png" width="72" height="72" />
        <icon src="www/stample_icon.png" width="144" height="144" />
        <icon src="www/stample_icon.png" width="29" height="29" />
        <icon src="www/stample_icon.png" width="58" height="58" />
        <icon src="www/stample_icon.png" width="50" height="50" />
        <icon src="www/stample_icon.png" width="100" height="100" />
        <splash src="www/stample_splash.png" width="320" height="480"/>
        <splash src="www/stample_splash.png" width="640" height="960"/>
        <splash src="www/stample_splash.png" width="768" height="1024"/>
        <splash src="www/stample_splash.png" width="1536" height="2048"/>
        <splash src="www/stample_splash.png" width="1024" height="768"/>
        <splash src="www/stample_splash.png" width="2048" height="1536"/>
        <splash src="www/stample_splash.png" width="640" height="1136"/>
        <splash src="www/stample_splash.png" width="750" height="1334"/>
        <splash src="www/stample_splash.png" width="1242" height="2208"/>
        <splash src="www/stample_splash.png" width="2208" height="1242"/>
    </platform>

    <allow-intent href="*" />
    <engine name="browser" spec="^3.6.0" />
    <engine name="android" spec="^4.0.2" />
</widget>

Les kits de démarrage constituent une bonne source d’exemples. Comme phonegap-start ou Ionic starter

Sébastien Lorber
la source
2
J'ai construit un petit utilitaire cli (parmi beaucoup d'autres), qui gère l'icône de l'application, l'écran de démarrage et la génération d'aperçu https://github.com/mmacmillan/cordova-imaging , je le mentionne car il est piloté par un fichier de configuration bien documenté concernant les tailles / dimensions / emplacements, et contient des liens vers la documentation spécifique à la plate-forme; cela peut aider à compléter la réponse détaillée que vous avez pris le temps de fournir
Mike MacMillan
J'ai fait tout cela, avec Cordova 5.1, les fichiers sont copiés dans le .apk comme vous l'avez mentionné, mais la tablette n'affiche toujours pas de nouvelle icône. Des idées?
Gringo Suave
Ce qu'il fallait faire, c'est désinstaller l'ancienne version de l'application, puis installer la nouvelle version. Ensuite, la tablette a remarqué que quelque chose avait changé. Ainsi, j'ai pu obtenir la nouvelle icône.
Gringo Suave
1
Quelle réponse fantastique! J'ai utilisé votre suggestion cordova build android --verbosepour identifier et résoudre mon problème. Merci!
Sarah
Bonne réponse Sébastien;) Thumbs up
Alaeddine
32

Depuis Cordova 3.5.0-0.2.6, l' <icon />élément dans config.xml fonctionne avec les mises en garde suivantes:

  1. L' srcattribut est un chemin relatif au dossier racine de votre projet. Le suivi des problèmes sur ce problème raison pour laquelle le changement.

  2. L' <icon src="..." />élément sans résolution / dpi est documenté comme l'icône utilisée par toutes les plates-formes comme icône par défaut. Cependant, sur les versions Android, l'icône par défaut n'est copiée que dans le dossier dessinable Android, sans définition de résolutions spécifiques. Cela vous fait apparaître une icône personnalisée dans le /res/drawabledossier, et l'icône par défaut de cordova avec des résolutions spécifiques existe dans les autres dossiers à l'intérieur de l'apk final (c'est-à-dire /res/drawable-ldpi). Vous devez ajouter un élément d'icône config.xmlpour chaque résolution sur la plate-forme Android.

Par exemple, si votre image d'icône se trouve dans le chemin www/res/img/icon.pngrelatif à votre projet racine, ces lignes dans config.xmlfont que l'icône de votre application dans Android fonctionne:

<!-- Default application icon -->
<icon src="www/res/img/icon.png" />
<!--
    Default icon should work, but cordova don't overwrite
    the default on all densities
-->
<icon src="www/res/img/icon.png" platform="android" density="ldpi" />
<icon src="www/res/img/icon.png" platform="android" density="mdpi" />
<icon src="www/res/img/icon.png" platform="android" density="hdpi" />
<icon src="www/res/img/icon.png" platform="android" density="xhdpi" />

Avec cette configuration en place, vous pouvez avoir une seule icône d'image pour toutes les résolutions écrasant l'icône de cordova par défaut, et sans hoooks personnalisés. Construire simplement avec cordova build androiddevrait faire l'affaire.

Ronoaldo Pereira
la source
Avez-vous un lien de rapport de bogue pour le problème 2? Je viens de frapper ce problème sur un nouveau projet et cela m'a déconcerté au début. Voudrais suivre les progrès pour savoir quand ils sont corrigés si possible. À votre santé.
Mike
omg a finalement réussi à le faire! Merci pour density. J'ai changé <icon gap:platform="android" gap:qualifier="ldpi" src="www/res/icon/android/icon-36-ldpi.png" />pour<icon gap:platform="android" density="ldpi" src="www/res/icon/android/icon-36-ldpi.png" />
Tha Leang
@Ronoaldo Periera tu es mon sauveur !! <icon ..> tag pour chaque densité! brillant!!
Hittz
L'icône par défaut src ne fonctionne pas bien pour Android, elle est donc ignorée! Vérifiez ma réponse ici: stackoverflow.com/a/31674547/82609
Sebastien Lorber
8

Si vous voulez un moyen facile à utiliser pour ajouter des icônes automatiquement lors de la construction sur place ( cordova emulate ios, cordova run android, etc.) un coup d' oeil à ce point essentiel:

https://gist.github.com/LinusU/7515016

Espérons que cela commencera à fonctionner dès le départ dans le futur, voici le rapport de bogue pertinent sur le projet Cordova:

https://issues.apache.org/jira/browse/CB-2606

Linus Unnebäck
la source
Linus comme il est expliqué dans ma réponse oui cela fonctionne maintenant mais il semble aussi avoir cassé des trucs, vérifiez stackoverflow.com/a/31674547/82609
Sebastien Lorber
4

Vous devez créer un fichier config.xml dans lequel vous mettrez le fichier icône

<?xml version="1.0" encoding="ISO-8859-1" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
   xmlns:gap = "http://phonegap.com/ns/1.0"
   id        = "example"
   version    = "1.0.0">

   <icon src="icon.png" />
</widget>

Vérifiez ceci: https://build.phonegap.com/docs/config-xml

il y a des icônes spécifiques à iOS

João Pimentel Ferreira
la source
mon fichier de configuration contient déjà toutes les icônes. il est créé par défaut lors de la création d'un nouveau projet phonegap
Markus
2
Ça ne marche pas. Cela fonctionnait avec PG Build, mais Cordova 3.x cli ne prend pas en compte les icônes spécifiées dans config.xml (ni icon.png & screen.png en root). Cherche également la réponse à cette question.
lefnire
Yup config.xml est uniquement pour PhoneGap Build! quelqu'un sait comment faire ça?!
Michael
Sur Cordova 3.5.0-0.2.6, la prise en charge de l'icône fonctionne, avec quelques mises en garde sur Android. Voir ma réponse pour plus de détails.
Ronoaldo Pereira
4

Étant donné que la plupart des réponses ici sont destinées à iOS, voici une solution pour changer d'icône sous Android.

Pour Android:

Apportez des modifications dans <emplacement du projet> \ plates-formes \ android \ ant-build \ res et non dans <emplacement du projet> \ plates-formes \ android \ res

Pour certaines personnes, apporter des modifications à ce dernier emplacement a peut-être fonctionné, mais après avoir remarqué que Phonegap copiait de \ android \ res vers \ android \ ant-build \ res, j'ai décidé de m'y enregistrer et j'ai trouvé un ensemble séparé de dossiers pouvant être dessinés contenant la valeur par défaut icône de phonegap.

Changer ceux-ci a finalement fonctionné.

Étant donné que je construis et exécute localement et que je n'utilise pas Adobe PhoneGap Build, la modification des icônes dans <emplacement du projet> \ www \ res \ icon \ android ne fonctionnait pas non plus.

Elixander Chen
la source
3

J'utilise phonegap 3.1.0-0.15.0, depuis iOS7 a changé la résolution en 120x120px, je viens d'ajouter un fichier avec ces dimensions au projet, puis j'ai changé le fichier info.plist.

  1. Ajoutez un fichier 120x120 au projet, en faisant un clic droit sur le fichier projet dans Xcode et en sélectionnant "Ajouter des fichiers à" [Nom de votre projet] "...
  2. Accédez au fichier info.plist dans Xcode "Resources / [Your Project Name] -info.plist"
  3. Sous "Fichiers d'icônes (iOS 5) / Icône principale / Fichiers d'icônes", remplacez "Item 2" par le nom de fichier de votre fichier (j'ai appelé le mien "icon-120.png que j'ai placé dans le dossier Projet à côté de toutes les autres icônes. , bien que cela ne devrait pas avoir d'importance)

Plus d'informations peuvent être trouvées ici: http://www.digifloor.com/missing-recommended-icon-file-error-ios-app-13

Pour réparer l'écran de démarrage dans iOS, je viens de coller de nouveaux fichiers avec les mêmes dimensions et les mêmes noms de fichiers, en écrasant les anciens. N'oubliez pas d'aller dans Produit> Nettoyer dans la barre de menu de Xcode (raccourci Shift + Commande + K) et cela devrait fonctionner correctement! :)

Luddig
la source
3

Dans cordova 3.3.1-0.1.2, le comportement attendu ne fonctionne pas correctement.

dans

http://cordova.apache.org/docs/en/3.3.0/config_ref_images.md.html#Icons%20and%20Splash%20Screens

il indique clairement que vous êtes supposé les mettre dans votre dossier www principal dans un dossier appelé res et des icônes qui suivent une convention de dénomination particulière au lieu de la manière spécifiée par config.xml personnalisable d'origine (dans laquelle vous pointez vers un fichier de votre choix, ce qui était / est beaucoup mieux). il devrait alors prendre à partir de là pour chaque plate-forme et les mettre dans les plates-formes /? android? / res / drawable-? dpi / icon.png mais il ne fait pas un tel comportement correct pour le moment ... bug.

donc je suppose que nous devons les mettre manuellement pour chaque plate-forme. il faudrait bien sûr supprimer cela pour le dupliquer à nouveau dans le dossier www. pour moi, je devais de toute façon remplacer totalement le contenu du dossier principal www, car cela ne fonctionnait tout simplement pas avec hello world sans pirater un index.html de redirection pour y trouver un dossier aléatoire étrange. Mettre le dossier res à côté de www a le plus de sens, mais ce qui me semble être causé par cette série de choix / défauts de conception en cascade et déroutants.

MistereeDevlord
la source
2

dans certains cas, les skripts internes de cordova ne placent pas les icônes dans le bon dossier, vous pouvez donc voir le robot f *** cordova au lieu de votre propre icône.

Utilisez le script hook .;)

trois-crochets-votre-cordovaphonegap-project-besoins

Créez un dossier "after_platform_add" dans le dossier hook et mettez / changez le dernier skript de devgirl.

N'oubliez pas de définir les droits exécutifs pour le script, sous Linux "chmod 777 <script>"

bonne chance!

Masood Moshref
la source
1

Tout ce que j'ai fait a été ajouté les lignes ci-dessous dans config.xml <icon src="www/img/appIcon.png" />

Et ça a très bien fonctionné

Ali Sadiq
la source
Thx man. J'ai essayé de mettre une icône dans res / icon.png (comme dans les exemples de documentation ...) et cela n'a jamais fonctionné sur iOS. J'ai finalement abandonné ce dossier déroutant "res" et mis l'icône sous "www" comme vous l'avez suggéré et cela a fonctionné comme un charme pour moi aussi! Cela fonctionne pour Cordova 6.0.0. plateforme ios.
firepol
1

Ajoutez simplement ce code dans votre fichier config.xml

<icon src="path to your icon image">

par exemple:

<icon src="icon.png">

Rappelez-vous toujours que vous devez utiliser l'extension .png

Jobincs
la source
essayez d'utiliser des images png
Jobincs
0

Je suis également en train d'essayer de comprendre comment tout cela se connecte.

Voici ce que j'ai trouvé jusqu'à présent dans XCode, mais j'espère être corrigé ou confirmé si mes hypothèses sont correctes. Je n'ai pas trouvé de construction prête à l'emploi pour xcode de cordova qui applique correctement les icônes. Comme vous, j'ai mis à jour toutes les icônes répertoriées dans le config.xml mais pas de dés.

Donc...

Tout d'abord, je mets généralement à jour le fichier config.xml à la racine du projet avec celui de mon dossier "www" (je le fais par incertitude quant au fait que le www / config.xml a une priorité ou s'il est même appliqué)

Deuxièmement, je mets à jour les "Phases de construction" du projet. Développez "Copier les ressources du bundle", vous avez déjà remarqué toutes les images dans "Ressources / icônes", "Ressources / splash". Tu peux soit:

  • supprimez tous ces éléments pour éviter d'écraser vos images OU
  • mettre à jour toutes ces images avec les vôtres (en renommant le nom de l'image répertorié)

Pendant que j'y travaillais, vous pourriez être en mesure de mettre à jour au minimum les images à partir de l'onglet "Résumé".

Faites glisser et déposez vos images de vos dossiers res vers l'image appropriée dans l'onglet "Résumé". (res / icon / ios -> Icônes d'application et res / screen / ios -> Launch Images). Je le fais uniquement pour iPhone car mon application est uniquement iPhone. Cochez "Prérendu" si vous ne voulez pas que le brillant apparaisse.

Puis mettez à jour le "icon.png" référencé dans le fichier plist du projet: PROJECT_NAME-Info.plist ou dans l'onglet "Info" en regardant la cible du projet. Renommez-le en "icon-57.png" (qui vit maintenant dans la racine de votre projet, cela a été automatiquement ajouté à la racine lorsque vous avez fait le glisser-déposer.

Construisez et vous devriez une icône d'application mise à jour.

Sam Tsai
la source
J'ai construit le projet avec Cordova 3.0.3, mais j'imagine que c'est la même chose avec les builds phonegap.
Sam Tsai
0

Juste en notant que je viens de changer mon config.xml pour ressembler à l'exemple de Sebastian.

Quelque chose qui est également utile pour déboguer tout cela, surtout si vous ne faites pas de builds locaux ... est de télécharger les fichiers XAP / IPA / APK tels que construits à partir du cloud PhoneGap et de créer des dossiers pour chacun. Renommez chaque fichier avec une extension .ZIP et extrayez le contenu de chacun dans leurs dossiers respectifs. Donc, fondamentalement, vous pouvez maintenant voir ce qui est dans le paquet qui sera expédié au téléphone.

En faisant cela, je peux voir que pour la plate-forme Microsoft Phone, elle ignore largement toutes mes tentatives de remplacement de l'icône ou de l'écran de démarrage. Si vous remplacez ensuite ApplicationIcon.png et SplashScreenImage.jpg, puis re-zip le dossier et renommez-le à nouveau en tant que fichier .XAP, vous pouvez ensuite le déployer sur votre téléphone et cela fonctionnera parfaitement. D'une manière ou d'une autre, il existe un moyen d'obtenir la version PhoneGap pour transformer votre icon.png et icon.jpg en ces deux fichiers. Peut-être que la suggestion de Masood est une possibilité ici et utilise un script hook.

Faire de même pour le fichier .IPA (iOS) entraîne la création de plusieurs fichiers comme icon-something.png au niveau parent au-dessus de www. Ils semblent tous vierges.

Faire de même pour le fichier .APK (Android) donne un ensemble de dossiers res / drawable-something et il semble y avoir mon icon.png dans chacun d'eux. C'est le succès le plus proche que je puisse revendiquer pour le moment.

Michael Blankenship
la source