Cordova 3.x 基础（2） -- 应用图标icon和启动页面SplashScreen

原文：http://rensanning.iteye.com/blog/2017380

最新版Cordova CLI已经支持在config.xml中配置<splash> 和 <icon>，CB-2606, CB-3571 Add support for <icon>, <splash>。设置如下：

Xml代码  

  1. <platform name="android">
  2. <icon src="res/android/icon-36-ldpi.png" density="ldpi" />
  3. <splash src="res/android/screen-xhdpi-portrait.png" density="port-xhdpi"/>
  4. </platform>

具体可以参考官方文档：Icons and Splash Screens

如果你本地安装了ImageMagick，CLI还会自动调用ImageMagick来做成不同尺寸的图像。 
需要注意的是： 
（1）图像的路径是相对于工程根目录不是根据www 
（2）不要和PhoneGap CLI的设置混淆 
==========================================================

（1）创建以下图像

以Android为例：

icon图像：

  • www/res/icon/android/icon-36-ldpi.png - 36px x 36px
  • www/res/icon/android/icon-48-mdpi.png - 48px x 48px
  • www/res/icon/android/icon-72-hdpi.png - 72px x 72px
  • www/res/icon/android/icon-96-xhdpi.png - 96px x 96px

splashscreen图像：

  • www/res/screen/android/screen-ldpi-landscape.png - 320px x 200px
  • www/res/screen/android/screen-mdpi-landscape.png - 480px x 320px
  • www/res/screen/android/screen-hdpi-landscape.png - 800px x 480px
  • www/res/screen/android/screen-xhdpi-landscape.png - 1280px x 720px
  • www/res/screen/android/screen-ldpi-portrait.png - 200px x 320px
  • www/res/screen/android/screen-mdpi-portrait.png - 320px x 480px
  • www/res/screen/android/screen-hdpi-portrait.png - 480px x 800px
  • www/res/screen/android/screen-xhdpi-portrait.png - 720px x 1280px

（2）给工程添加splashscreen插件

引用

> cordova plugin add org.apache.cordova.splashscreen

（3）配置config.xml

Xml代码  

  1. <preference name="SplashScreen" value="splash" /> <!-- 不带后缀png的文件名，默认是screen-->
  2. <preference name="SplashScreenDelay" value="10000" /> <!-- Splash显示时间，默认是3000ms-->
  3. <feature name="SplashScreen">
  4. <param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen" />
  5. </feature>

相比于在config.xml中设置延迟时间，更应该在设备初始化完成后隐藏Splash画面(index.html)

Js代码  

  1. document.addEventListener("deviceready", onDeviceReady, false);
  2. function onDeviceReady() {
  3. navigator.splashscreen.hide();
  4. }

（4）Copy文件 
phonegap是可以在config.xml中配置icon和splash的，但是cordova不支持，需要在cordova build之后Copy文件，也可以通过创建hook来实现。 
***phonegap的配置也局限于remote build的时候Phonegap Build起作用，local build也不起作用，需手动处理。参考这里。

icon.png： 
把www/res/icon/android下的文件Copy到相应的platforms/android/res/drawable*/下。

splash.png： 
把www/res/screen/android下的文件Copy到相应的platforms/android/res/drawable*/下。

完成以后启动“cordova emulate android”即可。

phonegap的config.xml

Xml代码  

    1. <!-- Define app icon for each platform. -->
    2. <icon src="icon.png" />
    3. <icon src="res/icon/android/icon-36-ldpi.png"   gap:platform="android"    gap:density="ldpi" />
    4. <icon src="res/icon/android/icon-48-mdpi.png"   gap:platform="android"    gap:density="mdpi" />
    5. <icon src="res/icon/android/icon-72-hdpi.png"   gap:platform="android"    gap:density="hdpi" />
    6. <icon src="res/icon/android/icon-96-xhdpi.png"  gap:platform="android"    gap:density="xhdpi" />
    7. <icon src="res/icon/blackberry/icon-80.png"     gap:platform="blackberry" />
    8. <icon src="res/icon/blackberry/icon-80.png"     gap:platform="blackberry" gap:state="hover"/>
    9. <icon src="res/icon/ios/icon-57.png"            gap:platform="ios"        width="57" height="57" />
    10. <icon src="res/icon/ios/icon-72.png"            gap:platform="ios"        width="72" height="72" />
    11. <icon src="res/icon/ios/icon-57-2x.png"         gap:platform="ios"        width="114" height="114" />
    12. <icon src="res/icon/ios/icon-72-2x.png"         gap:platform="ios"        width="144" height="144" />
    13. <icon src="res/icon/webos/icon-64.png"          gap:platform="webos" />
    14. <icon src="res/icon/windows-phone/icon-48.png"  gap:platform="winphone" />
    15. <icon src="res/icon/windows-phone/icon-173.png" gap:platform="winphone"   gap:role="background" />
    16. <!-- Define app splash screen for each platform. -->
    17. <gap:splash src="res/screen/android/screen-ldpi-portrait.png"  gap:platform="android" gap:density="ldpi" />
    18. <gap:splash src="res/screen/android/screen-mdpi-portrait.png"  gap:platform="android" gap:density="mdpi" />
    19. <gap:splash src="res/screen/android/screen-hdpi-portrait.png"  gap:platform="android" gap:density="hdpi" />
    20. <gap:splash src="res/screen/android/screen-xhdpi-portrait.png" gap:platform="android" gap:density="xhdpi" />
    21. <gap:splash src="res/screen/blackberry/screen-225.png"         gap:platform="blackberry" />
    22. <gap:splash src="res/screen/ios/screen-iphone-portrait.png"    gap:platform="ios"     width="320" height="480" />
    23. <gap:splash src="res/screen/ios/screen-iphone-portrait-2x.png" gap:platform="ios"     width="640" height="960" />
    24. <gap:splash src="res/screen/ios/screen-ipad-portrait.png"      gap:platform="ios"     width="768" height="1024" />
    25. <gap:splash src="res/screen/ios/screen-ipad-landscape.png"     gap:platform="ios"     width="1024" height="768" />
    26. <gap:splash src="res/screen/windows-phone/screen-portrait.jpg" gap:platform="winphone" />
