logo标签列表

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

cordova
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个回答
1
我所做的只是在 config.xml 文件中添加以下行： <icon src="www/img/appIcon.png" /> 然后它就完全正常工作了。
谢谢，我试图将一个图标放在res / icon.png中（就像文档示例中一样...），但它在iOS上从未起作用。最终，我放弃了那个令人困惑的“res”文件夹，并按照您建议的将图标放在“www”下，这对我也很有效！这适用于Cordova 6.0.0。iOS平台。 - firepol
0

我也正在努力理解这一切是如何连接的。

到目前为止，我在XCode中找到了以下内容，但如果我的假设是正确的，我希望能够得到更正或确认。我没有找到一个开箱即用的从cordova构建到xcode的版本，可以正确地应用图标。就像你一样，我已经更新了config.xml中列出的所有图标，但没有成功。

所以...

首先，我通常会使用“www”文件夹中的config.xml更新项目根目录中的config.xml（我之所以这样做，是因为我不确定www/config.xml是否具有优先权，或者它是否被应用）

其次，我会更新项目的“Build Phases”。展开“Copy Bundle Resources”，你已经注意到了“Resources/icons”、“Resources/splash”中的所有图像。你可以：

  • 删除所有这些内容，以避免覆盖你的图像；或者
  • 使用你自己的图像更新所有这些图像（重命名为列出的图像名称）

当我在处理这个问题时，你可能只需要从“Summary”选项卡中最小化更新图像。

从您的res文件夹中将图片拖放到“Summary”选项卡中适当的图像上。（res/icon/ios -> App图标和res/screen/ios ->启动图像）。由于我的应用程序仅适用于iPhone，因此我只针对iPhone进行操作。如果您不希望出现光泽，请勾选“prerendered”。

随后更新项目的plist文件中引用的“icon.png”：PROJECT_NAME-Info.plist或在查看项目目标时的“Info”选项卡中。将其重命名为“icon-57.png”（现在位于项目根目录中，这是在您执行拖放操作时自动添加到根目录的）。

构建并且您应该会看到更新的应用程序图标。

我使用Cordova 3.0.3构建了这个项目，但我想使用phonegap构建也是一样的。 - Sam Tsai
0

只是想提醒一下，我刚刚将我的config.xml更改为Sebastian的示例。

在调试所有这些内容时，如果您不进行本地构建，还有一些有用的东西...就是从PhoneGap云中下载XAP/IPA/APK文件，并为每个文件创建文件夹。将每个文件重命名为.ZIP扩展名，并将其内容提取到各自的文件夹中。因此，基本上，您现在可以看到将要发送到手机的软件包中有什么。

通过这样做，我可以看到对于Microsoft Phone平台，它基本上忽略了我所有尝试替换图标或启动画面的尝试。如果您然后替换ApplicationIcon.png和SplashScreenImage.jpg，然后重新压缩文件夹集并将其重新命名为.XAP文件，然后可以将其部署到您的手机上，它将完美地工作。不知何故，有一种方法可以让PhoneGap构建将您的icon.png和icon.jpg转换为这两个文件。也许Masood的建议在这里是一个可能性，可以利用钩子脚本。

对于.IPA文件（iOS），执行相同操作会导致像父级别www上的icon-something.png之类的几个文件。它们似乎都是空白的。

对于 .APK 文件（Android），做同样的操作会生成一组 res/drawable-something 文件夹，每个文件夹中都有我的 icon.png。目前这是我能宣称的最接近成功的地方。

0

对我来说，自定义图标无法正常工作，然后我在以下位置更新了图标，它就可以正常工作了。

{projectlocation}\platforms\android\app\src\main\res

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