写在前面:cordova 使一个前端开发者成为一个“假”的android开发人员，不得不说提供给我们巨大的方便~，cordova打包生成的apk的默认样式和启动的名字真的是需要我们字更改的；本文将记录如何更改cordova生成的apk的图标、app名字和app启动该页面；

1：修改名字-》这个是最好操作的了

找到config.xml文件，一听名字就知道这肯定是个配置文件了，将<name>你的a'p'p名字</name> app的名字就配置完成了。超简单

2：更改icon  -》我最不喜欢的事情就是一张图p来p去，原生就很好，但是不符合我们需求；

相信在配置文件中已经看到了这个，icon就是我们要更改的标签了

疑问？为什么那麽多的icon 标签？

答疑：因为android系统也是很多的，比如平板、大尺寸的手机、这些icon提供了一个可以选择适应的尺寸展现给用户：

安卓图标应用的尺寸介绍：

  36*36   icon-36-ldpi.png

  48*48   icon-48-ldpi.png

  72*72   icon-72-ldpi.png

  96*96   icon-96-ldpi.png

  144*144 icon-144-ldpi.png

  192*192 icon-192-ldpi.png

　　ios的应用尺寸介绍：

 29*29   icon-small.png

  58*58   icon-small@2x.png

  87*87   icon-small@3x.png

  40*40   icon-40.png

  80*80   icon-40@2x.png

  50*50   icon-50.png

  100*100 icon-50@2x.png

  60*60   icon-60.png

  120*120 icon-60@2x.png

  180*180 icon-60@3x.png

  72*72   icon-72.png

  144*144 icon-72@2x.png

  76*76   icon-76.png

  152*152 icon-76@2x.png

　　我们将自己定义好的一个icon添加到res/icon/android文件下

图标来源:阿里矢量图标库，个人demo使用，非商业使用，侵权请联系删除；阿里图标库真的为一个不会ps的前端提供巨大帮助

3：app启动页面-》一个流畅的启动页面，可以提高用户体验，更改步骤

（1）安装启动页面的一个小插件

cordova plugin add cordova-plugin-splashscreen

或

cordova plugin add https://github.com/apache/cordova-plugin-splashscreen.git

　　（2）在config.xml文件中添加配置：以安卓为例，ios的代码

   <platform name="android">

        <icon density="ldpi" src="res/icon/android/icon-36-ldpi.png" />

        <icon density="mdpi" src="res/icon/android/icon-48-mdpi.png" />

        <icon density="hdpi" src="res/icon/android/icon-72-hdpi.png" />

        <icon density="xhdpi" src="res/icon/android/icon-96-xhdpi.png" />

        <icon density="xxhdpi" src="res/icon/android/icon-144-xxhdpi.png" />

        <icon density="xxxhdpi" src="res/icon/android/icon-192-xxxhdpi.png" />

        <splash density="land-hdpi" src="res/screen/android/splash-land-hdpi.png" />

        <splash density="land-ldpi" src="res/screen/android/splash-land-ldpi.png" />

        <splash density="land-mdpi" src="res/screen/android/splash-land-mdpi.png" />

        <splash density="land-xhdpi" src="res/screen/android/splash-land-xhdpi.png" />

        <splash density="port-hdpi" src="res/screen/android/splash-port-hdpi.png" />

        <splash density="port-ldpi" src="res/screen/android/splash-port-ldpi.png" />

        <splash density="port-mdpi" src="res/screen/android/splash-port-mdpi.png" />

        <splash density="port-xhdpi" src="res/screen/android/splash-port-xhdpi.png" />

        <allow-intent href="market:*" />

    </platform>
