如何在PhoneGap项目中添加应用程序图标?

86

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

config文件包含了所有平台图标的路径。

我已经覆盖了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" />

4
这是吗?本地构建忽略配置文件了吗?https://dev59.com/T2Up5IYBdhLWcg3w1aF7 - Markus
马库斯是正确的,他的评论应该作为一个答案。 - drodsou
1
我花了一些时间制作了一个关于调试/使图标工作(cordova 5.1.1)的常见问题解答。请查看https://dev59.com/qmMm5IYBdhLWcg3wKsgj#31674547。 - Sebastien Lorber
14个回答

67

幸运的是文档中有一部分关于闪屏图片的内容,这使我找到了正确的图标位置。以下是具体操作:

文件保存位置 使用命令行界面“cordova build ios”构建项目后,您应该可以在platforms/ios/ 文件夹中看到 iOS 应用程序的完整文件结构。

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

icons/ 文件夹中,您将找到四个图标文件(分别为 57px 和 72 px 的常规和 @2x 版本)。这些是迄今为止您看到的 Phonegap 占位符图标。

操作步骤

您所要做的就是将图标文件保存在此文件夹中。即:

YourPhonegapProject/Platforms/ios/YourAppName/Resources/icons

闪屏文件也是同样的操作。

注意事项

  1. 将文件放置在该位置后,使用 cordova build ios 重新构建项目,并使用 xCode 的“清理产品”菜单命令。否则,您仍然会看到 Phonegap 占位符。

  2. 最好按照 iOS/Apple 的方式重新命名您的文件(例如 icon-72@2x.png 等),而不是在 info.plist 或 config.xml 中编辑文件名。至少对我而言是有效的。

  • 顺便提一下,在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,但图标显示得很好。

  • 不要使用config.xml来防止苹果对图标的光泽效果。相反,在xCode中勾选一个框(点击左侧导航列中的项目标题,在Target标题下选择您的应用程序,并向下滚动到图标部分)。


  • 不在config.xml中留下文件名会破坏PhoneGap Build服务的构建吗?这只能工作是因为本地构建正在忽略config.xml。如果PhoneGap决定读取它,那该怎么办?我建议使用某种构建过程来复制这些文件。 - Markus
    1
    嗨,马库斯,我没有使用 Phonegap Build 服务的经验(除了在尝试了一下但失败后感到困惑)。因此,我无法评判你的评论,但我会相信你的话。因此,我的回答只针对那些自己进行构建的人。 - Wytze
    1
    这个答案已经过时了(但对于3.0.0仍然有效)。不再需要手动处理。请查看Edge文档和我的答案,链接在这里https://dev59.com/qmMm5IYBdhLWcg3wKsgj#31674547。 - Sebastien Lorber

    47

    常见问题解答: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-startIonic starter


    2
    我建立了一个小的CLI实用程序(其中包括许多其他实用程序),可以处理应用图标、启动画面和预览生成等功能https://github.com/mmacmillan/cordova-imaging。我提到这个工具是因为它是由配置文件驱动的,该文件非常详细地记录了尺寸/维度/位置,并包含平台特定文档的链接;这可能有助于补充您花时间提供的详细答案。 - Mike MacMillan
    我使用 Cordova 5.1 完成了所有操作,文件按照你提到的方式被复制到了 .apk 中,但平板电脑仍然没有显示新图标。有什么想法吗? - Gringo Suave
    需要做的是卸载旧版本的应用程序,然后安装新版本。然后平板电脑会注意到有些东西发生了变化。因此,我能够得到新的图标。 - Gringo Suave
    1
    太棒了!我使用了你建议的 cordova build android --verbose 命令来识别和解决我的问题。谢谢! - Sarah
    我能在所有密度上使用相同的图标/启动画面文件吗:可以。但是,使用PGB cli-6.3时,这并不起作用。所有尺寸与预期文件大小不匹配的图标都将设置为通用pgb图标。 - Yaron
    显示剩余2条评论

    32
    从 Cordova 3.5.0-0.2.6 开始,config.xml 中的 <icon /> 元素适用于以下情况:
    1. src 属性是相对于项目根文件夹的路径。关于此问题的原因,请参阅问题跟踪器。

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

    例如,如果您的图标图片位于相对于根项目的路径 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 构建即可实现。


    你们有关于问题2的错误报告链接吗?我在一个新项目中遇到了这个问题,一开始让我很困惑。如果可能的话,我想跟进进展,知道何时会修复。谢谢。 - Mike
    哦我的天终于搞定了!感谢 density。我把 <icon gap:platform="android" gap:qualifier="ldpi" src="www/res/icon/android/icon-36-ldpi.png" /> 改成了 <icon gap:platform="android" density="ldpi" src="www/res/icon/android/icon-36-ldpi.png" /> - Tha Leang
    @Ronoaldo Periera,你是我的救星!!每个密度都有<icon..>标签!太棒了!! - Hittz
    默认的图标源在Android上效果不佳,实际上被忽略了!请查看我的答案:https://dev59.com/qmMm5IYBdhLWcg3wKsgj#31674547 - Sebastien Lorber

    8

    您IP地址为143.198.54.68,由于运营成本限制,当前对于免费用户的使用频率限制为每个IP每72小时10次对话,如需解除限制,请点击左下角设置图标按钮(手机用户先点击左上角菜单按钮)。 - Sebastien Lorber

    4
    您需要创建一个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特定的图标。

    我的配置文件已经包含了所有的图标。在创建一个新的PhoneGap项目时,它会默认创建。 - Markus
    2
    不起作用。它在PG Build中可以工作,但是Cordova 3.x cli不考虑在config.xml中指定的图标(也不考虑根目录中的icon.png和screen.png)。同时正在寻找这个问题的答案。 - lefnire
    Yup config.xml 只适用于 PhoneGap Build!有人知道怎么做吗?! - Michael
    在 Cordova 3.5.0-0.2.6 上,图标支持已经实现,但在 Android 上还存在一些注意事项。请参阅我的答案以了解详情。 - Ronoaldo Pereira

    4

    由于这里的大多数答案都针对iOS,因此以下是更改Android图标的解决方案。

    对于Android:

    <project location>\platforms\android\ant-build\res而不是<project location>\platforms\android\res中进行更改。

    对于某些人来说,在后一个位置进行更改可能有效,但是注意到Phonegap从\android\res复制到\android\ant-build\res,我决定在那里检查,并找到一组包含默认Phonegap图标的可绘制文件夹。

    最终更改了那些文件夹。

    由于我正在本地构建和运行,而不是使用Adobe PhoneGap Build,在<project location>\www\res\icon\android中更改图标也无效。


    3

    我正在运行phonegap 3.1.0-0.15.0,由于iOS7将分辨率改为了120x120像素,我只需将一个具有这些尺寸的文件添加到项目中,然后更改info.plist文件即可。

    1. 通过在Xcode中右键单击项目文件并选择"Add files to "[Your Project Name]"...来向项目中添加一个120x120的文件。
    2. 进入Xcode中的info.plist文件 "Resources/[Your Project Name]-info.plist"
    3. "Icon files (iOS 5)/Primary Icon/Icon files"下,将"Item 2"更改为你的文件的文件名(我的名字是"icon-120.png",我将它放在项目文件夹中与其他所有图标一起,但不应该影响)

    更多信息可以在这里找到:http://www.digifloor.com/missing-recommended-icon-file-error-ios-app-13

    要修复iOS中的启动画面,我只需粘贴具有相同尺寸和相同文件名的新文件,覆盖旧文件。只需记住在Xcode的菜单栏中转到Product>Clean(快捷键Shift+Command+K),就可以正常工作! :)


    3
    在cordova 3.3.1-0.1.2中,预期的行为没有正常工作。

    http://cordova.apache.org/docs/en/3.3.0/config_ref_images.md.html#Icons%20and%20Splash%20Screens

    它明确指出,您应该将它们放入名为res和遵循特定命名约定的图标文件夹中,而不是原始可自定义的config.xml指定的方式(其中您可以指向所选文件,这种方式更好)。然后,对于每个平台,它应该从那里获取并将它们放入platforms /?android?/ res / drawable-?dpi / icon.png,但目前它没有正确执行此操作...存在错误。
    因此,我想我们必须手动将它们放置在每个平台上。当然,它需要从重复将其复制到www文件夹中删除。对于我来说,我必须完全替换主要的www文件夹中的内容,因为即使是hello world也无法正常工作,除非通过重定向index.html来查找一些奇怪的随机文件夹进行黑客攻击。将res文件夹放在www旁边是最有意义的,但不管怎样,对我来说似乎都是由这一系列级联和令人困惑的设计选择/缺陷引起的。

    2
    在某些情况下,Cordova的内部脚本没有将图标放在正确的文件夹中,因此您可能会看到该死的Cordova机器人而不是您自己的图标。
    使用钩子脚本。;)
    创建一个名为“after_platform_add”的文件夹,在钩子文件夹中放置/更改devgirl的最后一个脚本。
    不要忘记为脚本设置执行权限,在Linux中使用“chmod 777

    1
    只需将此代码添加到您的config.xml文件中。
    <icon src="path to your icon image">
    

    eg:

    <icon src="icon.png">
    

    永远记得你需要使用 .png 扩展名


    尝试使用PNG图像。 - Jobincs

    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文,
    原文链接