คำถามที่พบบ่อย: ICON / SPLASH SCREEN (Cordova 5.x / 2015)
ฉันนำเสนอคำตอบของฉันเป็นคำถามที่พบบ่อยทั่วไปซึ่งอาจช่วยคุณแก้ปัญหาต่างๆที่ฉันพบขณะจัดการกับไอคอน / หน้าจอเริ่มต้น คุณอาจพบว่าเอกสารประกอบไม่ชัดเจนหรือเป็นปัจจุบันเสมอไป สิ่งนี้อาจไปที่เอกสาร StackOverflowเมื่อมี
ขั้นแรก: ตอบคำถาม
ฉันจะเพิ่มไอคอนแอพที่กำหนดเองสำหรับ iOS และ Android ด้วย phonegap ได้อย่างไร
ใน Cordova theiconแท็กจะไม่ได้ผล ไม่มีแม้แต่เอกสารใน Cordova 3.0.0 คุณควรใช้เวอร์ชันเอกสารที่เหมาะกับ cli ที่คุณใช้ไม่ใช่เวอร์ชันล่าสุด!
ไอคอนแท็กไม่ทำงานสำหรับ Android ที่ทุกคนก่อนรุ่น 3.5.0 ตามสิ่งที่ฉันสามารถมองเห็นในรุ่นที่แตกต่างกันของเอกสาร ใน 3.4.0 ยังคงแนะนำให้คัดลอกไฟล์ด้วยตนเอง
ในเวอร์ชันที่ใหม่กว่า : ของคุณconfig.xmlดูดีกว่าสำหรับ Cordova เวอร์ชันใหม่ อย่างไรก็ตามยังมีอีกหลายสิ่งที่คุณอาจต้องการทราบ หากคุณตัดสินใจที่จะอัปเกรดสิ่งที่เป็นประโยชน์ในการปรับเปลี่ยนมีดังนี้:
- คุณไม่จำเป็นต้องมี
gap:เนมสเปซ
- คุณต้องการ
<preference name="SplashScreen" value="screen" />สำหรับ Android
นี่คือรายละเอียดเพิ่มเติมของคำถามที่คุณอาจถามตัวเองเมื่อพยายามจัดการกับไอคอนและหน้าจอเริ่มต้น:
ฉันสามารถใช้ Cordova / Phonegap เวอร์ชันเก่าได้หรือไม่
ไม่คุณลักษณะไอคอน / หน้าจอเริ่มต้นไม่ได้อยู่ใน Cordova เวอร์ชันเก่าดังนั้นคุณต้องใช้เวอร์ชันล่าสุด ในเวอร์ชันก่อนหน้ามีเพียง 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 ดูเหมือนว่าจะเคยใช้งานได้มาก่อน (เมื่อยังไม่รองรับแอตทริบิวต์ความหนาแน่น?) แต่ไม่ใช่อีกต่อไป ดูปัญหา Cordova นี้
ใน iOS ดูเหมือนว่าการใช้คำประกาศระดับโลกนี้อาจลบล้างการประกาศที่เฉพาะเจาะจงมากขึ้นดังนั้นโปรดดูแลและสร้างด้วย--verboseเพื่อให้แน่ใจว่าทุกอย่างทำงานได้ตามที่คาด
ฉันสามารถใช้ไอคอน / ไฟล์หน้าจอสแปลชเดียวกันสำหรับความหนาแน่นทั้งหมดได้หรือไม่
ใช่คุณสามารถ. คุณยังสามารถใช้ไฟล์เดียวกันสำหรับทั้งไอคอนและหน้าจอเริ่มต้น (เพื่อทดสอบ!) ฉันใช้ไฟล์ไอคอน "ใหญ่" ขนาด 65kb โดยไม่มีปัญหาใด ๆ
อะไรคือความแตกต่างเมื่อใช้แท็กแพลตฟอร์มเทียบกับแอตทริบิวต์แพลตฟอร์ม
<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 จากนั้นจะถูกย้ายไปยัง Cordova (?)
ถูก<preference name="SplashScreen" value="screen" />ต้อง?
อย่างน้อยก็สำหรับ Android ใช่แล้ว ฉันเปิดปัญหาพร้อมคำอธิบายเพิ่มเติม
คำสั่งประกาศไอคอนมีความสำคัญหรือไม่?
ใช่! อาจไม่มีผลกระทบใด ๆ กับ Android แต่มีผลกับ iOS ตามการทดสอบของฉัน นี้เป็นพฤติกรรมที่ไม่คาดคิดและไม่มีเอกสารดังนั้นผมจึงเปิดปัญหาอื่น
ฉันต้องการcordova-plugin-splashscreen?
ใช่สิ่งนี้จำเป็นอย่างยิ่งหากคุณต้องการให้หน้าจอเริ่มต้นทำงาน เอกสารประกอบไม่ชัดเจน ( ปัญหา ) และขอให้เราคิดว่าปลั๊กอินจำเป็นเพื่อเสนอ javascript API หน้าจอเริ่มต้น
ฉันจะปรับขนาดภาพสำหรับความกว้าง / ความสูง / ความหนาแน่นทั้งหมดอย่างรวดเร็วได้อย่างไร
มีเครื่องมือที่จะช่วยให้คุณทำเช่นนั้นได้ สิ่งที่ดีที่สุดสำหรับฉันคือhttp://makeappicon.com/แต่ต้องระบุที่อยู่อีเมล
วิธีแก้ปัญหาอื่น ๆ ที่เป็นไปได้ ได้แก่ :
คุณช่วยยกตัวอย่าง config ได้ไหม
ใช่. นี่คือของจริงของฉัน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>
แหล่งตัวอย่างที่ดีคือชุดเริ่มต้น เช่นเดียวกับphonegap-startหรือIonic starter