Wie füge ich ein App-Symbol in Phonegap-Projekten hinzu?

85

Ich habe ein neues Phonegap-Projekt (Version 3.0.0-0.14.0) mit der Standardkonfiguration config.xml erstellt und dann iOS- und Android-Plattformen hinzugefügt.

Die Konfiguration enthält alle Pfade zu allen Plattformsymbolen.

Ich habe die Standardsymbole für iOS und Android überschrieben, damit Pfad und Name immer noch mit diesen PNGs übereinstimmen.

Beim Ausführen im Simulator werden die Symbole nicht angezeigt. Ich habe es in xCode nachgeschlagen, wo es mir sagt, dass der Ordner "Ressourcen" für die Symbole immer noch die Phonegap-Standardsymbole enthält. Gleiches gilt für Android.

Was mache ich falsch?

Wie kann ich mit Phonegap benutzerdefinierte App-Symbole für iOS und Android hinzufügen?

Vielen Dank

meine 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
quelle
4
ist das es? lokaler Build ignoriert Konfigurationsdatei? stackoverflow.com/questions/15018098/…
Markus
Markus hat recht, sein Kommentar sollte eine Antwort sein
drodsou
1
Ich habe mir Zeit genommen, um eine FAQ zu allem zu erstellen, was Sie wissen sollten, um Symbole zu debuggen / funktionsfähig zu machen (cordova 5.1.1). Überprüfen Sie stackoverflow.com/a/31674547/82609
Sebastien Lorber

Antworten:

67

Glücklicherweise gibt es in den Dokumenten ein wenig über die Begrüßungsbilder, was mich auf den Weg gebracht hat, auch den richtigen Ort für die Symbolbilder zu finden. Also los geht's.

Speicherort der Dateien Nachdem Sie Ihr Projekt über die Befehlszeilenschnittstelle "cordova build ios" erstellt haben, sollten Sie eine vollständige Dateistruktur für Ihre iOS-App im platforms/ios/Ordner haben.

In diesem Ordner befindet sich ein Ordner mit dem Namen Ihrer App. Welches wiederum enthält ein resources/Verzeichnis, in dem Sie die icons/und splashscreen/Ordner finden.

Im Ordner "icons" finden Sie vier Symboldateien (für 57px und 72 px, jeweils in regulärer und @ 2x-Version). Dies sind die Phonegap-Platzhaltersymbole, die Sie bisher gesehen haben.

Was ist zu tun

Sie müssen lediglich die Symboldateien in diesem Ordner speichern. So das ist:

YourPhonegapProject/Platforms/ios/YourAppName/Resources/icons

Gleiches gilt für Splashscreen-Dateien.

Anmerkungen

  1. Nachdem Sie die Dateien dort abgelegt haben, erstellen Sie das Projekt mit cordova build iosAND neu und verwenden Sie den xCode-Menübefehl 'Produkt reinigen'. Ohne dies sehen Sie immer noch die Phonegap-Platzhalter.

  2. Es ist am klügsten, Ihre Dateien auf iOS / Apple-Weise umzubenennen (z. B. [email protected] usw.), anstatt die Namen in der info.plist oder config.xml zu bearbeiten. Zumindest hat das bei mir funktioniert.

  3. Ignorieren Sie übrigens den seltsamen Pfad und den seltsamen Dateinamen, die für die Symbole in config.xml (dh <icon gap:platform="ios" height="114" src="res/icon/ios/icon-57-2x.png" width="114" />) angegeben wurden. Ich habe diese Definitionen einfach dort gelassen und die Symbole wurden einwandfrei angezeigt, obwohl mein 114px-Symbol [email protected]anstelle von benannt wurde icon-57-2x.png.

  4. Verwenden Sie config.xml nicht, um den Glanzeffekt von Apple auf das Symbol zu verhindern. Aktivieren Sie stattdessen das Kontrollkästchen in xCode (klicken Sie auf den Projekttitel in der linken Navigationsspalte, wählen Sie Ihre App unter der Kopfzeile Ziel aus und scrollen Sie zum Abschnitt Symbole).

