Câu hỏi thường gặp: MÀN HÌNH ICON / SPLASH (Cordova 5.x / 2015)
Tôi trình bày câu trả lời của mình dưới dạng Câu hỏi thường gặp chung có thể giúp bạn giải quyết nhiều vấn đề tôi gặp phải khi xử lý các biểu tượng / màn hình giật gân. Bạn có thể nhận ra như tôi rằng tài liệu không phải lúc nào cũng rõ ràng và cũng không cập nhật. Điều này có thể sẽ chuyển đến tài liệu StackOverflow khi có sẵn.
Đầu tiên: trả lời câu hỏi
Làm cách nào để thêm các biểu tượng ứng dụng tùy chỉnh cho iOS và Android với phonegap?
Trong phiên bản Cordova của bạn, iconthẻ này vô dụng. Nó thậm chí không được ghi lại trong Cordova 3.0.0. Bạn nên sử dụng phiên bản tài liệu phù hợp với cli bạn đang sử dụng chứ không phải phiên bản mới nhất!
Các biểu tượng thẻ không hoạt động dành cho Android tại tất cả trước khi phiên bản 3.5.0 theo những gì tôi có thể nhìn thấy trong các phiên bản khác nhau của tài liệu. Trong 3.4.0, họ vẫn khuyên bạn nên sao chép thủ công các tệp
Trong các phiên bản mới hơn : của bạn config.xmltrông đẹp hơn cho các phiên bản Cordova mới hơn. Tuy nhiên vẫn còn nhiều điều bạn có thể muốn biết. Nếu bạn quyết định nâng cấp, đây là một số điều hữu ích cần sửa đổi:
- Bạn không cần
gap:không gian tên
- Bạn cần
<preference name="SplashScreen" value="screen" />cho Android
Dưới đây là chi tiết hơn về các câu hỏi bạn có thể tự hỏi khi cố gắng xử lý các biểu tượng và màn hình giật gân:
Tôi có thể sử dụng phiên bản cũ của Cordova / Phonegap không
Không, tính năng biểu tượng / màn hình giật gân không có trong các phiên bản cũ của Cordova, vì vậy bạn phải sử dụng phiên bản gần đây. Trong các phiên bản cũ, chỉ có Phonegap Build mới xử lý các biểu tượng / màn hình giật gân nên việc xây dựng cục bộ và xử lý các biểu tượng chỉ có thể thực hiện được với một hook. Tôi không biết phiên bản tối thiểu để sử dụng tính năng này nhưng với 5.1.1, nó hoạt động tốt ở cả Cordova / Phonegap cli. Với Cordova 3.5, nó không hoạt động với tôi.
Chỉnh sửa : đối với Android, bạn phải sử dụng ít nhất 3.5.0
Làm cách nào để gỡ lỗi quy trình xây dựng về các biểu tượng?
Cli sử dụng lệnh CP. Nếu bạn cung cấp một đường dẫn biểu tượng không hợp lệ, nó sẽ hiển thị cplỗi:
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
Chỉnh sửa : bạn có quyền sử dụng cordova build <platform> --verboseđể lấy nhật ký sử dụng lệnh cp để xem nơi các biểu tượng của bạn được sao chép
Các biểu tượng sẽ nằm trong một thư mục theo cấu hình. Đối với tôi, nó nằm trong nhiều thư mục con trong:platforms/android/build/intermediates/res/armv7/debug/drawable-hdpi-v4/icon.png
Sau đó, bạn có thể tìm thấy APK và mở nó dưới dạng tệp nén zip để kiểm tra các biểu tượng hiện có. Chúng phải nằm trong một res/drawable*thư mục vì đó là một thư mục đặc biệt dành cho Android.
Tôi nên đặt các biểu tượng / màn hình giật gân ở đâu trong dự án của mình?
Trong nhiều ví dụ, bạn sẽ thấy các biểu tượng / màn hình giật gân được khai báo bên trong một resthư mục. Đây reslà một thư mục Android đặc biệt trong APK đầu ra, nhưng nó không có nghĩa là bạn phải sử dụng một resthư mục trong dự án của mình.
Bạn có thể đặt biểu tượng của mình ở bất cứ đâu, nhưng đường dẫn bạn sử dụng phải liên quan đến gốc của dự án , và đừng wwwquá quan tâm! Đây là tài liệu, nhưng không rõ ràng vì tất cả các ví dụ đang sử dụng resvà bạn không biết thư mục này ở đâu :(
Ý tôi là nếu bạn đặt biểu tượng vào www/icon.pngbạn thì tuyệt đối phải đưa wwwvào con đường của bạn.
Sửa Mars 2016 : sau khi nâng cấp phiên bản của tôi, bây giờ có vẻ như các biểu tượng có liên quan đến wwwthư mục nhưng tài liệu chưa được thay đổi ( vấn đề )
Có <icon src="icon.png"/>hiệu quả không?
Không nó không! .
Trên Android, có vẻ như nó đã từng hoạt động trước đây (khi thuộc tính mật độ chưa được hỗ trợ?) Nhưng không còn nữa. Xem vấn đề Cordova này
Trên iOS, có vẻ như việc sử dụng khai báo toàn cục này có thể ghi đè các khai báo cụ thể hơn, vì vậy hãy cẩn thận và xây dựng --verboseđể đảm bảo mọi thứ hoạt động như mong đợi.
Tôi có thể sử dụng cùng một biểu tượng / tệp màn hình giật gân cho tất cả các mật độ không.
Có bạn có thể. Bạn thậm chí có thể sử dụng cùng một tệp cho cả biểu tượng và màn hình giật gân (chỉ để kiểm tra!). Tôi đã sử dụng một tệp biểu tượng "lớn" 65kb mà không có vấn đề gì.
Sự khác biệt khi sử dụng thẻ nền tảng so với thuộc tính nền tảng
<icon src="icon.png" platform="android" density="ldpi" />
giống như
<platform name="android">
<icon src="www/stample_icon.png" density="ldpi" />
</platform>
Tôi có nên sử dụng gap: namespace nếu sử dụng Phonegap không?
Theo kinh nghiệm của tôi, các phiên bản Phonegap hoặc Cordova mới đều có thể hiểu các khai báo biểu tượng mà không cần sử dụng bất kỳ gap:không gian tên xml nào .
Tuy nhiên, tôi vẫn đang chờ câu trả lời hợp lệ ở đây: plugin cordova / phonegap thêm VS config.xml
Theo như tôi hiểu, một số tính năng với gap:không gian tên có thể có sẵn trước đó trong PhonegapBuild, sau đó trong Phonegap và sau đó được chuyển sang Cordova (?)
Là <preference name="SplashScreen" value="screen" />bắt buộc?
Ít nhất là đối với Android thì có. Tôi đã mở một vấn đề với các giải thích bổ sung.
Thứ tự khai báo biểu tượng có quan trọng không?
Vâng, nó có! Nó có thể không ảnh hưởng đến Android nhưng nó có trên iOS theo thử nghiệm của tôi. Đây là hành vi không mong muốn và không có giấy tờ nên tôi đã mở một vấn đề khác .
Tôi có cần cordova-plugin-splashscreenkhông?
Có, điều này hoàn toàn bắt buộc nếu bạn muốn màn hình giật gân hoạt động. Tài liệu không rõ ràng ( vấn đề ) và chúng ta hãy nghĩ rằng plugin chỉ được yêu cầu để cung cấp API javascript cho màn hình giật gân.
Làm cách nào để thay đổi kích thước hình ảnh cho tất cả chiều rộng / chiều cao / mật độ một cách nhanh chóng
Có những công cụ giúp bạn làm điều đó. Địa chỉ tốt nhất đối với tôi là http://makeappicon.com/ nhưng nó yêu cầu cung cấp địa chỉ email.
Các giải pháp khả thi khác là:
Bạn có thể cho tôi một cấu hình ví dụ?
Đúng. Đây là thật của tôiconfig.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>
Một nguồn ví dụ tốt là bộ dụng cụ khởi động. Như phonegap-start hoặc Ionic starter