ionic解决启动白屏问题

布满荆棘的人生 2022-05-26 10:15 668阅读 0赞

# ionic解决启动白屏问题 #

参考资料：

*  [cordova启动页面和图标的设置][cordova]
 *  [ionic2常见问题-启动后白屏问题][ionic2_-]

app启动后大概有几秒白屏,才会显示首页,下面介绍如何通过设置启动页来解决启动白屏问题：

## config.xml配置 ##

> 在cordova5.0版本以后，需要安装`cordova-plugin-splashscreen`插件以后才能修改和设置App的启动页面。

### 安装splashscreen插件： ###

cordova plugin add cordova-plugin-splashscreen
    或
    cordova plugin add https: //github.com/apache/cordova-plugin-splashscreen.git

### 基本配置 ###

然后在你的config.xml文件中，添加以下代码来设置APP的图标和启动页的图片：

<platform name="android">
    <icon density="ldpi" src="res/icon/android/icon-36-ldpi.png" />
    <icon density="mdpi" src="res/icon/android/icon-48-mdpi.png" />
    <icon density="hdpi" src="res/icon/android/icon-72-hdpi.png" />
    <icon density="xhdpi" src="res/icon/android/icon-96-xhdpi.png" />
    <icon density="xxhdpi" src="res/icon/android/icon-144-xxhdpi.png" />
    <icon density="xxxhdpi" src="res/icon/android/icon-192-xxxhdpi.png" />
    
    <splash density="land-hdpi" src="res/screen/android/splash-land-hdpi.png" />
    <splash density="land-ldpi" src="res/screen/android/splash-land-ldpi.png" />
    <splash density="land-mdpi" src="res/screen/android/splash-land-mdpi.png" />
    <splash density="land-xhdpi" src="res/screen/android/splash-land-xhdpi.png" />
    <splash density="port-hdpi" src="res/screen/android/splash-port-hdpi.png" />
    <splash density="port-ldpi" src="res/screen/android/splash-port-ldpi.png" />
    <splash density="port-mdpi" src="res/screen/android/splash-port-mdpi.png" />
    <splash density="port-xhdpi" src="res/screen/android/splash-port-xhdpi.png" />
    </platform>
    <platform name="ios">
    
    
    <icon src="res/icon/ios/icon-60@3x.png" width="180" height="180" />
    
    
    <icon src="res/icon/ios/icon-60.png" width="60" height="60" />
    <icon src="res/icon/ios/icon-60@2x.png" width="120" height="120" />
    
    <icon src="res/icon/ios/icon-76.png" width="76" height="76" />
    <icon src="res/icon/ios/icon-76@2x.png" width="152" height="152" />
    
    
    <icon src="res/icon/ios/icon-40.png" width="40" height="40" />
    <icon src="res/icon/ios/icon-40@2x.png" width="80" height="80" />
    
    <icon src="res/icon/ios/icon.png" width="57" height="57" />
    <icon src="res/icon/ios/icon@2x.png" width="114" height="114" />
    
    <icon src="res/icon/ios/icon-72.png" width="72" height="72" />
    <icon src="res/icon/ios/icon-72@2x.png" width="144" height="144" />
    
    <icon src="res/icon/ios/icon-small.png" width="29" height="29" />
    <icon src="res/icon/ios/icon-small@2x.png" width="58" height="58" />
    <icon src="res/icon/ios/icon-small@3x.png" width="87" height="87" />
    
    <icon src="res/icon/ios/icon-50.png" width="50" height="50" />
    <icon src="res/icon/ios/icon-50@2x.png" width="100" height="100" />
    
    
    <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"/>
    </platform>

### 其他配置 ###

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

若要使用启动页面淡入淡出的效果，则还需添加如下配置：

<preference name="FadeSplashScreen" value="true" />
    
    
    <preference name="SplashMaintainAspectRatio" value="true"/>
    <preference name="FadeSplashScreenDuration" value="500" />

## 隐藏启动页 ##