Wytze
quelle
Wird das Erstellen von Dateinamen in config.xml den Build nicht mit dem Phonegap-Build-Service unterbrechen? Dies funktioniert nur, weil der lokale Build die Datei config.xml ignoriert. Was ist, wenn Phonegap beschließt, es zu lesen? Ich würde vorschlagen, diese Dateien mit einem Erstellungsprozess zu kopieren.
Markus
1
Hallo Markus, ich habe keine Erfahrung mit dem Phonegap Build-Dienst (außer dass er verwirrend war, als ich ihn kurz und erfolglos ausprobierte). Ich kann Ihren Kommentar also nicht beurteilen, aber ich nehme Ihr Wort dafür. Daher richtet sich meine Antwort nur an diejenigen, die ihre eigenen Builds erstellen.
Wytze
1
Diese Antwort ist veraltet (funktioniert aber für 3.0.0). Es ist kein manueller Prozess mehr erforderlich, um dies zu handhaben. Überprüfen Sie Edge Doc und meine Antwort hier stackoverflow.com/a/31674547/82609
Sebastien Lorber
46

FAQ: ICON / SPLASH-BILDSCHIRM (Cordova 5.x / 2015)

Ich präsentiere meine Antwort als allgemeine FAQ, die Ihnen helfen kann, viele Probleme zu lösen, auf die ich beim Umgang mit Symbolen / Begrüßungsbildschirmen gestoßen bin. Sie werden vielleicht wie ich feststellen, dass die Dokumentation nicht immer sehr klar und aktuell ist. Dies wird wahrscheinlich in die StackOverflow-Dokumentation aufgenommen , sofern verfügbar.

Erstens: Beantwortung der Frage

Wie kann ich mit Phonegap benutzerdefinierte App-Symbole für iOS und Android hinzufügen?

In Ihrer Version von Cordova ist das iconTag nutzlos. Es ist nicht einmal in Cordova 3.0.0 dokumentiert. Sie sollten die Dokumentationsversion verwenden, die zu der von Ihnen verwendeten CLI passt, und nicht die neueste!

Das Symbol- Tag funktioniert für Android vor der Version 3.5.0 überhaupt nicht, wie ich in den verschiedenen Versionen der Dokumentation sehen kann. In 3.4.0 wird weiterhin empfohlen, die Dateien manuell zu kopieren

In neueren Versionen : Sie sehen config.xmlbesser aus für neuere Cordova-Versionen. Es gibt jedoch noch viele Dinge, die Sie wissen möchten. Wenn Sie sich für ein Upgrade entscheiden, sollten Sie einige nützliche Dinge ändern:

  • Sie brauchen den gap:Namespace nicht
  • Sie benötigen <preference name="SplashScreen" value="screen" />für Android

Hier finden Sie weitere Details zu den Fragen, die Sie sich möglicherweise stellen, wenn Sie versuchen, mit Symbolen und Begrüßungsbildschirmen umzugehen:

Kann ich eine alte Version von Cordova / Phonegap verwenden?

Nein, die Symbol- / Begrüßungsbildschirmfunktion war in früheren Versionen von Cordova nicht verfügbar, daher müssen Sie eine neuere Version verwenden. In früheren Versionen hat nur Phonegap Build die Symbole / den Begrüßungsbildschirm verarbeitet, sodass das lokale Erstellen und Behandeln von Symbolen nur mit einem Hook möglich war. Ich kenne die Mindestversion für diese Funktion nicht, aber mit 5.1.1 funktioniert sie sowohl in Cordova als auch in Phonegap cli einwandfrei. Mit Cordova 3.5 hat es bei mir nicht funktioniert.

Bearbeiten : Für Android müssen Sie mindestens 3.5.0 verwenden

Wie kann ich den Erstellungsprozess für Symbole debuggen?

Die CLI verwenden einen CP-Befehl. Wenn Sie einen ungültigen Symbolpfad angeben, wird ein cpFehler angezeigt:

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

Bearbeiten : Sie können cordova build <platform> --verboseProtokolle der Verwendung von cp-Befehlen abrufen, um zu sehen, wo Ihre Symbole kopiert werden

