2016-03-21 42 views
9

我一直在尝试一遍又一遍的启动画面添加到我的应用程序离子与 此配置的图标不工作,但splashscreen不工作。它显示黑屏,甚至没有cordova默认splashscreen.离子应用闪屏不显示

<?xml version="1.0" encoding="UTF-8" standalone="yes"?> 
<widget id="com.ionicframework.toggle423609" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> 
    <name>Toggle</name> 
    <description> 
     An Ionic Framework and Cordova project. 
    </description> 
    <author email="[email protected]" href="http://example.com.com/"> 
     Your Name Here 
    </author> 
    <content src="index.html"/> 
    <access origin="*"/> 
    <preference name="webviewbounce" value="false"/> 
    <preference name="UIWebViewBounce" value="false"/> 
    <preference name="DisallowOverscroll" value="true"/> 
    <preference name="android-minSdkVersion" value="16"/> 
    <preference name="BackupWebStorage" value="none"/> 
    <preference name="SplashScreen" value="screen"/> 
    <preference name="SplashScreenDelay" value="3000"/> 
    <preference name="AutoHideSplashScreen" value="false" /> 

    <feature name="StatusBar"> 
    <param name="ios-package" value="CDVStatusBar" onload="true"/> 
    </feature> 
    <platform name="android"> 
    <icon src="resources/android/icon/drawable-ldpi-icon.png" density="ldpi"/> 
    <icon src="resources/android/icon/drawable-mdpi-icon.png" density="mdpi"/> 
    <icon src="resources/android/icon/drawable-hdpi-icon.png" density="hdpi"/> 
    <icon src="resources/android/icon/drawable-xhdpi-icon.png" density="xhdpi"/> 
    <icon src="resources/android/icon/drawable-xxhdpi-icon.png" density="xxhdpi"/> 
    <icon src="resources/android/icon/drawable-xxxhdpi-icon.png" density="xxxhdpi"/> 
    <splash src="resources/android/splash/drawable-land-ldpi-screen.png" density="land-ldpi"/> 
    <splash src="resources/android/splash/drawable-land-mdpi-screen.png" density="land-mdpi"/> 
    <splash src="resources/android/splash/drawable-land-hdpi-screen.png" density="land-hdpi"/> 
    <splash src="resources/android/splash/drawable-land-xhdpi-screen.png" density="land-xhdpi"/> 
    <splash src="resources/android/splash/drawable-land-xxhdpi-screen.png" density="land-xxhdpi"/> 
    <splash src="resources/android/splash/drawable-land-xxxhdpi-screen.png" density="land-xxxhdpi"/> 
    <splash src="resources/android/splash/drawable-port-ldpi-screen.png" density="port-ldpi"/> 
    <splash src="resources/android/splash/drawable-port-mdpi-screen.png" density="port-mdpi"/> 
    <splash src="resources/android/splash/drawable-port-hdpi-screen.png" density="port-hdpi"/> 
    <splash src="resources/android/splash/drawable-port-xhdpi-screen.png" density="port-xhdpi"/> 
    <splash src="resources/android/splash/drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/> 
    <splash src="resources/android/splash/drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/> 
    </platform> 
    <platform name="ios"> 
    <icon src="resources/ios/icon/icon.png" width="57" height="57"/> 
    <icon src="resources/ios/icon/[email protected]" width="114" height="114"/> 
    <icon src="resources/ios/icon/icon-40.png" width="40" height="40"/> 
    <icon src="resources/ios/icon/[email protected]" width="80" height="80"/> 
    <icon src="resources/ios/icon/icon-50.png" width="50" height="50"/> 
    <icon src="resources/ios/icon/[email protected]" width="100" height="100"/> 
    <icon src="resources/ios/icon/icon-60.png" width="60" height="60"/> 
    <icon src="resources/ios/icon/[email protected]" width="120" height="120"/> 
    <icon src="resources/ios/icon/[email protected]" width="180" height="180"/> 
    <icon src="resources/ios/icon/icon-72.png" width="72" height="72"/> 
    <icon src="resources/ios/icon/[email protected]" width="144" height="144"/> 
    <icon src="resources/ios/icon/icon-76.png" width="76" height="76"/> 
    <icon src="resources/ios/icon/[email protected]" width="152" height="152"/> 
    <icon src="resources/ios/icon/icon-small.png" width="29" height="29"/> 
    <icon src="resources/ios/icon/[email protected]" width="58" height="58"/> 
    <icon src="resources/ios/icon/[email protected]" width="87" height="87"/> 
    <splash src="resources/ios/splash/[email protected]~iphone.png" height="1136" width="640"/> 
    <splash src="resources/ios/splash/Default-667h.png" height="1334" width="750"/> 
    <splash src="resources/ios/splash/Default-736h.png" height="2208" width="1242"/> 
    <splash src="resources/ios/splash/Default-Landscape-736h.png" height="1242" width="2208"/> 
    <splash src="resources/ios/splash/[email protected]~ipad.png" height="1536" width="2048"/> 
    <splash src="resources/ios/splash/Default-Landscape~ipad.png" height="768" width="1024"/> 
    <splash src="resources/ios/splash/[email protected]~ipad.png" height="2048" width="1536"/> 
    <splash src="resources/ios/splash/Default-Portrait~ipad.png" height="1024" width="768"/> 
    <splash src="resources/ios/splash/[email protected]~iphone.png" height="960" width="640"/> 
    <splash src="resources/ios/splash/Default~iphone.png" height="480" width="320"/> 
    </platform> 
</widget> 
+0

您是否安装该插件到您的项目? cordova插件添加org.apache.cordova.splashscreen –

+0

插件“cordova-plugin-splashscreen”已经安装并且 插件“cordova-plugin-splashscreen”已经安装在ios上不起作用 – sridharan

