在 Cordova / PhoneGap 中生成 iOS 和 Android 图标

Posted 2023-05-06

【中文标题】在 Cordova / PhoneGap 中生成 iOS 和 Android 图标

【英文标题】：Generating iOS and Android icons in Cordova / PhoneGap

【发布时间】：2014-07-12 21:16:30

【问题描述】：

我有一个新创建的 Cordova 项目，具有以下 config.xml 设置（使用来自 http://docs.phonegap.com/en/edge/config_ref_images.md.html 的说明）。我还添加了 2 个平台（ios 和 android）。

当我运行cordova run ios 或cordova run android 时，项目仍然有默认的Cordova 图标。我对文档的理解是，Corodva 应该根据我在config.xml 中提供的icon.png 自动创建图标。

config.xml:

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.testapp" version="1.1.2" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>SingleApp</name>
  <preference name="DisallowOverscroll" value="true" />
  <preference name="AutoHideSplashScreen" value="false" />
  <preference name="Orientation" value="portrait" />
  <preference name="Fullscreen" value="false" />
  <preference name="target-device" value="handset" />

  <description>
      A sample Apache Cordova application that responds to the deviceready event.
  </description>
  <author email="[e-mail]" href="http://cordova.io">
      Apache Cordova Team
  </author>
  <content src="index.html" />
  <access origin="*" />

  <icon src="icon.png" />

</widget>

【问题讨论】：

在 Cordova 5.1.1 中，图标无法正常工作！在这里查看我的答案以了解有关图标的所有信息：***.com/a/31674547/82609

【参考方案1】：

我编写了一个脚本，它使用 ImageMagick 为 cordova 自动生成图标：

https://github.com/AlexDisler/cordova-icon

要使用它，请创建一个“icon.png”文件并将其放在项目的根文件夹中，然后运行：

cordova-icon

它会为您的项目所拥有的平台生成所有必需的图标。

您还可以将其配置为您的 cordova 项目中的钩子，这样每次构建项目时都会根据您添加的 icon.png 生成图标。 （自述文件中的说明）。

【讨论】：

感谢@Alex 分享该脚本，非常完美:-)

这很好用。谢谢亚历克斯。他也有一个splash screens。

@Alex ,keepitreal：这会覆盖 slpashscreen 的 config.xml 规范吗？

好剧本！谢谢你。我确实得到了一个错误： Cordova 5.1 输出：为 android 生成图标 ✓ drawable-ldpi/icon.png 创建 ✓ drawable-mdpi/icon.png 创建 ✓ drawable-hdpi/icon.png 创建 ✓ drawable-xhdpi/icon.png 创建 [错误：命令失败：转换：无法打开图像platforms/android/res/drawable/icon.png': No such file or directory @ error/blob.c/OpenBlob/2709. convert: WriteBlob Failed platforms/android/res/drawable/icon.png'@error/png.c/MagickPNGErrorHandler/1645。 ] timedOut: false, kill: false, code: 1, signal: null

一些错误的东西，与上面的错误相同。它也不会更新 config.xml，对吗？ “离子资源”应该可以解决问题，但也会挂起

【参考方案2】：

如果您使用的是 cordova 3.5.0，他们已经更新了文档。在旧版本中，我总是不得不手动替换项目中的图标，但最新版本的科尔多瓦工作正常。

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

正如您在此处看到的https://github.com/phonegap/phonegap-cli/issues/58，这是一个常见问题。因此，如果您使用的是旧版本的 cordova，我建议使用命令 npm update -g cordova 更新它

然后你应该将你的 config.xml 更新为如下内容：

    <icon src="www/res/drawable-xxxhdpi/icon.png" />
    <platform name="android">
          <icon src="www/res/drawable-ldpi/icon.png" density="ldpi" />
          <icon src="www/res/drawable-mdpi/icon.png" density="mdpi" />
          <icon src="www/res/drawable-hdpi/icon.png" density="hdpi" />
          <icon src="www/res/drawable-xhdpi/icon.png" density="xhdpi" />
    </platform>

    <platform name="ios">
              <!-- iOS 7.0+ -->
              <!-- iPhone / iPod Touch  -->
              <icon src="www/res/ios/icon-60.png"   />
              <icon src="www/res/ios/[e-mail]"   />
              <!-- iPad -->
              <icon src="www/res/ios/icon-76.png"   />
              <icon src="www/res/ios/[e-mail]"   />
              <!-- iOS 6.1 -->
              <!-- Spotlight Icon -->
              <icon src="www/res/ios/icon-40.png"   />
              <icon src="www/res/ios/[e-mail]"   />
              <!-- iPhone / iPod Touch -->
              <icon src="www/res/ios/icon.png"   />
              <icon src="www/res/ios/[e-mail]"   />
              <!-- iPad -->
              <icon src="www/res/ios/icon-72.png"   />
              <icon src="www/res/ios/[e-mail]"   />
              <!-- iPhone Spotlight and Settings Icon -->
              <icon src="www/res/ios/icon-small.png"   />
              <icon src="www/res/ios/[e-mail]"   />
              <!-- iPad Spotlight and Settings Icon -->
              <icon src="www/res/ios/icon-50.png"   />
              <icon src="www/res/ios/[e-mail]"   />
     </platform>

正如您所见，URI 是相对于 cordova 项目的路径，而不是相对于 www 文件夹。

【讨论】：

您知道这是否会将应用程序与仍包含在项目www 文件夹中的所有资产打包在一起吗？如果是这样，这会导致应用程序包膨胀。只是想知道这个新推出是否解决了这个问题？

是的，您可以使用图像在 www/ 之外创建一个文件夹，并从 config.xml 文件中对其进行寻址，该文件夹甚至可以位于 cordova 项目文件夹之外。例如：“../Image_folder”

如果你把它放在 www 文件夹中，它会将应用程序与里面的图像一起打包，如果你将它们放在包之外，它不会增加大小。

Cordova 团队真的应该考虑修复他们的文档和示例，它们中的大多数都是无用的，甚至令人困惑！谢谢

【参考方案3】：

图标的config.xml 设置仅适用于PhoneGap Build 服务。添加两个平台后，您需要手动（或者您可以创建一个挂钩，但我自己没有这样做）将您的图标放置在正确的路径中。

对于 iOS：

PROJECT_PATH/platforms/ios/PROJECT_NAME/Resources/icons

对于安卓：

PROJECT_PATH/platforms/android/res/drawable

Android 有许多 res/drawable-* 文件夹，适用于您的应用，但至少添加到 res/drawable

然后运行cordova prepare 或build 或run

【讨论】：

还是这样吗？感觉这是很久以前解决的问题......

不确定，这是 3 年前的事了。几年来一直没有使用cordova。

【参考方案4】：

如果您愿意安装额外的图标生成软件，您可以使用具有此功能的 Ionic。

执行以下操作：

npm install ionic -g 将图标和/或闪屏的 png、psd 或 .ai 文件放到 $project_location/resources ionic resources

如果你只想生成图标，有一个方便的键：

ionic resources --icon

更多详情here

【讨论】：

可以工作，但是图片太错误了，我有一个 80Kb 的图像，它总共创建了 12 Mb，我想我最好手动保存它们

ionic 在后台使用cordova-res github.com/ionic-team/cordova-res，如果您不想安装 ionic 可能就足够了

答案中提到了

【参考方案5】：

您不需要指定上面有图标的文件夹吗？未找到时，Cordova 会将图标替换为默认图标。

您是否尝试过替换为：

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

【讨论】：

在 Cordova 5.1.1 中，图标无法正常工作！您的答案不适用于 Android。在这里查看我的答案以了解您应该了解的有关图标的所有信息：***.com/a/31674547/82609

【参考方案6】：

npm install -g cordova-res

然后cordova-res

还支持安卓的自适应图标

【参考方案7】：

尝试关注https://www.npmjs.org/package/cordova-gen-icon

例子：

$ cordova create hello com.example.hello
Creating a new cordova project with name "HelloCordova" and id "com.example.hello" at location "hello"
$ cd hello
$ cordova platform add ios
Creating ios project...
Preparing ios project
$ cordova-gen-icon 
Generate cordova icons with
project: .
icon   : ./www/img/logo.png
target : 

generate iOS icons
Success generate icon set

【参考方案8】：

给那些说<icon src="res/icon.png" />不工作的人一点解释！

您必须将 icon.png 放在这两个文件夹中

project_name/res/

和

project_name/platforms/platform_name/res/

步骤：

cordova create hello com.example.hello HelloWorld
cd hello

将您的 icon.png 复制到 project_name/res/ 打开config.xml 并输入<icon src="res/icon.png" />

之后运行

cordova platform add android

现在将您的 icon.png 复制到 ... hello/platforms/android/res/

然后

cordova build android

最后

adb install  platforms/android/build/outputs/apk/android-debug.apk

之后，您可以在设备上使用您的图标查看您的应用

【参考方案9】：

请在此处上传您的图标：https://pgicons.abiro.com/

您可以从一个站点轻松获取所有内容，例如图标（所有平台）、启动画面（所有平台）、config.xml（带有生成的图标名称和路径）。

您只需要替换res 文件夹并更新config.xml 即可。