一. 安装splashscreen插件(cmd 切换到项目目录下)
cordova plugin add cordova-plugin-splashscreen
二. 找到项目下的config.xml
注意:这个文件是在cordova项目最外层的config.xml
文件(不是某个平台内的),如下图:
1.配置如下属性
// 拉伸
<preference name="SplashMaintainAspectRatio" value="true"/>
// 淡入效果
<preference name="FadeSplashScreen" value="true" />
// 淡入延时
<preference name="FadeSplashScreenDuration" value="300" />
// 是否仅首次显示
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
// 启动页延时
<preference name="SplashScreenDelay" value="3000" />
// 自动隐藏 默认true
<preference name="AutoHideSplashScreen" value="false" />
// 隐藏启动页中级的loading
<preference name="ShowSplashScreenSpinner" value="false"/>
2.在项目目录下新建res
文件夹,在res
创建screen
文件夹,在screen
下继续创建android
和ios
文件夹,然后分别创建icon
和splash
文件夹,如图:
3.根据自身创建的文件路径,在config.xml
添加的相应路径资源
三.手动控制启动页的隐藏
默认情况下,启动画面展示时间一到就会自动消失。有时我们需要其不要自动消失,而是在程序中进行控制。
比如等到页面初始化加载数据完毕后再将其隐藏。具体实现步骤如下:
1. 首先在配置中将自动隐藏设为 false(默认是不手动关闭的true)
<preference name="AutoHideSplashScreen" value="false" />
<preference name="FadeSplashScreen" value="false"/>
2.在需要的地方使用如下js方法隐藏启动页,需要用在deviceready事件之后
setTimeout(function() {
navigator.splashscreen.hide();
}, 3000);
如下图