常见问题解答:ICON /飞溅画面(Cordova 5.x / 2015)
我以一般常见问题解答的形式提出我的答案,可以帮助您解决在处理图标/启动画面时遇到的许多问题。您可能会像我一样发现文档并不总是很清晰也不是最新的。如果可能的话,这可能会转到StackOverflow文档。
第一:回答问题
如何通过phonegap为iOS和Android添加自定义应用程序图标?
在您的Cordova版本中,该icon
标签无用。甚至在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
是输出APK中的特殊Android文件夹,但这并不意味着您必须res
在项目中使用文件夹。
您可以将图标放置在任何位置,但是您使用的路径必须相对于项目的根目录,不要www
那么小心!对此进行了记录,但由于所有示例都在使用中,res
并且您不知道此文件夹在何处,因此不清楚(:
我的意思是,如果您www/icon.png
绝对将图标放入其中,则必须包含www
在路径中。
编辑Mars 2016:升级我的版本后,现在看来图标是相对于www
文件夹的,但是文档并未更改(问题)
有<icon src="icon.png"/>
工作吗?
不,不是的!。
在Android上,它似乎曾经可以使用(以前还不支持density属性吗?),但现在不再可用。看到此Cordova问题
在iOS上,似乎使用此全局声明可能会覆盖更具体的声明,因此请小心并进行构建--verbose
以确保一切正常。
我可以为所有密度使用相同的图标/启动画面文件吗?
是的你可以。您甚至可以将相同的文件用于图标和初始屏幕(仅用于测试!)。我使用了65kb的“大”图标文件,没有任何问题。
使用platform标签与platform属性有什么区别
<icon src="icon.png" platform="android" density="ldpi" />
是相同的
<platform name="android">
<icon src="www/stample_icon.png" density="ldpi" />
</platform>
如果使用Phonegap,我应该使用gap:名称空间吗?
以我的经验,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.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