如何在Ionic Creator中添加图标和闪屏?

时间:2017-02-09 09:34:59

标签: angularjs ionic-framework

我使用以下方法添加了splashscreen插件:     cordova插件添加cordova-plugin-splashscreen

我有图标和启动画面的图像,并将它们添加到资源文件夹中,并将此代码添加到我的controller.js中:

.post

我在config.xml中添加了以下内容:

.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        setTimeout(function() {
            navigator.splashscreen.hide();
        }, 300);
    });
})

还有这个:

<preference name="ShowSplashScreen" value="true" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />
<preference name="AutoHideSplashScreen" value="true" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="FadeSplashScreen" value="false" />
<feature name="SplashScreen">
    <param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen" />
</feature>

但是在构建我的应用程序(使用adobe的在线phonegap构建器)后,图标显示,但应用程序以空白屏幕开始几秒而不是启动画面。可能是什么问题?

1 个答案:

答案 0 :(得分:0)

添加插件:

$ ionic plugin add org.apache.cordova.splashscreen
$ ionic platform add android
$ ionic build android
$ ionic run android

创建映像后,必须通过在config.xml中添加以下内容将其包含在项目中:

<splash src="pathtosplashimage" />

示例配置

在顶级config.xml文件(不是平台中的文件)中,添加如此处指定的配置元素。

请注意&#34; src&#34;的价值属性是相对于项目根目录而不是www目录(请参阅下面的目录结构)。您可以随意命名源图像。应用程序中的内部名称由Cordova确定。

目录结构:

projectRoot
    hooks
    platforms
    plugins
    www
        css
        img
        js
    res
        screen
            android
            ios
            windows


<platform name="android">
    <!-- you can use any density that exists in the Android project -->
    <splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>
    <splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/>
    <splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/>
    <splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>

    <splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/>
    <splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi"/>
    <splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi"/>
    <splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi"/>
</platform>

<platform name="ios">
    <!-- There are two mechanisms for showing launch images.
      -- Legacy method (supports all devices except iPad Pro 12.9):
      -- Note: Images are determined by width and height. The following are supported -->
    <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"/>
    <!-- Storyboard method (supports all devices):
      -- Important: If you use the storyboard method, legacy images are 
      -- copied but ignored.
      -- Note: images are determined by scale, idiom, and size traits. The following
      -- are suggested based on current device form factors -->
    <splash src="res/screen/ios/Default@2x~universal~anyany.png" />
    <splash src="res/screen/ios/Default@2x~universal~comany.png" />
    <splash src="res/screen/ios/Default@2x~universal~comcom.png" />
    <splash src="res/screen/ios/Default@3x~universal~anyany.png" />
    <splash src="res/screen/ios/Default@3x~universal~anycom.png" />
    <splash src="res/screen/ios/Default@3x~universal~comany.png" />

</platform>

<preference name="SplashScreenDelay" value="10000" />

可在https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/

上找到更多信息