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

Question

我有一个新创建的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应该根据icon.png我提供的内容自动创建图标config.xml.

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="dev@cordova.apache.org" href="http://cordova.io">
      Apache Cordova Team
  </author>
  <content src="index.html" />
  <access origin="*" />

  <icon src="icon.png" />

</widget>

Answer 1

我写了一个脚本,使用ImageMagick自动为cordova生成图标:

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

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

cordova-icon

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

您还可以将其配置为cordova项目中的挂钩,以便每次基于您添加的icon.png构建项目时生成图标.(自述文件中的说明).

Answer 2

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

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" width="60" height="60" />
              <icon src="www/res/ios/icon-60@2x.png" width="120" height="120" />
              <!-- iPad -->
              <icon src="www/res/ios/icon-76.png" width="76" height="76" />
              <icon src="www/res/ios/icon-76@2x.png" width="152" height="152" />
              <!-- iOS 6.1 -->
              <!-- Spotlight Icon -->
              <icon src="www/res/ios/icon-40.png" width="40" height="40" />
              <icon src="www/res/ios/icon-40@2x.png" width="80" height="80" />
              <!-- iPhone / iPod Touch -->
              <icon src="www/res/ios/icon.png" width="57" height="57" />
              <icon src="www/res/ios/icon@2x.png" width="114" height="114" />
              <!-- iPad -->
              <icon src="www/res/ios/icon-72.png" width="72" height="72" />
              <icon src="www/res/ios/icon-72@2x.png" width="144" height="144" />
              <!-- iPhone Spotlight and Settings Icon -->
              <icon src="www/res/ios/icon-small.png" width="29" height="29" />
              <icon src="www/res/ios/icon-small@2x.png" width="58" height="58" />
              <!-- iPad Spotlight and Settings Icon -->
              <icon src="www/res/ios/icon-50.png" width="50" height="50" />
              <icon src="www/res/ios/icon-50@2x.png" width="100" height="100" />
     </platform>

正如您所看到的,URI是相对于cordova项目的路径,而不是www文件夹.

Answer 3

该config.xml图标的设置只能与PhoneGap的构建服务.添加两个平台后,您需要手动(或者您可以创建一个钩子,但我自己没有这样做)将图标放在正确的路径中.

对于iOS:

PROJECT_PATH/platforms/ios/PROJECT_NAME/Resources/icons

对于Android:

PROJECT_PATH/platforms/android/res/drawable

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

然后运行cordova prepare或build或run

Answer 4

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

请执行下列操作:

1. npm install ionic -g
2. 将png,psd或.ai文件放入图标和/或闪屏 ${project_location}/resources
3. ionic resources

如果您只想生成图标,那么有一个方便的键:

ionic resources --icon

更多细节在这里