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="info@x.co" 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