跨平台移动开发phonegap/cordova 3.3全系列教程-app启动画面

1.app启动画面设计

用photoshop设计启动画面,图片分辨率为720*1280

跨平台移动开发phonegap/cordova 3.3全系列教程-app启动画面_第1张图片

跨平台移动开发phonegap/cordova 3.3全系列教程-app启动画面_第2张图片

保存的文件名为splash.png

将splash.png复制到res\drawable,如图

跨平台移动开发phonegap/cordova 3.3全系列教程-app启动画面_第3张图片

PS:要先添加闪屏插件才能使用(示例中已经添加,此步略过)

cordova plugin add org.apache.cordova.splashscreen

修改res\xml\config.xml加入

此节点为使用启动画面

<preferencename="SplashScreen"value="splash"/>

此节点为启动画面延时单位为毫为,建议设置为20秒(防止网络延时,程序没有加载完成,导致黑屏。

<preferencename="SplashScreenDelay"value="20000"/>

如图

跨平台移动开发phonegap/cordova 3.3全系列教程-app启动画面_第4张图片

App启动成功后关闭启动画面

在启动的页面中加入代码,设备初始化后,隐藏启动画面

document.addEventListener("deviceready", onDeviceReady,false);

            function onDeviceReady() {

                navigator.splashscreen.hide();      

}

启动app调试即可看到效果


针对程序员的养生保健微信18136761128(专治颈椎、久坐导到慢性疾病,已经上央视了,假一罚十)

你可能感兴趣的:(cordova,phonegap,移动开发,跨平台,photoshop)