86

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

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

我已经覆盖了 iOS 和 Android 的默认图标,以便路径和名称仍然与那些 png 匹配。

在模拟器中运行时,图标不显示。我在 xCode 中查找过它,它告诉我图标的“资源”文件夹仍然包含 phonegap 默认图标。与安卓相同。

我究竟做错了什么?

如何使用 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

14 回答 14

67

幸运的是,文档中有一些关于启动图像的内容,这也让我走上了为图标图像找到正确位置的道路。就这样吧。

放置文件的位置 使用命令行界面“cordova build ios”构建项目后,文件夹中应该有一个完整的 iOS 应用程序文件结构platforms/ios/

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

在图标文件夹中,您将找到四个图标文件(57 像素和 72 像素,每个都有普通版和@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 中的名称是最明智的做法。至少这对我有用。

  3. 顺便说一句,请忽略 config.xml 中为图标提供的奇怪路径和奇怪的文件名(即<icon gap:platform="ios" height="114" src="res/icon/ios/icon-57-2x.png" width="114" />)。我只是将这些定义留在那里,即使我的 114px 图标被命名icon@2x.pngicon-57-2x.png.

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

于 2013-09-24T11:20:21.243 回答
47

常见问题解答:图标 / 闪屏 (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-startIonic starter

于 2015-07-28T11:09:04.790 回答
32

从 Cordova 3.5.0-0.2.6 开始<icon />,config.xml 中的元素具有以下注意事项:

  1. src属性是相对于您的项目根文件夹的路径。关于此问题的问题跟踪器更改的原因。

  2. 没有分辨率/dpi的<icon src="..." />元素被记录为所有平台用作默认图标的图标。但是,在 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应该可以解决问题。

于 2014-07-10T15:41:26.610 回答
8

如果您想要一种易于使用的方式来在本地构建时自动添加图标(cordova emulate ioscordova run android等),请查看以下要点:

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

希望这将在未来的某个时候开始开箱即用,这里是 Cordova 项目的相关错误报告:

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

于 2013-11-17T16:30:34.023 回答
4

由于这里的大多数答案都是针对 iOS 的,所以这里有一个在 Android 中更改图标的解决方案。

对于安卓:

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

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

改变那些终于奏效了。

由于我在本地构建和运行而不使用 Adob​​e PhoneGap Build,因此更改<project location>\www\res\icon\android中的图标也不起作用。

于 2014-06-25T08:32:32.617 回答
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 特定的图标

于 2013-07-23T20:49:15.500 回答
3

在科尔多瓦 3.3.1-0.1.2 中,预期的行为无法正常工作。

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

它清楚地表明您应该将它们放入主 www 文件夹中的名为 res 和 icons 的文件夹中,这些文件夹遵循特定的命名约定,而不是原始可定制的 config.xml 指定方式(在其中您指向您选择的文件,哪个/更好)。然后应该从那里为每个平台将它们放入platforms/?android?/res/drawable-?dpi/icon.png 但此时它没有这种正确的行为......错误。

所以我想我们必须为每个平台手动放置它们。它当然需要将其从再次复制到 www 文件夹中删除。对我来说,无论如何我都必须完全替换主 www 文件夹中的内容,因为它根本无法与 hello world 一起使用,而无需破解重定向 index.html 以在那里找到一些奇怪的随机文件夹。将 res 文件夹放在 www 旁边是最有意义的,但是这对我来说似乎是由这一系列级联和令人困惑的设计选择/缺陷引起的。

于 2014-01-29T12:49:09.203 回答
3

我正在运行 phonegap 3.1.0-0.15.0,因为 iOS7 将分辨率更改为 120x120px 我只是将具有这些尺寸的文件添加到项目中,然后更改了 info.plist 文件。

  1. 将 120x120 文件添加到项目中,方法是右键单击 Xcode 中的项目文件并选择“将文件添加到“[您的项目名称]”...
  2. 转到 Xcode "Resources/[Your Project Name]-info.plist"中的 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),它应该可以正常工作!:)

于 2013-10-09T20:26:18.193 回答
2

