SSS: İKON / SPLASH EKRANI (Cordova 5.x / 2015)
Cevabımı, simgeler / açılış ekranlarıyla uğraşırken karşılaştığım birçok sorunu çözmenize yardımcı olabilecek genel bir SSS olarak sunuyorum. Benim gibi belgelerin her zaman çok net ve güncel olmadığını öğrenebilirsiniz. Bu, muhtemelen mevcut olduğunda StackOverflow belgelerine gidecektir .
İlk olarak: soruyu cevaplamak
Phonegap ile iOS ve Android için özel uygulama simgelerini nasıl ekleyebilirim?
Cordova sizin versiyonundaicon etiketi işe yaramaz. Cordova 3.0.0'da bile belgelenmemiştir. En son sürümü değil, kullandığınız cli'ye uyan belge sürümünü kullanmalısınız!
Simge etiketi Ben belgelerin farklı versiyonlarda görebilirsiniz neye göre sürümü 3.5.0 önce hiç Android için çalışmaz. 3.4.0'da hala dosyaları manuel olarak kopyalamanızı tavsiye ediyorlar
Daha yeni versiyonlarda : config.xmldaha yeni Cordova versiyonları için daha iyi görünüyorsunuz. Ancak yine de bilmek isteyebileceğiniz birçok şey var. Yükseltmeye karar verirseniz, burada değiştirebileceğiniz bazı yararlı şeyler vardır:
- Buna gerek yok
gap:ad
<preference name="SplashScreen" value="screen" />Android'e ihtiyacınız var
Simgeler ve açılış ekranı ile uğraşırken kendinize sorabileceğiniz soruların daha fazla detayı aşağıda verilmiştir:
Cordova / Phonegap'in eski bir sürümünü kullanabilir miyim
Hayır, simge / açılış ekranı özelliği Cordova'nın eski sürümlerinde yoktu, bu nedenle en son sürümü kullanmalısınız. Eski sürümlerde, simgeleri / açılış ekranını yalnızca Phonegap Build işliyordu, bu nedenle yerel olarak oluşturmak ve simgeleri kullanmak yalnızca bir kancayla mümkündü. Bu özelliği kullanmak için minimum sürümü bilmiyorum ama 5.1.1 ile hem Cordova / Phonegap cli'de iyi çalışıyor. Cordova 3.5 ile benim için işe yaramadı.
Düzenleme : Android için en az 3.5.0 kullanmalısınız
Simgeler hakkındaki derleme sürecinde nasıl hata ayıklayabilirim?
Cli bir CP komutu kullanır. Geçersiz bir simge yolu sağlarsanız, bir cphata gösterecektir :
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
Düzenleme : cordova build <platform> --verbosesimgelerinizin nereye kopyalandığını görmek için cp komut kullanım günlüklerini almak için kullanmanız gerekir
Simgeler, yapılandırmaya göre bir klasöre gitmelidir. Benim için birçok alt klasöre giriyor:platforms/android/build/intermediates/res/armv7/debug/drawable-hdpi-v4/icon.png
Ardından APK'yi bulabilir ve simgelerin mevcut olup olmadığını kontrol etmek için bir zip arşivi olarak açabilirsiniz. Android için özel bir res/drawable*klasör olduğu için bir klasörde olmalılar .
Simgeleri / açılış ekranlarını projemde nereye koymalıyım?
Birçok örnekte, simgelerin / açılış ekranlarının bir resklasör içinde açıklandığını göreceksiniz . Bu res, çıktı APK'sindeki özel bir Android klasörüdür, ancak resprojenizde bir klasör kullanmanız gerektiği anlamına gelmez .
Simgenizi istediğiniz yere koyabilirsiniz, ancak kullandığınız yolun projenin köküne göre olması gerekir ve o wwwkadar dikkatli olmayın ! Bu belgelenmiştir, ancak net değildir çünkü tüm örnekler kullanılmaktadır resve bu klasörün nerede olduğunu bilmiyorsunuz :(
Demek istediğim, ikonu içine koyarsan www/icon.pngkesinlikle wwwyoluna dahil etmelisin .
Mars 2016'yı Düzenle : Sürümlerimi yükselttikten sonra, artık simgelerin wwwklasöre göre olduğu, ancak belgelerin değiştirilmediği görülüyor ( sorun )
Çalışıyor mu <icon src="icon.png"/>?
Hayır değil! .
Android'de daha önce çalışıyormuş gibi görünüyor (yoğunluk özelliği henüz desteklenmediğinde?) Ama artık değil. Bu Cordova sorununa bakın
İOS'ta, bu genel bildirimi kullanmak daha özel bildirimleri geçersiz kılabilir , bu nedenle --verboseher şeyin beklendiği gibi çalıştığından emin olmak için dikkatli olun ve geliştirin .
Tüm yoğunluklar için aynı simge / açılış ekranı dosyasını kullanabilir miyim?
Evet yapabilirsin. Aynı dosyayı hem simge hem de açılış ekranı için bile kullanabilirsiniz (sadece test etmek için!). 65kb'lik "büyük" bir simge dosyasını sorunsuz bir şekilde kullandım.
Platform etiketi ile platform özelliği arasındaki fark nedir?
<icon src="icon.png" platform="android" density="ldpi" />
aynıdır
<platform name="android">
<icon src="www/stample_icon.png" density="ldpi" />
</platform>
Phonegap kullanıyorsam boşluğu: ad alanını kullanmalı mıyım?
Tecrübelerime göre Phonegap veya Cordova'nın yeni sürümlerinin her ikisi de herhangi bir gap:xml ad alanı kullanmadan simge bildirimlerini anlayabiliyor .
Yine de burada geçerli bir cevap bekliyorum: cordova / phonegap eklentisi VS config.xml ekle
Anladığım kadarıyla, gap:ad alanına sahip bazı özellikler daha önce PhonegapBuild'de, ardından Phonegap'ta ve ardından Cordova'ya (?)
Is <preference name="SplashScreen" value="screen" />gerekli?
En azından Android için evet öyle. Ek açıklamalar içeren bir sorun açtım .
Simge bildirim sırası önemli mi?
Evet öyle! Android üzerinde herhangi bir etkisi olmayabilir, ancak testlerime göre iOS'ta var. Bu beklenmedik ve belgelenmemiş bir davranış, bu yüzden başka bir konu açtım .
İhtiyacım var cordova-plugin-splashscreenmı
Evet, açılış ekranının çalışmasını istiyorsanız bu kesinlikle gereklidir. Belgeler net değil ( yayın ) ve eklentinin yalnızca bir açılış ekranı javascript API'si sunmak için gerekli olduğunu düşünelim.
Resimleri tüm genişlik / yükseklik / yoğunluklar için hızlı bir şekilde nasıl yeniden boyutlandırabilirim
Bunu yapmanıza yardımcı olacak araçlar var. Benim için en iyisi http://makeappicon.com/ ama bir e-posta adresi sağlamayı gerektiriyor.
Diğer olası çözümler şunlardır:
Bana bir örnek yapılandırma verebilir misiniz?
Evet. İşte benim gerçekconfig.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>
İyi bir örnek kaynağı başlangıç kitleridir. Gibi PhoneGap-başlangıcında veya İon marş