提问者:小点点

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


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

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

我已经覆盖了iOS和Android的默认图标,因此路径和名称仍然与这些PNG匹配。

在模拟器中运行时,图标不显示。我在xCode中查找过,它告诉我图标的“资源”文件夹仍然包含phonegap默认图标。Android系统也是如此。

我做错了什么?

如何使用phonegap为iOS和Android添加自定义应用程序图标?

谢谢

我的配置。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" />

共3个答案

匿名用户

幸运的是,文档中有一点关于splash图像的信息,这也让我找到了图标图像的正确位置。就这样。

在使用命令行界面“cordova build ios”构建项目后,您应该在platforms/ios/文件夹中为ios应用程序提供完整的文件结构。

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

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

怎么办

您只需将图标文件保存在此文件夹中。这就是:

YourPhonegapProject/Platform/ios/YourAppName/Resources/icons

闪屏文件也一样。

笔记

>

  • 将文件放置在那里后,使用cordova build ios重建项目,并使用xCode的“清洁产品”菜单命令。没有这个,你仍然会看到Phonegap占位符。

    最明智的做法是将文件重命名为iOS/Apple方式(即图标-72@2x.png等)而不是编辑信息中的名称。plist或config。xml。至少这对我有用。

    顺便说一下,忽略config中图标的奇怪路径和奇怪文件名。xml(即

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

  • 匿名用户

    我将我的答案呈现为一个常见问题解答,可以帮助您解决我在处理图标/启动屏幕时遇到的许多问题。您可能会像我一样发现,文档并不总是非常清晰,也不是最新的。这可能会转到StackOverflow文档(如果可用)。

    如何使用phonegap为iOS和Android添加自定义应用程序图标?

    在您的Cordova版本中,图标标记是无用的。Cordova 3.0甚至没有对此进行记录。0.您应该使用适合您正在使用的cli的文档版本,而不是最新版本!

    在3.5版本之前,图标标签根本不适用于Android。0根据我在不同版本的文档中看到的内容。在3.4中。0他们仍然建议手动复制文件

    在较新版本中:您的配置。对于较新的Cordova版本,xml看起来更好。然而,还有很多事情你可能想知道。如果您决定升级,以下是一些需要修改的有用内容:

    • 您不需要间隙:名称空间

    以下是您在尝试处理图标和启动屏幕时可能会问自己的问题的更多细节:

    不,以前版本的Cordova中没有图标/飞溅屏幕功能,因此您必须使用最新版本。在以前的版本中,只有Phonegap构建可以处理图标/启动屏幕,因此本地构建和处理图标只能通过挂钩实现。我不知道使用此功能的最低版本是5.1。1它可以在Cordova/Phonegap cli中正常工作。科尔多瓦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构建

    图标应根据配置放入文件夹中。对我来说,它存在于许多子文件夹中:platforms/android/build/intermediates/res/armv7/debug/drawable-hdpi-v4/icon。巴布亚新几内亚

    然后您可以找到APK,并将其作为zip存档打开以检查图标是否存在。它们必须位于res/drawable*文件夹中,因为这是Android的特殊文件夹。

    在许多示例中,您会发现图标/启动屏幕在res文件夹中声明。这个res是输出APK中一个特殊的Android文件夹,但这并不意味着您必须在项目中使用res文件夹。

    你可以把你的图标放在任何地方,但是你使用的路径必须是相对于项目根的,而不是www,所以要小心!这是有文档记录的,但不清楚,因为所有示例都使用res,您不知道此文件夹在哪里:(

    我的意思是如果你把图标放在www/icon。png您绝对必须在路径中包含www

    编辑Mars 2016:升级我的版本后,现在图标似乎与www文件夹相关,但文档未更改(问题)

    不,不是的!。

    在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或Cordova的新版本都能够理解图标声明,而无需使用任何gap:xml名称空间。

    然而,我仍然在这里等待一个有效的答案:科尔多瓦/phonegap插件添加VSconfig.xml

    据我所知,一些具有间隙的功能:命名空间可能在PhonegapBuild中更早一些,然后在Phonegap中可用,然后被移植到科尔多瓦(?)

    至少对Android来说是的。我以额外的解释开始了一个问题。

    是的,确实如此!根据我的测试,它可能对Android没有任何影响,但对iOS有影响。这是出乎意料的和未记录的行为,所以我打开了另一个问题。

    是的,这是绝对需要的,如果你想启动屏幕工作。文档不清楚(问题),让我们认为插件只需要提供一个启动屏幕javascript API。

    有工具可以帮助你做到这一点。对我来说最好的是http://makeappicon.com/但需要提供电子邮件地址。

    其他可能的解决办法是:

    • AndroidAssetStudio

    对这是我真正的配置。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-start或者Ionic启动器

    匿名用户

    从Cordova 3.5开始。0-0.2.6<代码>

    >

    <代码>

    例如,如果您的图标图像位于路径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图标,而无需定制hoooks。只需使用cordova build android构建即可。