一、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
以上内容若有错误,欢迎批评指正。若侵犯他人版权,请联系我。

最新文章

  1. 2016 Web开发资源工具大搜罗
  2. iOS正则表达式
  3. 【leetcode】Reverse Linked List II (middle)
  4. Hadoop - Zeppelin 使用心得
  5. 多线程Java Socket编程示例(转)
  6. css filter详解
  7. Effective C++学习笔记——构造/析构/拷贝运算
  8. 深入浅出:JavaScript作用域链
  9. si_da
  10. java.lang.String &amp; java.lang.StringBuilder
  11. To handling editor letter
  12. 在C#中的构造函数和解析函数
  13. 【uoj336】【清华集训2017】无限之环
  14. docker使用大全 tomcat安装
  15. 修改Unity中Lua文件的默认打开程序
  16. makefile 使用 Tricks
  17. [转帖] Linux运维基础知识学习内容
  18. RabbitMQ的安装部署
  19. java的不可变类
  20. poj 3308(最小点权覆盖、最小割)

热门文章

  1. 网页中的数据的4个处理方式:CRUD(Creat, Retrive, Update, Delete)
  2. [opentwebst]一个简单的登陆脚本
  3. 背水一战 Windows 10 (71) - 控件(控件基类): UIElement - RenderTransform(2D变换), Clip(剪裁)
  4. WebRTC 学习之 概念总结
  5. 仿B站项目(4)webpack打包第三方库jQuery
  6. Shell-7--环境变量配置文件
  7. jvm-垃圾回收gc简介+jvm内存模型简介
  8. [Objective-C语言教程]预处理器(18)
  9. [视频]K8飞刀 WordPress XSS添加管理员 &amp; GetShell 教程
  10. mysql 开发进阶篇系列 29 数据库二进制包安装