Heim > Web-Frontend > HTML-Tutorial > 给你的Cordova HybridApp添加Splash启动页面_html/css_WEB-ITnose

给你的Cordova HybridApp添加Splash启动页面_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:59:02
Original
1389 Leute haben es durchsucht

现在最新的Cordova 3以上的版本支持启动画面了,是通过cordova插件实现的。

目前Splash插件支持android,ios,blackberry等多个平台。


添加插件等过程如下:

添加SplashScreen插件

在cordova项目目录运行:

cordova plugin add org.apache.cordova.splashscreen
Nach dem Login kopieren

这个命令从插件git库下载插件代码到在工程的plugins目录下


修改config.xml配置文件

    <preference name="SplashScreen" value="screen"></preference> <!-- 不带后缀png的文件名,默认是screen-->    <preference name="SplashScreenDelay" value="3000"></preference> <!-- Splash显示时间,默认是3000ms-->    <feature name="SplashScreen">        <param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen">    </feature>
Nach dem Login kopieren


修改启动图片

可以看到启动图片的名字是screen.png,工程下有一些screen.png默认图片了,上面显示的是cordova logo,下面需要把这些图片换成你自己的启动画面,不需要支持的尺寸图片直接删掉就可以了。


在设备初始化完成后隐藏Splash画面

document.addEventListener("deviceready", onDeviceReady, false);  function onDeviceReady() {    navigator.splashscreen.hide();  }  
Nach dem Login kopieren

如果使用了ionic框架,直接在app.js 文件的  .run(['$ionicPlatform', function ($ionicPlatform) {   ... } 里面加上 
navigator.splashscreen.hide();
Nach dem Login kopieren

就可以了。


现在再运行你的App,应该可以看到启动画面了。


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage