常见问题解答:图标 / 闪屏 (Cordova 5.x / 2015)
我将我的回答作为一般常见问题解答,它可以帮助您解决我在处理图标/启动画面时遇到的许多问题。您可能会像我一样发现文档并不总是很清楚也不是最新的。这可能会在可用时转到StackOverflow 文档。
第一:回答问题
如何使用 phonegap 添加适用于 iOS 和 Android 的自定义应用程序图标?
在您的 Cordova 版本中,该icon
标签是无用的。它甚至没有记录在 Cordova 3.0.0 中。您应该使用适合您正在使用的 cli 的文档版本,而不是最新版本!
根据我在不同版本的文档中看到的内容,图标标签在 3.5.0 版本之前根本不适用于 Android。在 3.4.0 中,他们仍然建议手动复制文件
在较新的版本中:config.xml
较新的 Cordova 版本看起来更好。但是,您可能还想知道很多事情。如果您决定升级,这里有一些有用的东西需要修改:
- 你不需要
gap:
命名空间
- 你需要
<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
在您的路径中。
编辑 Mars 2016:升级我的版本后,现在图标似乎与www
文件夹相关,但文档没有更改(问题)
<icon src="icon.png"/>
行得通吗?
不,不是的!.
在 Android 上,它似乎以前可以工作(当密度属性还不支持的时候?)但现在不行了。看到这个科尔多瓦问题
在 iOS 上,似乎使用此全局声明可能会覆盖更具体的声明,因此请注意并构建--verbose
以确保一切按预期工作。
我可以为所有密度使用相同的图标/启动屏幕文件吗?
是的你可以。您甚至可以对图标和启动屏幕使用相同的文件(只是为了测试!)。我使用了一个 65kb 的“大”图标文件,没有任何问题。
使用平台标签与平台属性有什么区别
<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