Die Symbole sollten sich gemäß der Konfiguration in einem Ordner befinden. Für mich geht es in vielen Unterordnern in:platforms/android/build/intermediates/res/armv7/debug/drawable-hdpi-v4/icon.png

Dann können Sie die APK finden und als Zip-Archiv öffnen, um zu überprüfen, ob die Symbole vorhanden sind. Sie müssen sich in einem res/drawable*Ordner befinden, da es sich um einen speziellen Ordner für Android handelt.

Wo soll ich die Symbole / Begrüßungsbildschirme in meinem Projekt platzieren?

In vielen Beispielen finden Sie, dass die Symbole / Begrüßungsbildschirme in einem resOrdner deklariert sind . Dies resist ein spezieller Android-Ordner in der Ausgabe-APK, dies bedeutet jedoch nicht, dass Sie einen resOrdner in Ihrem Projekt verwenden müssen.

Sie können Ihr Symbol an einer beliebigen Stelle platzieren, aber der Pfad, den Sie verwenden, muss relativ zum Stamm des Projekts sein , und seien Sie nicht wwwvorsichtig! Dies ist dokumentiert, aber nicht eindeutig, da alle Beispiele verwendet werden resund Sie nicht wissen, wo sich dieser Ordner befindet :(

Ich meine, wenn Sie das Symbol in sich www/icon.pngsetzen, müssen Sie es unbedingt wwwin Ihren Pfad aufnehmen.

Edit Mars 2016 : Nach dem Upgrade meiner Versionen scheinen die Symbole nun relativ zum wwwOrdner zu sein, aber die Dokumentation wurde nicht geändert ( Problem ).

Funktioniert <icon src="icon.png"/>?

Nein, tut es nicht! .

Unter Android schien es früher zu funktionieren (als das Dichteattribut noch nicht unterstützt wurde?), Aber nicht mehr. Siehe diese Cordova-Ausgabe

Unter iOS scheint die Verwendung dieser globalen Deklaration spezifischere Deklarationen zu überschreiben. Seien Sie also vorsichtig und erstellen Sie mit, --verboseum sicherzustellen, dass alles wie erwartet funktioniert.

Kann ich für alle Dichten dieselbe Symbol- / Begrüßungsbildschirmdatei verwenden?

Ja, du kannst. Sie können sogar dieselbe Datei sowohl für das Symbol als auch für den Begrüßungsbildschirm verwenden (nur zum Testen!). Ich habe problemlos eine "große" Icon-Datei mit 65 KB verwendet.

Was ist der Unterschied zwischen der Verwendung des Plattform-Tags und dem Plattform-Attribut?

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

ist das gleiche wie

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

Sollte ich den Lücken-Namespace verwenden, wenn ich Phonegap verwende?

Nach meiner Erfahrung können neue Versionen von Phonegap oder Cordova Symboldeklarationen verstehen, ohne einen gap:XML-Namespace zu verwenden.

Allerdings warte ich hier immer noch auf eine gültige Antwort: Cordova / Phonegap-Plugin füge VS config.xml hinzu

Soweit ich gap:weiß, sind einige Funktionen mit dem Namespace möglicherweise früher in PhonegapBuild verfügbar, dann in Phonegap und werden dann nach Cordova portiert (?)

Ist <preference name="SplashScreen" value="screen" />erforderlich?

Zumindest für Android ist es ja. Ich habe eine Ausgabe mit zusätzlichen Erklärungen eröffnet.

Ist die Reihenfolge der Symboldeklaration wichtig?

Ja tut es! Es hat möglicherweise keine Auswirkungen auf Android, aber nach meinen Tests auf iOS. Dies ist ein unerwartetes und nicht dokumentiertes Verhalten, daher habe ich ein weiteres Problem geöffnet .

Muss ich cordova-plugin-splashscreen?

Ja, dies ist unbedingt erforderlich, wenn der Begrüßungsbildschirm funktionieren soll. Die Dokumentation ist nicht klar ( Problem ) und wir glauben, dass das Plugin nur erforderlich ist, um eine Javascript-API für Begrüßungsbildschirme anzubieten.

Wie kann ich die Größe der Bilder für alle Breiten / Höhen / Dichten schnell ändern?

Es gibt Tools, die Ihnen dabei helfen. Das beste für mich ist http://makeappicon.com/, aber es muss eine E-Mail-Adresse angegeben werden.

Andere mögliche Lösungen sind:

Können Sie mir eine Beispielkonfiguration geben?

Ja. Hier ist meine echteconfig.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>

Eine gute Quelle für Beispiele sind Starter-Kits. Wie Phonegap-Start oder Ionic Starter

Sebastien Lorber
quelle
2
Ich habe ein kleines CLI-Dienstprogramm (unter anderem) erstellt, das das App-Symbol, den Begrüßungsbildschirm und die Vorschau-Generierung https://github.com/mmacmillan/cordova-imaging verwaltet . Ich erwähne dies, weil es von einer Konfigurationsdatei gesteuert wird, die in Bezug auf gut dokumentiert ist die Größen / Abmessungen / Standorte und enthält Links zur plattformspezifischen Dokumentation; Dies kann helfen, die detaillierte Antwort zu ergänzen, für die Sie sich die Zeit genommen haben
Mike MacMillan
Ich habe das alles gemacht, mit Cordova 5.1 werden die Dateien wie erwähnt in die APK-Datei kopiert, aber das Tablet zeigt immer noch kein neues Symbol an. Irgendwelche Ideen?
Gringo Suave
Sie müssen lediglich die alte Version der App deinstallieren und anschließend die neue Version installieren. Dann bemerkte das Tablet, dass sich etwas geändert hatte. So konnte ich das neue Symbol bekommen.
Gringo Suave
1
Was für eine fantastische Antwort! Ich habe Ihren Vorschlag verwendet cordova build android --verbose, um mein Problem zu identifizieren und zu lösen. Vielen Dank!
Sarah
Schöne Antwort Sebastien;) Daumen hoch
Alaeddine
32

