一、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文件中，添加以下代码

<platform name="android">

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

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

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

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

    <icon density="xxhdpi" src="res/icon/android/drawable-xxhdpi/icon.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" />

</platform>

<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" />

    <!-- 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>

其他配置

  • 自动隐藏启动页面AutoHideSplashScreen（默认为：true）

    <preference name="AutoHideSplashScreen" value="true" />

  • 显示启动页面的时间长度SplashScreenDelay(默认为：3000)

    <preference name="SplashScreenDelay" value="3000" />

    若想禁用启动页面，可设置为：<preference name="SplashScreenDelay" value="0"/>

    如果是iOS平台上想禁止启动页面，还需要添加<preference name="FadeSplashScreenDuration" value="0"/>

  • 启动页面淡入淡出的效果

    是否显示淡入淡出效果FadeSplashScreen(默认为：true)

    <preference name="FadeSplashScreen" value="false"/>

    淡入淡出效果的执行时间长度FadeSplashScreenDuration(默认为：500)

    <preference name="FadeSplashScreenDuration" value="750"/>

    注意：FadeSplashScreenDuration时间是包含在SplashScreenDelay的时间里的。

  • 启动页面是否允许旋转（默认为：true）

    <preference name="ShowSplashScreenSpinner" value="false"/>

  • 插件还可以通过js代码调用，提供有以下两个方法：

    navigator.splashscreen.hide();//隐藏启动页面

navigator.splashscreen.show();//显示启动页面

  • 在Android平台下的特殊设置

    <preference name="SplashMaintainAspectRatio" value="true|false" />
    
<preference name="SplashShowOnlyFirstTime" value="true|false" />

    SplashMaintainAspectRatio：选填项，默认为false。当设置为true时，则不会拉伸图片来填充屏幕，会以图片原始比例显示图片。

    SplashShowOnlyFirstTime：选填项，默认为true。当设置为false时，APP通过navigator.app.exitApp()代码退出app后，在下次打开APP时，还会显示启动页面。若为true时，就不会出现。

二、图标文件夹内容

根据上面的配置信息，你需要准备好你自己的app图标和启动画面png文件：

存放路径不是以www文件夹为依据，而是以当前项目文件夹为依据

projectRoot

    hooks

    platforms

    plugins

    www

        css

        img

        js

    res

        screen

            android

            ios

        icon

            android

            ios

应用程序图标

可通过图标工场一键生成多尺寸图标。

  • 安卓图标具体规格如下（存放目录：res/icon/android/）

    36*36    drawable-ldpi/icon.png
    
48*48    drawable-mdpi/icon.png
    
72*72    drawable-hdpi/icon.png
    
96*96    drawable-xhdpi/icon.png
    
144*144  drawable-xxhdpi/icon.png

  • iOS图标具体规格如下（存放目录：res/icon/ios/）

    57*57   icon.png
    
114*114 icon@2x.png
    
29*29   icon-small.png
    
58*58   icon-small@2x.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

