- 文档
- Architectural overview of Cordova platform
- 创建你的第一个App
- Cordova平台支持
- Android平台指南
- Blackberry 10 Guides
- iOS Platform Guide
- OS X 平台指南
- Ubuntu Platform Guide
- Windows Platform Guide
- WP8 Guides
- 平台和插件版本管理
- 自定义app图标(Icon)
- 存储(Storage)
- 隐私指南
- 安全指南
- 白名单指南
- Plugin Development Guide
- Android Plugins
- BlackBerry 10 Plugins
- iOS Plugin Development Guide
- Windows Plugins
- Windows Phone 8 Plugins
- Using Plugman to Manage Plugins
- Embedding WebViews
- Next Steps
- Config.xml
- 事件
- CLI Reference
- Hooks Guide
- Plugin.xml reference documentation
- Battery Status
- Camera
- Console
- Contacts
- Device
- Device Motion
- Device Orientation
- Dialogs
- File
- File Transfer
- Geolocation
- Globalization
- Inappbrowser
- Media
- Media Capture
- Network Information
- Splashscreen
- Vibration
- Statusbar
- Whitelist
- Legacy Whitelist
自定义app图标(Icon)
这节将介绍如何为不同的平台配置一个app的图标。对启动画面(splash screen)的支持已经被移动到Cordova自己的插件中了。配置选项可以在Splashscreen插件文档中找到.
在CLI工作流中配置图标
当工作在CLI工作流中,你可以通过<icon>
元素(config.xml
)定义你的app图标。如果没用指定图标将使用ApacheCordova的logo.
<icon src="res/ios/icon.png" platform="ios" width="57" height="57" density="mdpi" />
属性 | 描述 |
---|---|
src | 必要 图片文件位置,相对于项目根路径 |
platform | 可选 目标平台 |
width | 可选 图片的像素宽度 |
height | 可选 图片的像素高度 |
density | 可选 Android 指定图标密度 |
target | 可选 Windows 图片文件和所有多渲染目标(MRT)伙伴的目标文件名 |
下面配置可以用来定义用于所有平台的唯一默认图标
<icon src="res/icon.png" />
different screen resolutions.对于每一个平台你可以定义一个像素完美的图标集来适应不同的屏幕分辨率
Android
<platform name="android">
<!--
ldpi : 36x36 px
mdpi : 48x48 px
hdpi : 72x72 px
xhdpi : 96x96 px
xxhdpi : 144x144 px
xxxhdpi : 192x192 px
-->
<icon src="res/android/ldpi.png" density="ldpi" />
<icon src="res/android/mdpi.png" density="mdpi" />
<icon src="res/android/hdpi.png" density="hdpi" />
<icon src="res/android/xhdpi.png" density="xhdpi" />
<icon src="res/android/xxhdpi.png" density="xxhdpi" />
<icon src="res/android/xxxhdpi.png" density="xxxhdpi" />
</platform>
参见
- Android图标指南
- Android - 支持多屏幕
BlackBerry10
<platform name="blackberry10">
<icon src="res/bb10/icon-86.png" />
<icon src="res/bb10/icon-150.png" />
</platform>
参见
- BlackBerry文档针对不同的尺寸和区域。
iOS
<platform name="ios">
<!-- iOS 8.0+ -->
<!-- iPhone 6 Plus -->
<icon src="res/ios/icon-60@3x.png" width="180" height="180" />
<!-- iOS 7.0+ -->
<!-- iPhone / iPod Touch -->
<icon src="res/ios/icon-60.png" width="60" height="60" />
<icon src="res/ios/icon-60@2x.png" width="120" height="120" />
<!-- iPad -->
<icon src="res/ios/icon-76.png" width="76" height="76" />
<icon src="res/ios/icon-76@2x.png" width="152" height="152" />
<!-- iOS 6.1 -->
<!-- Spotlight Icon -->
<icon src="res/ios/icon-40.png" width="40" height="40" />
<icon src="res/ios/icon-40@2x.png" width="80" height="80" />
<!-- iPhone / iPod Touch -->
<icon src="res/ios/icon.png" width="57" height="57" />
<icon src="res/ios/icon@2x.png" width="114" height="114" />
<!-- iPad -->
<icon src="res/ios/icon-72.png" width="72" height="72" />
<icon src="res/ios/icon-72@2x.png" width="144" height="144" />
<!-- iPhone Spotlight and Settings Icon -->
<icon src="res/ios/icon-small.png" width="29" height="29" />
<icon src="res/ios/icon-small@2x.png" width="58" height="58" />
<!-- iPad Spotlight and Settings Icon -->
<icon src="res/ios/icon-50.png" width="50" height="50" />
<icon src="res/ios/icon-50@2x.png" width="100" height="100" />
</platform>
参见
- App图片和图片尺寸参考
Windows
对于Windows建议定义app图标的方法是使用target
属性。
<platform name="windows">
<icon src="res/windows/storelogo.png" target="StoreLogo" />
<icon src="res/windows/smalllogo.png" target="Square30x30Logo" />
<icon src="res/Windows/Square44x44Logo.png" target="Square44x44Logo" />
<icon src="res/Windows/Square70x70Logo.png" target="Square70x70Logo" />
<icon src="res/Windows/Square71x71Logo.png" target="Square71x71Logo" />
<icon src="res/Windows/Square150x150Logo.png" target="Square150x150Logo" />
<icon src="res/Windows/Square310x310Logo.png" target="Square310x310Logo" />
<icon src="res/Windows/Wide310x150Logo.png" target="Wide310x150Logo" />
</platform>
source
是要被添加的图标路径。
请注意Windows平台处理多渲染目标(MRT)是自动的。所以如果指定了src="res/windows/storelogo.png"
,下面的文件会被拷贝到app的images
文件夹: res/windows/storelogo.scale-100.png
, res/windows/storelogo.scale-200.png
等等。
target
属性为生成的图标指定基础名称。每一个图标文件的目标文件名通过下面公式计算: target + '.' + MRT修饰符 + 文件扩展名(原文件)
。为了让生成的app显示合适的图标,每一个target
应该是图标文件名之一, 定义在应用的.appxmanifest
文件中。
综上所述,使用target
属性下面是可能的:
*为不同的设备缩放因子定义一组图标,通过使用单独的<icon ...>
元素,例子:
<icon src="res/Windows/AppListIcon.png" target="Square44x44Logo" />
他等价于下面几行:
<icon src="res/Windows/Square44x44Logo.scale-100.png" width="44" height="44" />
<icon src="res/Windows/Square44x44Logo.scale-150.png" width="66" height="66" />
<icon src="res/Windows/Square44x44Logo.scale-200.png" width="88" height="88" />
<icon src="res/Windows/Square44x44Logo.scale-240.png" width="106" height="106" />
- 定义图标通过缩放因子除了
scale-100
和scale-240
(和任何其他的MRT修饰符)
虽然这不被建议,但这仍然是可能的使用width
和height
属性定义图标:
<platform name="windows">
<icon src="res/windows/logo.png" width="150" height="150" />
<icon src="res/windows/smalllogo.png" width="30" height="30" />
<icon src="res/windows/storelogo.png" width="50" height="50" />
<icon src="res/Windows/Square44x44Logo.scale-100.png" width="44" height="44" />
<icon src="res/Windows/Square44x44Logo.scale-240.png" width="106" height="106" />
<icon src="res/Windows/Square70x70Logo.scale-100.png" width="70" height="70" />
<icon src="res/Windows/Square71x71Logo.scale-100.png" width="71" height="71" />
<icon src="res/Windows/Square71x71Logo.scale-240.png" width="170" height="170" />
<icon src="res/Windows/Square150x150Logo.scale-240.png" width="360" height="360" />
<icon src="res/Windows/Square310x310Logo.scale-100.png" width="310" height="310" />
<icon src="res/Windows/Wide310x150Logo.scale-100.png" width="310" height="150" />
<icon src="res/Windows/Wide310x150Logo.scale-240.png" width="744" height="360" />
</platform>
参见:
- Windows 10 平台图标参考指南.
- Windows 8.1 平铺图片和图标的尺寸
Windows Phone 8 (WP8平台)
<platform name="wp8">
<icon src="res/wp/ApplicationIcon.png" width="99" height="99" />
<!-- 平铺图片 -->
<icon src="res/wp/Background.png" width="159" height="159" />
</platform>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论