Ab Cordova 3.5.0-0.2.6 funktioniert das <icon />Element in config.xml mit den folgenden Einschränkungen:

  1. Das srcAttribut ist ein Pfad relativ zu Ihrem Projektstammordner. Der Issue Tracker über dieses Issue begründet die Änderung.

  2. Das <icon src="..." />Element ohne Auflösung / dpi wird als Symbol dokumentiert, das von allen Plattformen als Standardsymbol verwendet wird. Bei Android-Builds wird das Standardsymbol jedoch nur in den Android-Zeichnungsordner kopiert, ohne dass bestimmte Auflösungen festgelegt wurden. Dadurch wird Ihr benutzerdefiniertes Symbol im /res/drawableOrdner angezeigt, und das Cordova-Standardsymbol mit bestimmten Auflösungen befindet sich in den anderen Ordnern in der endgültigen apk (dh /res/drawable-ldpi). Sie müssen ein Symbolelement config.xmlfür jede Auflösung auf der Android-Plattform hinzufügen .

Befindet sich Ihr Symbolbild beispielsweise im Pfad www/res/img/icon.pngzu Ihrem config.xmlStammprojekt, funktioniert dieses App-Symbol in Android wie folgt :

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

Mit dieser Konfiguration können Sie ein einziges Bildsymbol für alle Auflösungen verwenden, die das Standard-Cordova-Symbol überschreiben, und dies ohne benutzerdefinierte Hooks. Einfach mit bauen cordova build androidsollte den Trick machen.

Ronoaldo Pereira
quelle
Haben Sie einen Link zur Fehlerberichterstattung für Problem 2? Ich habe dieses Problem gerade bei einem neuen Projekt festgestellt und es hat mich zuerst verwirrt. Möchte den Fortschritt verfolgen, um zu wissen, wann er behoben ist, wenn möglich. Prost.
Mike
omg hat es endlich geschafft! Danke für density. Ich wechselte <icon gap:platform="android" gap:qualifier="ldpi" src="www/res/icon/android/icon-36-ldpi.png" />zu<icon gap:platform="android" density="ldpi" src="www/res/icon/android/icon-36-ldpi.png" />
Tha Leang
@ Ronoaldo Periera du bist mein Retter !! <icon ..> Tag für jede Dichte! brillant!!
Hittz
Das Standardsymbol src funktioniert nicht gut für Android, wird also ignoriert! Überprüfen Sie meine Antwort hier: stackoverflow.com/a/31674547/82609
Sebastien Lorber
8