<platform name="ios">

        <allow-intent href="itms:*" />

        <allow-intent href="itms-apps:*" />

        <platform name="ios">

    <!-- iOS 8.0+ -->

    <!-- iPhone 6 Plus  -->

    <icon src="res/icon/ios/icon-60@3x.png" width="180" height="180" />

    <!-- iOS 7.0+ -->

    <!-- iPhone / iPod Touch  -->

    <icon src="res/icon/ios/icon-60.png" width="60" height="60" />

    <icon src="res/icon/ios/icon-60@2x.png" width="120" height="120" />

    <!-- iPad -->

    <icon src="res/icon/ios/icon-76.png" width="76" height="76" />

    <icon src="res/icon/ios/icon-76@2x.png" width="152" height="152" />

    <!-- iOS 6.1 -->

    <!-- Spotlight Icon -->

    <icon src="res/icon/ios/icon-40.png" width="40" height="40" />

    <icon src="res/icon/ios/icon-40@2x.png" width="80" height="80" />

    <!-- iPhone / iPod Touch -->

    <icon src="res/icon/ios/icon.png" width="57" height="57" />

    <icon src="res/icon/ios/icon@2x.png" width="114" height="114" />

    <!-- iPad -->

    <icon src="res/icon/ios/icon-72.png" width="72" height="72" />

    <icon src="res/icon/ios/icon-72@2x.png" width="144" height="144" />

    <!-- iPhone Spotlight and Settings Icon -->

    <icon src="res/icon/ios/icon-small.png" width="29" height="29" />

    <icon src="res/icon/ios/icon-small@2x.png" width="58" height="58" />

    <icon src="res/icon/ios/icon-small@3x.png" width="87" height="87" />

    <!-- iPad Spotlight and Settings Icon -->

    <icon src="res/icon/ios/icon-50.png" width="50" height="50" />

    <icon src="res/icon/ios/icon-50@2x.png" width="100" height="100" />  

    <splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/>

    <splash src="res/screen/ios/Default@2x~iphone.png" width="640" height="960"/>

    <splash src="res/screen/ios/Default-Portrait~ipad.png" width="768" height="1024"/>

    <splash src="res/screen/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>

    <splash src="res/screen/ios/Default-Landscape~ipad.png" width="1024" height="768"/>

    <splash src="res/screen/ios/Default-Landscape@2x~ipad.png" width="2048" height="1536"/>

    <splash src="res/screen/ios/Default-568h@2x~iphone.png" width="640" height="1136"/>

    <splash src="res/screen/ios/Default-667h.png" width="750" height="1334"/>

    <splash src="res/screen/ios/Default-736h.png" width="1242" height="2208"/>

    <splash src="res/screen/ios/Default-Landscape-736h.png" width="2208" height="1242"/>

</platform>

　（3）启动启动页的配置：

  <preference name="AutoHideSplashScreen" value="true" /> //默认值为true所以还是很ok的

　　启动页其他的设置见网站 启动页其他设置网站

（4）到了图片准备阶段了，以安卓为例

  •   960*720 splash-land-xhdpi.png
    
  640*480 splash-land-hdpi.png
    
  470*320 splash-land-mdpi.png
    
  426*320 splash-land-ldpi.png
    
  720*960 splash-port-xhdpi.png
    
  480*640 splash-port-hdpi.png
    
  320*470 splash-port-mdpi.png
    
  320*426 splash-port-ldpi.png

  • iOS启动画面具体规格如下（存放目录：res/screen/ios/）

      320*480 Default~iphone.png
    
  640*960 Default@2x~iphone.png
    
  768*1024    Default-Portrait~ipad.png
    
  1536*2048   Default-Portrait@2x~ipad.png
    
  1024*768    Default-Landscape~ipad.png
    
  2048*1536   Default-Landscape@2x~ipad.png
    
  640*1136    Default-568h@2x~iphone.png
    
  750*1334    Default-667h.png
    
  1242*2208   Default-736h.png
    
  2208*1242   Default-Landscape-736h.png

    　目录存放完成后展示：

  • 注意:图片的命名要和引入的图片名字保持一致。