在某些情况下,cordova 的内部脚本不会将图标放在正确的文件夹中,因此您可以看到 f*** cordova 机器人而不是您自己的图标。

使用钩子脚本。;)

三钩你的cordovaphonegap项目需要

在钩子文件夹中创建一个文件夹“after_platform_add”并放置/更改 devgirl 的最后一个脚本。

不要忘记在 linux 中为脚本设置执行权限"chmod 777 <script>"

祝你好运!

于 2014-09-15T13:41:44.717 回答
1

只需将此代码添加到您的 config.xml 文件中

<icon src="path to your icon image">

例如:

<icon src="icon.png">

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

于 2016-03-22T07:19:55.620 回答
1

我所做的只是在 config.xml 中添加了以下几行 <icon src="www/img/appIcon.png" />

它工作得很好

于 2015-10-27T11:03:34.917 回答
0

我也在试图了解这一切是如何联系起来的。

这是我迄今为止在 XCode 中发现的内容,但如果我的假设是正确的,我希望得到纠正或肯定。我还没有找到从cordova到xcode的开箱即用构建,它可以正确应用图标。和你一样,我已经更新了 config.xml 中列出的所有图标,但没有骰子。

所以...

首先,我通常用我的“www”文件夹中的那个更新项目根目录中的 config.xml(我这样做是因为不确定 www/config.xml 是否具有任何优先级,或者它是否被应用)

其次,我更新了项目的“构建阶段”。展开“Copy Bundle Resources”,您已经注意到“Resources/icons”、“Resources/splash”中的所有图像。您可以:

  • 删除所有这些以避免覆盖您的图像或
  • 用您自己的更新所有这些图像(重命名为列出的图像名称)

当我正在解决这个问题时,您可能只需从“摘要”选项卡中更新图像即可。

将图像从 res 文件夹拖放到“摘要”选项卡中的相应图像。(res/icon/ios -> 应用程序图标和 res/screen/ios -> 启动图像)。我只为 iPhone 做这件事,因为我的应用程序只是 iPhone。如果您不想出现光泽,请选中“预渲染”。

然后在查看项目目标时更新项目 plist 文件中引用的“icon.png”:PROJECT_NAME-Info.plist 或“信息”选项卡。将其重命名为“icon-57.png”(它现在位于您的项目根目录中,当您进行拖放时,它会自动添加到根目录中。

构建并且您应该更新应用程序图标。

于 2013-07-31T14:07:01.447 回答
0

对我来说,自定义图标不起作用,然后我在以下位置更新了图标并且它起作用了。

{项目位置}\platforms\android\app\src\main\res

于 2021-02-01T15:42:56.617 回答
0

只是注意到我刚刚将我的 config.xml 更改为看起来像 Sebastian 的示例。

在调试所有这些方面也很有帮助,特别是如果您不进行本地构建...是下载从 PhoneGap 云构建的 XAP/IPA/APK 文件并为每个文件创建文件夹。使用 .ZIP 扩展名重命名每个文件,并将每个文件的内容提取到各自的文件夹中。因此,基本上,您现在可以看到将被运送到手机的包裹中的内容。

这样做,我可以看到对于 Microsoft Phone 平台,它在很大程度上忽略了我在替换图标或启动屏幕方面的所有尝试。如果您随后替换 ApplicationIcon.png 和 SplashScreenImage.jpg,然后重新压缩文件夹集并再次将其重命名为 .XAP 文件,您可以将其部署到您的手机上,它会完美运行。不知何故,有一种方法可以让 PhoneGap 构建将您的 icon.png 和 icon.jpg 转换为这两个文件。也许马苏德的建议在这里是一种可能性,并利用钩子脚本。

对 .IPA 文件 (iOS) 执行相同操作会在 www 上方的父级生成多个文件,例如 icon-something.png。它们似乎都是空白的。

对 .APK 文件 (Android) 执行相同操作会生成一组 res/drawable-something 文件夹,并且每个文件夹中似乎都有我的 icon.png。这是我目前能宣称的最接近成功的一次。

于 2015-09-05T23:42:58.920 回答