应用程序启动页面

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

    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启动页面和图标的设置的更多相关文章

  1. cordova- cordova-plugin-splashscreen启动页面和图标的设置

    https://www.cnblogs.com/a418120186/p/5856371.html

  2. phonegap/cordova 启动页面

    启动phonegap应用时,因为phonegap还在加载一系列的东西,总会出现一段时间的黑屏.解决方法是设置一个启动页面(闪屏)来过渡,让应用的用户体验更好一些. 先讲ios版本的: 首先,你需要准备 ...

  3. IOS 启动画面和图标设置(适配IOS7 and Xcode5)

    关于IOS程序设置启动画面以及图标的设备目前主要为:IPhone设备 和IPad设备 IPhone启动画面以及图标的设置 目前IPhone的分辨率为:320X480.640X960.640X1136. ...

  4. Tomcat设置默认启动项目及Java Web工程设置默认启动页面

    Tomcat设置默认启动项目 Tomcat设置默认启动项目,顾名思义,就是让可以在浏览器的地址栏中输入ip:8080,就能访问到我们的项目.具体操作如下: 1.打开tomcat的安装根目录,找到Tom ...

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

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

  6. cordova StatusBar插件的使用（设置手机状态栏颜色和页面头部颜色一致），做出和原生一样的页面效果体验

    cordova StatusBar插件的使用(设置手机状态栏颜色和页面头部颜色一致),做出和原生一样的页面效果体验设置设备状态栏背景颜色StatusBar.backgroundColorByHexSt ...

  7. iOS-APP-Icon 图标启动图及名字的设置

    本文讲下appIcon图标.启动图及名字的设置 icon for iOS 图标大小参照苹果官网:https://developer.apple.com/library/ios/qa/qa1686/_i ...

  8. iOS开发-APP图标、启动页、名字的设置

    APP图标.启动页.名字的设置:(较全面,但是APP启动页讲述的有漏洞) 参考链接:https://www.jianshu.com/p/2c7e181276ff APP启动页:(弥补上一文的漏洞) 参 ...

  9. iOS 设置启动页面 时间

    [NSThread sleepForTimeInterval:3.0];  时间越大  ,启动页面停留的时间越长 iOS 8之后,,创建项目自带的有  LaunchScreen.xib  可直接用

随机推荐

  1. CUDA并行编程思维过程

    CUDA并行编程思维过程 1)确定应用程序中需要且可以并行化的部分 2)将并行化代码中需要用到的数据分离出来,具体方法是用API函数在并行技术设备上分配内存空间 3)用API函数将数据传输到并行计算设 ...

  2. bash编程-grep

    grep, egrep, fgrep :输出匹配模式的行 grep:支持基本正则表达式元字符(grep -E相当于egrep) egrep:支持扩展正则表达式元字符(egrep -G相当于grep) ...

  3. 库函数wordcloud安装的问题

    在对python有了一定的了解之后就对python的第三方库产生了十分浓厚的兴趣,因为python的很多功能都是要依靠第三方库函数来实现的,而且在计算机二级刚刚加入的python考试中也有对第三方库的 ...

  4. rabbitMq 初步

    RabbitMQ的工作原理 它的基本结构 组成部分说明如下: Broker:消息队列服务进程,此进程包括两个部分:Exchange和Queue. Exchange:消息队列交换机,按一定的规则将消息路 ...

  5. 分布式任务调度系统xxl-job搭建

    为解决分布式环境下定时任务的可靠性,稳定性,只执行一次的特性,我找到了个大众点评开源的分布式调度任务解决完整系统,下面我将一步步深入解读该系统,从基本的使用到源码的探究 下载 https://gith ...

  6. ubuntu环境下编译linux内核问题解决备忘

    在使用比较新的gcc编译内核时,经常遇到这个问题: 问题一: 提示: mkimage" command not found - U-Boot images will not be built ...

  7. win10 + gluon + GPU

    1. 下载教程 可以用浏览器下载zip格式并解压,在解压目录文件资源管理器的地址栏输入cmd进入命令行模式. 也可以 git pull https://github.com/mli/gluon-tut ...

  8. python之发送邮件~

    在之前的工作中,测试web界面产生的报告是自动使用python中发送邮件模块实现,在全部自动化测试完成之后,把报告自动发送给相关人员 其实在python中很好实现,一个是smtplib和mail俩个模 ...

  9. HTTPS到底是个什么鬼？

    HTTPS随处可见,那么它到底是个什么鬼?本文我们一起来探讨一下HTTPS为什么是安全的,以及HTTPS连接建立的过程. 一.HTTPS为什么是安全的? HTTP使用明文通信,可能会被第三方窃听.篡改 ...

  10. 爽爽的GSON解析

    Gson解析的各种详细用法我就不说了. 说说我在项目具体遇到的. 当前公司的JSON解析基本上通过阿里的fastjson,以及JSONObject,JSONArray来解析.那种让我无语的感觉不是言语 ...