回答

15
  1. 首先尝试readding你的插件:

    $ ionic plugin remove cordova-plugin-splashscreen 
    $ ionic plugin add cordova-plugin-splashscreen 
    
  2. 然后在你的resources文件夹编辑splash图像。在CLI
  3. 运行$ ionic resources --splash重建$ ionic build android并运行你的应用程序

检查Ionic documentation - Icon and Splash Screen Image Generation

如果不工作,你应该删除并重新进行添加的平台上,您遇到的问题。

$ cordova platform remove android (or ios) 
$ cordova platform add android (or ios) 
+0

我完成了这一切步骤不起作用 – sridharan

+0

D :\ nodejs \ Toggle> cordova platfotm remove android 错误:科尔多瓦不知道platfotm;尝试使用'cordova help'获取所有可用命令的列表 。 – sridharan

+0

“cordova平台移除android”之后,CLI正是如此吗?你在Mac上吗? – sznrbrt

1

我们正在尝试使用以下配置系统更新离子应用程序的启动画面,但失败:

Cordova CLI: 6.4.0 Ionic CLI Version: 2.1.7 Ionic App Lib Version: 2.1.4 ios-deploy version: 1.9.0 ios-sim version: 5.0.11 OS: macOS Sierra Node Version: v6.9.1 Xcode version: Xcode 8.1 Build version 8B62

我们能够产生闪屏并修复问题在下面配置系统:

Cordova CLI: 6.3.1 Gulp version: CLI version 3.9.1 Gulp local: Local version 3.9.1 Ionic Framework Version: 1.2.4 Ionic CLI Version: 2.1.0 Ionic App Lib Version: 2.1.0-beta.1 ios-deploy version: Not installed ios-sim version: Not installed OS: Mac OS X El Capitan Node Version: v6.6.0 Xcode version: Xcode 8.1 Build version 8B62

+3

请不要在多个问题上发布相同的答案。发布一个很好的答案,然后投票/标记以重复关闭其他问题。如果问题不是重复的,*定制你对问题的回答。* –

+0

谢谢你现在得到它 –

6

删除并添加科尔多瓦

$ cordova platform remove android (or ios) 
    $ cordova platform add android (or ios) 

您将得到一个带有图标和闪屏的/res文件夹。内容来自/res复制并粘贴到platfomrs/android/res,这将取代标准图标和闪屏。

然后建立自己的应用程序,你会得到你的自定义图像。

我用过的离子标签模板,无需改动。

+0

现在我在ionic2上,这些文件没有命名为'drawable-port-xhdpi-screen.png',而是'screen.png '并存储在名为'drawable-port-ldpi'的单独文件夹中。不得不复制粘贴并手动重命名 –

1

我也同样的问题,我解决了手动转到路径MY_PROJECT\platforms\android\res和删除drawable*mipmap*,然后从MY_PROJECT\res复制drawable*mipmap*,然后再

9

重新构建项目这里是你的答案!

如果您使用的科尔多瓦6.4。0(在终端打cordova -v检查版本),你将面临这个问题(图标和启动画面不会生成后生成)

为了解决这个问题,你有两个选择:

  1. 更改字密度限定符在您的config.xml。例如。把

<icon src="resources\android\icon\drawable-ldpi-icon.png" qualifier="ldpi"/>代替<icon src="resources\android\icon\drawable-ldpi-icon.png" density="ldpi"/>。建立该项目。将工作。

  1. 只需在您的终端中安装cordova版本6.3.1,然后点击npm install -g [email protected]即可。删除然后添加平台,进一步构建它。奇迹般有效!!。

Regards !! :p

+0

我不知道为什么这是downvoted,但它解决了我的问题。我一直在尝试4天来弄清楚这一点,我所要做的就是更新我的科尔多瓦。 –

+0

这对我来说也很完美。谢谢! – Atle

+0

是的,它的工作。请从“密度”更改为“限定符”以获得飞溅 –

3

我闪屏WASN也不会出现(离子3)。我发现这个Link非常有帮助。在​​3210这些条目为我做的伎俩:

<preference name="SplashMaintainAspectRatio" value="true"/> 
<preference name="SplashScreen" value="screen"/> 
<preference name="SplashScreenDelay" value="30000"/> 
<preference name="AutoHideSplashScreen" value="false"/> 
<preference name="SplashShowOnlyFirstTime" value="false"/> 
<preference name="FadeSplashScreen" value="false"/> 
0

检查您是否已经安装了“科尔多瓦 - 插件,闪屏”插件(在plugins/文件夹或通过运行ionic cordova plugins(用于离子V3 +)或ionic plugins命令(旧的离子型版本)

如果它不存在运行:
ionic plugin add cordova-plugin-splashscreen(离子型V1 - V2)
ionic cordova plugin add cordova-plugin-splashscreen(离子V3 +)

如果没有插件,iOS仍然会短暂显示启动画面,但Android不会。

+0

请注意,如果您有大量插件,请尝试'离子插件| grep splash'(Ionic v1-v2)或者离子cordova插件| grep splash'(Ionic v3 +)查找插件已安装。如果是 - 你会看到类似于下面的输出'cordova-plugin-splashscreen 4.0.3“Splashscreen”' –

0

使用以下命令

$ionic cordova plugin add cordova-plugin-splashscreen 
    $npm install --save @ionic-native/splash-screen 

添加下面一行在你的config.xml文件

<preference name="FadeSplashScreen" value="false" /> 
<preference name="AutoHideSplashScreen" value="false" /> 

同时添加在你的应用程序开机画面科尔多瓦插件,在app.component删除SplashScreen.hide() 。TS文件

更多细节与例子,请访问:https://answerdone.blogspot.com/2018/02/ionic-3-splash-screen-plugins.html