Wenn Sie eine einfach zu bedienende Art und Weise wollen Icons automatisch hinzuzufügen , wenn vor Ort den Bau ( cordova emulate ios, cordova run androidusw.) haben einen Blick auf diesen Kern:

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

Hoffentlich funktioniert dies irgendwann in der Zukunft sofort. Hier ist der relevante Fehlerbericht zum Cordova-Projekt:

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

Linus Unnebäck
quelle
Linus, wie es in meiner Antwort erklärt wird: Ja, es funktioniert jetzt, aber es scheint auch einiges kaputt gemacht zu haben. Überprüfen Sie stackoverflow.com/a/31674547/82609
Sebastien Lorber
4

Sie müssen eine config.xml-Datei erstellen, in die Sie die Symboldatei einfügen sollen

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

Überprüfen Sie dies: https://build.phonegap.com/docs/config-xml

Es gibt iOS-spezifische Symbole

João Pimentel Ferreira
quelle
Meine Konfigurationsdatei enthält bereits alle Symbole. Es wird standardmäßig beim Erstellen eines neuen Phonegap-Projekts erstellt
Markus
2
Funktioniert nicht Es hat mit PG Build funktioniert, aber Cordova 3.x cli berücksichtigt keine in config.xml angegebenen Symbole (noch icon.png & screen.png im Stammverzeichnis). Ich suche auch nach der Antwort auf diese Frage.
Lefnire
Yup config.xml ist nur für PhoneGap Build! weiß jemand wie das geht?!
Michael
Unter Cordova 3.5.0-0.2.6 funktioniert die Unterstützung für Symbole mit einigen Einschränkungen unter Android. Siehe meine Antwort für Details.
Ronoaldo Pereira
4

Da die meisten Antworten hier auf iOS ausgerichtet sind, gibt es hier eine Lösung zum Ändern des Symbols in Android.

Für Android:

Nehmen Sie Änderungen in <Projektspeicherort> \ platform \ android \ ant-build \ res und nicht in <Projektspeicherort> \ platform \ android \ res vor

Bei einigen Personen, die Änderungen am letzteren Speicherort vorgenommen haben, hat dies möglicherweise funktioniert. Nachdem ich jedoch festgestellt habe, dass Phonegap von \ android \ res nach \ android \ ant-build \ res kopiert hat, habe ich mich entschlossen, dort einzuchecken und einen separaten Satz zeichnbarer Ordner mit dem Standard zu finden Phonegap-Symbol.

Das zu ändern hat endlich funktioniert.

Da ich lokal baue und ausführe und Adobe PhoneGap Build nicht verwende, hat das Ändern der Symbole in <Projektspeicherort> \ www \ res \ icon \ android auch nicht funktioniert.

Elixander Chen
quelle
3

Ich verwende Phonegap 3.1.0-0.15.0, da iOS7 die Auflösung auf 120x120px geändert hat. Ich habe dem Projekt gerade eine Datei mit diesen Abmessungen hinzugefügt und dann die Datei info.plist geändert.

  1. Fügen Sie dem Projekt eine 120x120-Datei hinzu, indem Sie mit der rechten Maustaste auf die Projektdatei in Xcode klicken und "Dateien hinzufügen zu" [Ihr Projektname] " auswählen ...
  2. Gehen Sie zur Datei info.plist in Xcode "Resources / [Ihr Projektname] -info.plist".
  3. Unter „Icon - Dateien (iOS 5) / Primary Symbol / Icon - Dateien“ ändern „Artikel 2“ , was auch immer der Dateiname Ihrer Datei hatte (ich meine „icon-120.png genannt , die ich im Projektordner alle anderen Symbole an der Seite platziert , obwohl das keine Rolle spielen sollte)

