常见问题解答:ICON / SPLASH SCREEN (Cordova 5.x / 2015)
我将我的回答作为一个常见问题解答,可以帮助您解决处理图标/启动画面时遇到的许多问题。您可能会发现,就像我一样,文档并不总是非常清晰或最新的。这可能会在可用时发布到 StackOverflow文档。
首先:回答问题
如何使用phonegap添加iOS和Android的自定义应用程序图标?
在您使用的Cordova版本中,icon
标签无用。它甚至在Cordova 3.0.0中都没有记录。您应该使用适合您正在使用的cli的文档版本,而不是最新版本!
根据我在不同版本的文档中所看到的,在3.5.0之前的Android上,icon标签根本不起作用。在3.4.0中,他们仍然建议手动复制文件。
在更新的版本中:对于较新的Cordova版本,您的config.xml
看起来更好。但是,仍然有许多您可能想知道的内容。如果您决定升级,这里是一些有用的修改:
- 您不需要
gap:
命名空间
- 您需要为Android使用
<preference name="SplashScreen" value="screen" />
以下是您在尝试处理图标和启动画面时可能会问自己的更多问题的详细信息:
我可以使用旧版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
。
Edit Mars 2016: 在升级版本后,现在似乎图标相对于www
文件夹,但文档没有更改(问题)
<icon src="icon.png"/>
是否有效?
不,它不起作用!
在Android上,似乎以前可以工作(当密度属性尚未支持时?),但现在不再起作用。请参见此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 plugin add 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