Поширені запитання: ЕКРОН ІКОНИ / РОЗРЯЗУ (Кордова 5.x / 2015)
Я представляю свою відповідь як загальний FAQ, який може допомогти вам вирішити багато проблем, з якими я стикався під час роботи з піктограмами / заставками. Ви можете дізнатися, як і я, що документація не завжди є дуже чіткою та актуальною. Ймовірно, це перейде до документації StackOverflow, коли вона буде доступна.
Перший: відповідь на запитання
Як я можу додати власні піктограми програм для iOS та Android із фонегапом?
У вашій версії Кордоваicon тег марно. Це навіть не задокументовано в Cordova 3.0.0. Вам слід використовувати версію документації, яка відповідає користувачеві, а не останню!
Значок Тег не працює для Android взагалі до версії 3.5.0 в відповідно до тим, що я можу бачити в різних версіях документації. У 3.4.0 вони все ще радять копіювати файли вручну
У новіших версіях : config.xmlвиглядає краще для нових версій Cordova. Однак є ще багато речей, які ви можете захотіти знати. Якщо ви вирішите оновити, ось кілька корисних речей для модифікації:
- Вам не потрібен
gap:простір імен
- Вам потрібен
<preference name="SplashScreen" value="screen" />Android
Ось докладніші запитання, які ви можете задати собі, намагаючись мати справу з піктограмами та заставним екраном:
Чи можу я використовувати стару версію Cordova / Phonegap
Ні, функція піктограми / заставки не була у попередніх версіях Кордови, тому ви повинні використовувати останню версію. У попередніх версіях лише Phonegap Build працював з піктограмами / заставним екраном, тому побудова локально та обробка піктограм була можлива лише за допомогою гачка. Я не знаю мінімальну версію для використання цієї функції, але з 5.1.1 він прекрасно працює в обох Cordova / Phonegap cli. З Cordova 3.5 у мене це не вийшло.
Редагувати : для Android ви повинні використовувати принаймні 3.5.0
Як я можу налагодити процес побудови піктограм?
У cli використовується команда CP. Якщо ви вказали недійсний шлях до піктограми, він відобразить cpпомилку:
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
Редагувати : ви використовуєте cordova build <platform> --verboseдля отримання журналів використання команди cp, щоб побачити, куди копіюються ваші значки
Значки повинні йти в папку відповідно до конфігурації. Для мене це знаходиться в багатьох підпапках:platforms/android/build/intermediates/res/armv7/debug/drawable-hdpi-v4/icon.png
Потім ви можете знайти файл .apk і відкрити його як zip-архів, щоб перевірити наявність піктограм. Вони повинні бути в res/drawable*папці, оскільки це спеціальна папка для Android.
Куди слід помістити піктограми / заставки у своєму проекті?
У багатьох прикладах ви знайдете, що піктограми / заставки відображаються в resпапці. Це resспеціальна папка Android у вихідному файлі .apk, але це не означає, що вам потрібно використовувати resпапку у своєму проекті.
Ви можете розмістити свою піктограму куди завгодно, але шлях, який ви використовуєте, повинен бути відносно кореня проекту , і не wwwтак подбайте! Це задокументовано, але не чітко, оскільки використовуються всі приклади, resі ви не знаєте, де знаходиться ця папка :(
Я маю на увазі, якщо ви покладете піктограму в www/icon.pngвас, абсолютно необхідно включити wwwу ваш шлях.
Редагувати Mars 2016 : після оновлення моїх версій тепер здається, що піктограми відносяться до wwwпапки, але документація не була змінена ( випуск )
Працює <icon src="icon.png"/>?
Ні, це не є! .
На Android, здається, раніше це працювало (коли атрибут щільності ще не підтримувався?), Але більше не. Дивіться цей випуск Кордови
У iOS, здається, використання цієї глобальної декларації може замінити більш конкретні декларації, тому подбайте і будуйте, --verboseщоб переконатися, що все працює належним чином.
Чи можу я використовувати той самий файл піктограми / заставки для всіх щільностей.
Так, ти можеш. Ви навіть можете використовувати один і той же файл як для піктограми, так і для початкового екрана (лише для перевірки!). Я без проблем використав "великий" файл піктограм розміром 65 кб.
Яка різниця при використанні тегу платформи проти атрибута платформи
<icon src="icon.png" platform="android" density="ldpi" />
це те саме, що
<platform name="android">
<icon src="www/stample_icon.png" density="ldpi" />
</platform>
Чи слід використовувати пробіл: імена, якщо використовую Phonegap?
З мого досвіду, нові версії Phonegap або Cordova здатні розуміти оголошення піктограм без використання gap:простору імен xml.
Однак я все ще чекаю дійсної відповіді тут: плагін cordova / phonegap додав VS config.xml
Наскільки я розумію, деякі функції з gap:простором імен можуть бути доступні раніше у PhonegapBuild, потім у Phonegap, а потім переносяться в Кордову (?)
Є чи <preference name="SplashScreen" value="screen" />потрібно?
Принаймні для Android так. Я відкрив випуск із додатковими поясненнями.
Чи має значення порядок декларації значків?
Так! За моїми тестами, це може не мати ніякого впливу на Android, але на iOS. Це несподівана поведінка без документів, тому я відкрив інше питання .
Мені потрібно cordova-plugin-splashscreen?
Так, це абсолютно необхідно, якщо ви хочете, щоб спрацьовуючий екран працював. Документація незрозуміла ( проблема ), і давайте будемо думати, що плагін потрібен лише для того, щоб запропонувати API-інтерфейс javascript із заставкою.
Як я можу швидко змінити розмір зображень на всю ширину / висоту / щільність
Для цього вам допоможуть інструменти. Найкращий для мене - http://makeappicon.com/, але для цього потрібно вказати адресу електронної пошти.
Інші можливі рішення:
Чи можете ви дати мені приклад конфігурації?
Так. Ось моя справжняconfig.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>
Хорошим джерелом прикладів є стартові набори. Як фонегап-старт або іонічний стартер