如何在phonegap项目中添加app图标？

Question

我使用默认的config.xml创建了一个新的phonegap(v 3.0.0-0.14.0)项目,然后添加了iOS和Android平台.

配置包含所有平台图标的所有路径.

我已经覆盖了iOS和Android的默认图标,因此路径和名称仍然匹配那些png.

在模拟器中运行时,图标不会显示.我在xCode中查找了它,它告诉我图标的"Resources"文件夹仍然包含phonegap默认图标.与Android相同.

我究竟做错了什么？

如何使用phonegap为iOS和Android添加自定义应用图标？

谢谢

我的config.xml

<icon src="icon.png" />

<icon gap:density="ldpi" gap:platform="android" src="res/icon/android/icon-36-ldpi.png" />
<icon gap:density="mdpi" gap:platform="android" src="res/icon/android/icon-48-mdpi.png" />
<icon gap:density="hdpi" gap:platform="android" src="res/icon/android/icon-72-hdpi.png" />
<icon gap:density="xhdpi" gap:platform="android" src="res/icon/android/icon-96-xhdpi.png" />

<icon gap:platform="ios" height="57" src="res/icon/ios/icon-57.png" width="57" />
<icon gap:platform="ios" height="72" src="res/icon/ios/icon-72.png" width="72" />
<icon gap:platform="ios" height="114" src="res/icon/ios/icon-57-2x.png" width="114" />
<icon gap:platform="ios" height="144" src="res/icon/ios/icon-72-2x.png" width="144" />

<icon gap:platform="blackberry" src="res/icon/blackberry/icon-80.png" />
<icon gap:platform="blackberry" gap:state="hover" src="res/icon/blackberry/icon-80.png" />

<icon gap:platform="webos" src="res/icon/webos/icon-64.png" />
<icon gap:platform="winphone" src="res/icon/windows-phone/icon-48.png" />
<icon gap:platform="winphone" gap:role="background" src="res/icon/windows-phone/icon-173.png" />

Answer 1

幸运的是,在关于启动图像的文档中有一点点,这使我走上了获取图标图像的正确位置的道路.所以这就是它.

放置文件的位置 使用命令行界面"cordova build ios"构建项目后,您应该在platforms/ios/文件夹中拥有完整的iOS应用程序文件结构.

在该文件夹中是一个包含您的应用程序名称的文件夹.其中包含一个resources/目录,您可以在其中找到icons/和splashscreen/文件夹.

在icons文件夹中,您将找到四个图标文件(57px和72px,每个都是常规版本和@ 2x版本).这些是您目前看到的Phonegap占位符图标.

该怎么办

您所要做的就是将图标文件保存在此文件夹中.所以那是:

YourPhonegapProject/Platforms/ios/YourAppName/Resources/icons

对于splashscreen文件也是如此.

笔记

1. 将文件放在那里后,使用cordova build iosAND 重新生成项目使用xCode的"清洁产品"菜单命令.没有这个,你仍然会看到Phonegap占位符.

2. 最明智的做法是以iOS/Apple方式重命名文件(即icon-72@2x.png等),而不是编辑info.plist或config.xml中的名称.至少那对我有用.

3. 顺便说一下,忽略为config.xml(即<icon gap:platform="ios" height="114" src="res/icon/ios/icon-57-2x.png" width="114" />)中的图标指定的奇怪路径和奇怪的文件名.我刚刚将这些定义留在那里,即使我的114px图标被命名icon@2x.png而不是,我的图标也显示得很好icon-57-2x.png.

4. 不要使用config.xml来防止Apple对图标的光泽效果.相反,勾选xCode中的框(单击左侧导航栏中的项目标题,在Target标题下选择您的应用程序,然后向下滚动到图标部分).

Answer 2

常见问题:ICON/SPLASH SCREEN(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上,它似乎以前曾经工作过(当时还不支持密度属性？)但现在还没有了.请参阅此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,我应该使用gap:namespace吗？

根据我的经验,新版本的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/但它需要提供一个电子邮件地址.

其他可能的解决方案是

• AndroidAssetStudio
• https://gist.github.com/LinusU/7515016
• 科尔多瓦图标

你能给我一个示例配置吗？

是.这是我的真实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

Answer 3

从Cordova 3.5.0-0.2.6开始<icon />,config.xml中的元素可以使用以下警告:

1. 该src属性是相对于项目根文件夹的路径.问题跟踪器关于这个问题的原因是为什么要改变.

2. <icon src="..." />没有resolution/dpi 的元素被记录为所有平台用作默认图标的图标.但是,在Android版本中,默认图标仅复制到android drawable文件夹,没有设置特定的分辨率.这使您自定义图标出现在/res/drawable文件夹中,并且具有特定分辨率的cordova默认图标存在于最终apk(即/res/drawable-ldpi)中的其他文件夹中.您必须config.xml在android平台上为每个分辨率添加一个图标元素.

例如,如果您的图标图像位于www/res/img/icon.png相对于根项目的路径中,则此行config.xml将使您在Android中的应用图标工作:

<!-- Default application icon -->
<icon src="www/res/img/icon.png" />
<!--
    Default icon should work, but cordova don't overwrite
    the default on all densities
-->
<icon src="www/res/img/icon.png" platform="android" density="ldpi" />
<icon src="www/res/img/icon.png" platform="android" density="mdpi" />
<icon src="www/res/img/icon.png" platform="android" density="hdpi" />
<icon src="www/res/img/icon.png" platform="android" density="xhdpi" />

使用该配置,您可以为所有分辨率创建一个图像图标,覆盖默认的cordova图标,而无需自定义连接.简单地构建cordova build android应该做的伎俩.

Answer 4

如果你想要一个简单易用的方式在本地建立时(自动添加图标cordova emulate ios,cordova run android等),看看这个要点:

https://gist.github.com/LinusU/7515016

希望这将在未来的某个时候开始工作,这是关于Cordova项目的相关错误报告:

https://issues.apache.org/jira/browse/CB-2606

Answer 5

您必须创建一个 config.xml 文件，在其中放置图标文件

<?xml version="1.0" encoding="ISO-8859-1" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
   xmlns:gap = "http://phonegap.com/ns/1.0"
   id        = "example"
   version    = "1.0.0">

   <icon src="icon.png" />
</widget>

检查这个： https: //build.phonegap.com/docs/config-xml

有 iOS 特定图标