插件地址:https://github.com/apache/cordova-plugin-splashscreen
config.xml
<!--<preference name="SplashScreen" value="screen"/>-->
<!--<preference name="SplashScreenDelay" value="3000"/>-->
<preference name="SplashScreen" value="screen"/>
<!--指定多少毫秒后隐藏,默认3s-->
<preference name="SplashScreenDelay" value="1000"/>
<!--是否自动隐藏,默认为true。BlackBerry 10, WP8, iOS,AutoHideSplashScreen必须为false。-->
<preference name="AutoHideSplashScreen" value="false" />
<preference name="auto-hide-splash-screen" value="false"/>
<!--设置为false来隐藏闪屏转轮-->
<preference name="ShowSplashScreenSpinner" value="false"/>
<!--SplashMaintainAspectRatio设置为true,表示splash screen是可拉不是伸展以适应屏幕-->
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="SplashShowOnlyFirstTime" value="false"/>
<!--ios-->
<!--设置为false阻止splash screen淡入淡出的时候显示的状态变化,默认true-->
<preference name="FadeSplashScreen" value="false"/>
app.js
$ionicPlatform.ready(function () {
setTimeout(function() {
navigator.splashscreen.hide();
}, 1000);
// navigator.splashscreen.hide();
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleLightContent();
}
});
引用资料:http://pan.baidu.com/s/1OCHIm
一 、快速配置使用
1、项目还没有添加platform,在命令行中,切换到当前项目目录下,为项目添加platform,执行ionic platform add android或ionic platform add ios。添加platform后,ionic会给项目添加默认的icon和splash。
项目目录结构如下:
项目根目录下的config.xml部分内容:
2、把ionic默认的icon和splash删掉,即resources目录里东西和config.xml里的platform元素,然而在resources目录中放入自己的icon和splash图像文件:
3、在命令行中,切换到当前项目目录下,执行ionic resources命令,执行结果:
4、编译,执行ionic build android/ios命令;运行,模拟器上执行ionic emulate android/ios命令、手机上执行ionic run android/ios。
5、查看结果,splash screen是一个空白图片。
APP图标
APP启动画面
二、进阶部分
1、icon和splash图像资源
注意:这目录名字和图像文件名字必须是这样的,不能是其他名字,否则生成不了。图像文件格式可以是.png、.psd、.ai格式;icon图像文件大小最小192×192 px,且不能为圆角;splash图像文件大小最小2208x2208px,中间区域1200x1200px。
执行命令生成资源之前,一定要为项目添加android或iso platform否则会报错:
生成图片后,命令行会更新项目中config.xml文件,添加icon和splash screens配置。这个过程是cordova构建的,要求cordova是3.6版本之上。
src是相对项目根目录,不是www目录。
ionic resources命令是两种图像都生成,也是指定只生成其中一个。
可以在platform元素后面添加,第二句表示10s后隐藏启动画面,默认是3s。
2、生成指定platform的资源
ionic resources android/ios
ionic resources默认情况,会根据添加的平台生成图片资源。然而指定platform,即使这个platform没有添加到项目中,也会生成资源的。下面是生成ios的icon和splash资源。
3、Ionic默认的资源
执行上面命令,会使用ionic提供的icon和splash。如果项目已经存在resources目录,这个命令不会覆盖你文件。如果想覆盖,执行
ionic resources –default –force
在为项目添加平台时,会添加默认的icon和splash。
4、cordova-plugin-splashscreen插件
4.1、安装
ionic plugin add cordova-plugin-splashscreen
或
ionic plugin add https://github.com/apache/cordova-plugin-splashscreen.git
4.2、支持platform
4.3、配置(config.xml)
指定splash screen资源的名字
是否自动隐藏,默认为true。BlackBerry 10, WP8, iOS,AutoHideSplashScreen必须为false。
指定多少毫秒后隐藏,默认3s
配置了上面这些,启动APP就有启动画面
4.4、android
在config.xml文件配置:
foo是splashscreen文件名字,确定把splashscreen文件添加到res/xml目录中。SplashMaintainAspectRatio设置为true,表示splash screen是可拉不是伸展以适应屏幕。
4.5、browser
4.6、ios
设置为false阻止splash screen淡入淡出的时候显示的状态变化,默认true
执行启动画面褪色效果时间,默认2s
设置为false,隐藏splash-screen spinner,默认true
4.7、方法
navigator.splashscreen.show();
显示splash screen
navigator.splashscreen.hide();
隐藏splash screen