Weitere Informationen finden Sie hier: http://www.digifloor.com/missing-recommended-icon-file-error-ios-app-13

Um den Begrüßungsbildschirm in iOS zu reparieren, habe ich gerade neue Dateien mit denselben Abmessungen und Dateinamen eingefügt und die alten überschrieben. Denken Sie daran, in Xcode in der Menüleiste auf Produkt> Reinigen zu klicken (Tastenkombination Umschalt + Befehl + K), und es sollte einwandfrei funktionieren! :) :)

Luddig
quelle
3

In Cordova 3.3.1-0.1.2 funktioniert das erwartete Verhalten nicht richtig.

im

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

Es wird klargestellt, dass Sie sie in Ihrem Haupt-WWW-Ordner in einem Ordner namens res und icons ablegen sollen, die einer bestimmten Namenskonvention folgen, anstatt der ursprünglich anpassbaren config.xml-Methode (in der Sie auf eine Datei Ihrer Wahl verweisen). was viel besser war / ist). es sollte dann von dort für jede Plattform dauern und sie in die Plattformen /? android? / res / drawable-? dpi / icon.png legen, aber es macht derzeit kein so korrektes Verhalten ... Fehler.

Ich denke, wir müssen sie für jede Plattform manuell dort ablegen. es müsste natürlich entfernt werden, dass es wieder in den www-Ordner dupliziert wird. Für mich musste ich den Inhalt im Haupt-WWW-Ordner sowieso komplett ersetzen, da es einfach nicht mit Hello World funktionierte, ohne eine Redirect-Index.html zu hacken, um dort einen seltsamen zufälligen Ordner zu finden. Das Ablegen des res-Ordners neben www ist am sinnvollsten, aber was auch immer es für mich zu sein scheint, verursacht durch diese Reihe von kaskadierenden und verwirrenden Designentscheidungen / -fehlern.

MistereeDevlord
quelle
2

In einigen Fällen werden die Symbole in den internen Skripten von Cordova nicht im richtigen Ordner abgelegt. Daher können Sie den F *** Cordova-Roboter anstelle Ihres eigenen Symbols sehen.

Verwenden Sie Hook-Skript.;)

Drei-Haken-dein-Cordovaphonegap-Projekt braucht

Erstellen Sie einen Ordner "after_platform_add" im Hook-Ordner und setzen / ändern Sie das letzte Skript von devgirl.

Vergessen Sie nicht, die Executive-Rechte für das Skript unter Linux festzulegen "chmod 777 <script>"

Viel Glück!

Masood Moshref
quelle
1

Ich habe nur die folgenden Zeilen in die Datei config.xml eingefügt <icon src="www/img/appIcon.png" />

Und es hat ganz gut funktioniert

Ali Sadiq
quelle
Danke. Ich habe versucht, ein Symbol in res / icon.png einzufügen (wie in den Dokumentationsbeispielen ...), aber es hat auf ios nie funktioniert. Ich habe diesen verwirrenden "res" -Ordner endlich aufgegeben und das Symbol unter "www" gesetzt, wie Sie vorgeschlagen haben, und es hat auch für mich wie ein Zauber funktioniert! Dies funktioniert für Cordova 6.0.0. ios Plattform.
Firepol
1

Fügen Sie diesen Code einfach in Ihre Datei config.xml ein

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

z.B:

<icon src="icon.png">

Denken Sie immer daran, dass Sie die Erweiterung .png verwenden müssen

Jobincs
quelle
versuchen Sie,
PNG-
0

Ich bin auch gerade dabei zu verstehen, wie das alles zusammenhängt.

Folgendes habe ich bisher in XCode gefunden, aber ich hoffe, korrigiert oder bestätigt zu werden, wenn meine Annahmen korrekt sind. Ich habe keinen sofort einsatzbereiten Build für xcode von cordova gefunden, der die Symbole korrekt anwendet. Wie Sie habe ich alle in der config.xml aufgelisteten Symbole aktualisiert, aber keine Würfel.

So...