时间： 2024-10-30 20:37:47

Cordova 3.x 基础（2） -- 应用图标icon和启动页面SplashScreen的相关文章

cordova启动页面和图标的设置

一.config.xml配置 在cordova5.0版本以后,需要安装cordova-plugin-splashscreen插件以后才能修改和设置App的启动页面. 安装splashscreen插件: cordova plugin add cordova-plugin-splashscreen 或 cordova plugin add https://github.com/apache/cordova-plugin-splashscreen.git 基本配置 然后在你的config.xml文件中

Cordova 3.x 基础（3） -- 调试Debug工具

Cordova 3.x 基础(3) -- 调试Debug工具 (1)Ripple Emulator 是基于Google Chrome的移动应用模拟器,已经捐赠给了ASF.Apache Ripple:http://ripple.incubator.apache.org/ Chrome Webstore安装地址: https://chrome.google.com/webstore/detail/geelfhphabnejjhdalkjhgipohgpdnoc 安装Ripple Emulator 引

再谈获取网站图标Icon

上一篇文章讨论了一下获取网站图标方法,是通过从根目录直接获取和html解析结合的方式来获取的,并给出了相应的代码示例.这一篇来讨论一个更现成的方法,这个方法是从360导航的页面发现的,在导航页面中点击添加网址,会弹出一个添加网址的对话框,点击126邮箱,可以看到126邮箱和图标就跑到上面去了.查看一下网络监控,可以看到Request URL是http://cdn.website.h.qhimg.com/index.php?domain=www.126.com,Request Method是GET

Cordova 3.x 基础（1） -- 环境搭建（Windows / Android）

Cordova 3.x 基础(1) -- 环境搭建(Windows / Android) Mobile App分为三大类:Native App,Hybrid App,Web App.其中Hybrid App介于Native App和Web App之间,它能兼顾Native App的良好用户体验及强大的功能并具有Web App跨平台快速开发的优势.缺点在于依赖于各平台的WebView,WebView的性能好坏直接决定了Hybrid App的性能. 目前国内外的Hybrid App开发框架很多,比较

Bootstrap&lt;基础十一&gt;字体图标(Glyphicons)

字体图标(Glyphicons),并通过一些实例了解它的使用.Bootstrap 捆绑了 200 多种字体格式的字形. 获取字体图标 我们已经在 环境安装 章节下载了 Bootstrap 3.x 版本,并理解了它的目录结构.在 fonts 文件夹内可以找到字体图标,它包含了下列这些文件: glyphicons-halflings-regular.eot glyphicons-halflings-regular.svg glyphicons-halflings-regular.ttf glyphi

Expo大作战(十一)--expo中的预加载和缓存资产(Preloading &amp; Caching Assets),expo中的图标 (Icon)

简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人修改补充+demo测试的形式,对expo进行一次大补血!欢迎加入expo兴趣学习交流群:597732981 [之前我写过一些列关于expo和rn入门配置的东i西,大家可以点击这里查看:从零学习rn开发] 相关文章: Expo大作战(一)--什么是expo,如何安装expo clinet和xde,xd

【No.5 Ionic】修改 应用名，icon，启动界面

修改 应用名 直接 修改 config.xml中的name 修改icon 和 启动界面 在resources目录有个 icon.png  和 splash.png 文件,直接把文件覆盖执行重新生成命令 ionic resources  #重新生成icon 和 splash ionic resources --icon #重新生成icon ionic resources --splash # 重新生成splash 原文地址:[No.5 Ionic]修改 应用名,icon,启动界面标签:ionic

[转]轻松学习Ionic （四） 修改应用图标及添加启动画面（更新官方命令行工具自动生成）

本文转自:http://blog.csdn.net/zapzqc/article/details/42237935 由于Ionic更新了命令行工具,以后修改应用图标和添加启动画面就简单了,最新方法见最下方: 应用图标: 1.在整个项目所在文件夹下创建res文件夹,里边再分别创建两个文件夹android和ios. 2.针对Android平台:将我们的要替换的启动图标放如android文件夹下.可以分别起名为:mdpi.png(48*48),hdpi(72*72).xhdpi(96*96).xxhd

Android 并发编程：（一）基础知识 —— 1.2 程序的启动和终结

本章节所有内容皆为原创,如需转载,请注明出处. http://blog.csdn.net/manoel/article/details/38471825 Android是一个多用户,多任务的系统. 允许多个app在同一时刻执行,在多个程序之间切换并不会有明显的延迟. 多任务是由Linux内核负责处理的,而程序的运行基于Linux进程. Linux进程 Linux为每一个用户分配一个唯一的用户ID(User ID),用于区分不同的User. 因为权限的原因,每一个用户只能访问私有资源,没有用户(除