cordova 更改app的图标的更多相关文章

  1. 在AndroidManifest（清单文件）中注册activity（活动）及配置主活动、更改App图标、App名称、修改隐藏标题栏

    打开app/src/main/AndroidManifest. <?xml version="1.0" encoding="utf-8"?> < ...

  2. 【Android Studio安装部署系列】十八、Android studio更换APP应用图标

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 Android Studio新建项目后会有一个默认图标,那么如何更换图标呢? 替换图标 这个方案不建议直接在已有项目上更换图标,建议 ...

  3. Cordova开发App入门之创建android项目

    Apache Cordova是一个开源的移动开发框架.允许使用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发. 应用在每个平台的具体执行被封装了起来,并依靠符合标准的API绑 ...

  4. [Android教程] Cordova开发App入门（一）创建android项目

    前言 Apache Cordova是一个开源的移动开发框架.允许使用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发. 应用在每个平台的具体执行被封装了起来,并依靠符合标准的A ...

  5. [App Store Connect帮助]四、添加 App 图标、App 预览和屏幕快照（2）添加一个 App Store 图标

    您必须提供一个 App Store 图标,用于在 App Store 中的不同部分展示您的 App.请遵照 Human Interface Guidelines(<人机界面准则>)创建您的 ...

  6. vs2010如何生成EXE文件如何更改EXE程序图标

    vs2010如何生成EXE文件 F5启动调试后,进入下面路径查找: 我的文档\Visual Studio 2010\Projects\项目名称\项目名称\bin\Debug 如何更改EXE程序图标 其 ...

  7. Cordova开发App使用USB进行真机调试

    在使用cordova开发app时,不像浏览器中可以直接使用浏览器的开发者工具进行调试.为了看到app的显示效果, 一种是使用模拟器进行展示,一种是使用真机进行展示. 模拟器:可以使用Android s ...

  8. iOS开发（1）：设置APP的图标与启动图 | iOS图标的尺寸 | LaunchScreen的使用

    每个APP都应该有自己的图标跟启动图. 这里介绍怎么设置iOS的APP的图标跟启动图. (1)图标 小程的xcode是10.0版本,设置图标的入口如下: 点击入口后,进到设置页面,如下: 可以看到有很 ...

  9. iOS开发简记（1）：指定APP的图标与启动图

    各位兄弟姐妹们,早上好,本人花了将近一个月的时间打造了一个完整的IOS版的App, 期间包括开发,测试,上线审核,现在花点时间把实现的过程分享给大家,“知音”app功能简单,适合对象为初学者,后面我会 ...

随机推荐

  1. javascript总结30 :DOM事件

    事件: 1 在js中可以说一整套事件能完成一个功能: 事件的定义:当什么时候执行什么事: 使用事件的基本结构:事件源+事件类型=执行的指令 2 事件三要素:事件源 事件类型, 驱动程序(匿名函数). ...

  2. CodeForces 342C Cupboard and Balloons (几何问题)

    题意:给定一个 r 和 h,r 是上面那个半球的半径,h 是下面那个圆柱的高度,然后有一些半径为 r/2的气球,问你最多能放几个. 析:根据题意,很容易知道,先从下面往上放,两个两个的放,放到不能放的 ...

  3. GitHub操作总结

    GitHub操作总结 : 总结看不明白就看下面的详细讲解. . 作者:万境绝尘 转载请注明出处:http://blog.csdn.net/shulianghan/article/details/188 ...

  4. (转)@RequestParam @RequestBody @PathVariable 等参数绑定注解详解

    引言: 接上一篇文章,对@RequestMapping进行地址映射讲解之后,该篇主要讲解request 数据到handler method 参数数据的绑定所用到的注解和什么情形下使用: 简介: han ...

  5. tcxgrid控件中drag a column header here to group by that column移除方法

  6. java学习（四）static静态变量 和this

    java中的this /* this:是当前类的对象引用.简单的记,它就代表当前类的一个对象. 注意:谁调用这个方法,在该方法内部的this就代表谁. this的场景: 解决局部变量隐藏成员变量 */ ...

  7. Verilog MIPS32 CPU（五）-- CP0

    Verilog MIPS32 CPU(一)-- PC寄存器 Verilog MIPS32 CPU(二)-- Regfiles Verilog MIPS32 CPU(三)-- ALU Verilog M ...

  8. TSQL--HASH JOIN

    算法: 将其中一张表的连接列做hash,然后遍历另外一张表,对遍历出的每一行到hash表中匹配查找 要求:hash表不要求表排序或有索引

  9. webUploader 的使用

    地址:http://fex.baidu.com/webuploader/demo.html 这个主要是扒的demo 引用<link href="~/Scripts/webuploade ...

  10. MVC ASP.NET MVC5使用Area区域

    MVC  ASP.NET MVC5使用Area区域 一.为什么要使用area? 在大型的ASP.NET mvc5项目中一般都有许多个功能模块,这些功能模块可以用Area(中文翻译为区域)把它们分离开来 ...