Zuerst aktualisiere ich normalerweise die Datei config.xml im Stammverzeichnis des Projekts mit der Datei in meinem Ordner "www" (dies geschieht aus Ungewissheit, dass die Datei www / config.xml Vorrang hat oder sogar angewendet wird).

Zweitens aktualisiere ich die "Build-Phasen" des Projekts. Erweitern Sie "Bundle-Ressourcen kopieren". Sie haben bereits alle Bilder in "Ressourcen / Symbole", "Ressourcen / Begrüßung" bemerkt. Du kannst entweder:

  • Entfernen Sie alle diese Elemente, um ein Überschreiben Ihrer Bilder zu vermeiden
  • Aktualisieren Sie alle diese Bilder mit Ihren eigenen (Umbenennen in den angegebenen Bildnamen).

Während ich dies ausarbeitete, können Sie möglicherweise Bilder nur minimal über die Registerkarte "Zusammenfassung" aktualisieren.

Ziehen Sie Ihre Bilder per Drag & Drop aus Ihren Res-Ordnern auf das entsprechende Bild auf der Registerkarte "Zusammenfassung". (res / icon / ios -> App-Symbole und res / screen / ios -> Bilder starten). Ich mache es nur für das iPhone, da meine App nur das iPhone ist. Aktivieren Sie "Vorgerendert", wenn kein Glanz angezeigt werden soll.

Aktualisieren Sie dann die "icon.png", auf die in der Plist-Datei des Projekts verwiesen wird: PROJECT_NAME-Info.plist oder auf der Registerkarte "Info", wenn Sie das Projektziel betrachten. Benennen Sie es in "icon-57.png" um (das sich jetzt in Ihrem Projektstamm befindet. Dieser wurde beim Ziehen und Ablegen automatisch zum Stamm hinzugefügt.

Erstellen Sie und Sie sollten ein aktualisiertes App-Symbol.

Sam Tsai
quelle
Ich habe das Projekt mit Cordova 3.0.3 erstellt, aber ich stelle mir vor, dass es mit Phonegap-Builds genauso ist.
Sam Tsai
0

Ich habe nur bemerkt, dass ich gerade meine config.xml geändert habe, um wie Sebastians Beispiel auszusehen.

Etwas, das auch beim Debuggen all dessen hilfreich ist, insbesondere wenn Sie keine lokalen Builds ausführen, ist das Herunterladen der XAP / IPA / APK-Dateien, die aus der PhoneGap-Cloud erstellt wurden, und das Erstellen von Ordnern für jede Datei. Benennen Sie jede Datei mit der Erweiterung .ZIP um und extrahieren Sie den Inhalt jeder Datei in ihre jeweiligen Ordner. Im Grunde können Sie jetzt sehen, was in dem Paket enthalten ist, das an das Telefon gesendet wird.

Auf diese Weise kann ich feststellen, dass bei der Microsoft Phone-Plattform alle meine Versuche, das Symbol oder den Begrüßungsbildschirm zu ersetzen, weitgehend ignoriert werden. Wenn Sie dann ApplicationIcon.png und SplashScreenImage.jpg ersetzen, das Ordnerset erneut komprimieren und es erneut als .XAP-Datei umbenennen, können Sie es auf Ihrem Telefon bereitstellen und es funktioniert einwandfrei. Irgendwie gibt es eine Möglichkeit, den PhoneGap-Build so zu gestalten, dass Ihre icon.png und icon.jpg in diese beiden Dateien umgewandelt werden. Vielleicht ist Masoods Vorschlag hier eine Möglichkeit und verwendet ein Hook-Skript.

Wenn Sie dasselbe für die IPA-Datei (iOS) tun, werden mehrere Dateien wie icon-Something.png auf der übergeordneten Ebene über www angezeigt. Sie scheinen alle leer zu sein.

Dasselbe für die .APK-Datei (Android) zu tun, führt zu einer Reihe von Ordnern mit res / drawable-Etwas, und es scheint, dass in jedem meine icon.png enthalten ist. Es kommt einem Erfolg am nächsten, den ich im Moment behaupten kann.

Michael Blankenship
quelle