splashscreen插件提供有以下两个方法：

navigator.splashscreen.hide();//隐藏启动页面
    
    navigator.splashscreen.show();//显示启动页面

你可以在`$ionicPlatform.ready`中调用上面的hide方法，也可以引入`$cordovaSplashScreen`,然后使用`$cordovaSplashScreen.hide()`隐藏启动页。如果是ionic2则采用如下方式：

![700][]

[cordova]: https://www.jianshu.com/p/3ad9538cf5fe
[ionic2_-]: https://www.jianshu.com/p/102bd23625cb
[700]: /images/20220526/85a3d5a4d48345069141aec43b31ad8e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，668人围观）

还没有评论，来说两句吧...

相关阅读

相关解决启动Android应用程序时出现白屏或者黑屏的问题

一般情况下，启动页面通常是全屏的，而且会用一张图片来展示用户打开应用程序后第一眼看到的界面。在手机中点击应用程序的图标到应用程序显示完MainActivity的视图这个过程中，

ゝ一纸荒年。/ 2022年11月16日 01:39/ 0 赞/ 461 阅读

相关 Android 启动页消除白屏

一、背景在做启动页的时候如果把启动图片放在activity中，在低端的设备上会出现白屏或者黑屏的情况，为了消除白屏我们需要在app启动的过程中设置一张默认图片来避免白屏

冷不防/ 2022年09月04日 02:41/ 0 赞/ 274 阅读

相关 Android启动欢迎界面前黑屏或白屏完美解决办法

我们只需要将欢迎页面的主题设置为透明就可以了首先可以在style.xml中定义一个主题，该主题继承我们app当前的主题，然后添加一个透明属性，比如我们app当前的主题为Ap

「爱情、让人受尽委屈。」/ 2022年06月17日 03:59/ 0 赞/ 355 阅读

相关启动APP黑屏白屏的原因及解决办法

在我们打开APP的时候，总是会删一下白屏，或者黑屏，所以今天针对这个问题做一下自己的见解。为什么在启动APP时，会出现白屏或者黑屏那？其实出现黑白屏

布满荆棘的人生/ 2022年06月06日 05:42/ 0 赞/ 7587 阅读

相关 ionic 启动问题

作者：LoveEmperor-王子様 1.问题： Node Sass could not find a binding for your current environme

矫情吗；*/ 2022年05月30日 08:54/ 0 赞/ 142 阅读

相关 ionic解决启动白屏问题

ionic解决启动白屏问题参考资料： [cordova启动页面和图标的设置][cordova] [ionic2常见问题-启动后白屏问题][ionic2_-

布满荆棘的人生/ 2022年05月26日 10:15/ 0 赞/ 669 阅读

相关启动白屏终极解决方案

React Native启动白屏是一个很普遍但又很严重的问题，网上也有很多文章，这里就此问题，从分析到常用的解决方案做一个简单的总结。先看图，白屏的现象: ![白屏现象]

曾经终败给现在/ 2022年05月21日 03:23/ 0 赞/ 390 阅读

相关 Android 解决APP启动时出现白屏问题

1、问题描述当我们首次启动APP时，再到APP的第一个页面展示出来之前，这段时间会有几秒的白屏或者是黑屏出现。这样给用户的体验是十分不好的。 2、问题出现的原因：

朴灿烈づ我的快乐病毒、/ 2022年05月19日 10:50/ 0 赞/ 920 阅读

相关 android app启动慢黑屏白屏的问题解决方案

1、处理闪屏的问题需要在valus下的styles.xml下处理下面是路径没有就新建一个 ![watermark_type_ZmFuZ3poZW5naGVpdGk_sha

向右看齐/ 2022年04月22日 07:30/ 0 赞/ 277 阅读

相关 ionic成ipa安装之后打开白屏

这里可能是配置的问题 1，条款配置文件 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG

我不是女神ヾ/ 2022年04月08日 09:16/ 0 赞/ 192 阅读