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

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

其他配置

  • 自动隐藏启动页面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   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图标具体规格如下(存放目录:res/icon/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
    

应用程序启动页面

  • 安卓启动画面具体规格如下(存放目录: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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,716评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,558评论 1 294
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,431评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,127评论 0 209
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,511评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,692评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,915评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,664评论 0 202
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,412评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,616评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,105评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,424评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,098评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,096评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,869评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,748评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,641评论 2 271

推荐阅读更多精彩内容