1、ionic 正确打包完app, 并且按照正常的步骤配置config.xml文件之后 ,启动页面还是不能正常的显示出来,而是黑了一下之后,就进入首页了

原因很有可能就是你没有装cordova-plugin-splashscreen这个插件,尝试安装:

cordova plugin add cordova-plugin-splashscreen

重新打包,即可显示出来启动页图片

2、启动页打开后会在图片消失会出现一小段黑屏的时间

解决方法:

首先,启动页的图片消失时间默认是在config.xml配置的

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

也就是3s后自动消失,但是往往这个时候,app的资源还没有加载完整,所以,会在消失后显示一小段时间黑屏;

因此,我们不要让他在config.xml配置自动消失,或者让他持续很长时间才消失,例如10s,然后我们在app.js 让他在设置资源加载完成准备就绪的时候才让他消失显示我们的app主页;

config.xml配置改为:

  <preference name="SplashScreen" value="screen"/>
<preference name="AutoHideSplashScreen" value="false"/>
<preference name="ShowSplashScreenSpinner" value="false"/>
<preference name="SplashMaintainAspectRatio" value="true"/>
<preference name="SplashShowOnlyFirstTime" value="false"/>
<preference name="SplashScreenDelay" value="10000"/>
<preference name="FadeSplashScreenDuration" value="300"/>

然后,app.js添加代码 navigator.splashscreen.hide(),如下:

app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true); }
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
//啟動頁面消失
navigator.splashscreen.hide();
});

这样,这个bug就可以解决了。ionic app 的细节问题很多,如果不尝试去解决的话,那app的体验将会很差,所以,尽量记录起来!

解决ionic 启动页面图片没有显示及启动页出现黑白屏的更多相关文章

  1. 得到设备是何种iPhone设备 + 怎么获得启动页面图片

    一.前言 今天做一个功能,需要动态的获得启动页,然后根据不同设备去使用不用的启动页图片. 二.正文 常规来说,我们直接判断是何种设备,然后通过name去获得图片选择性加载即可.但是实际上遇到的两个问题 ...

  2. 如何解决php 生成验证码图片不显示问题

    最近遇到一个问题,就是验证码在别人的电脑上可以显示,但是我自己的电脑上去不能.原因找了好久,哈哈,终于找到了!现在给大家分享一下: 程序: <?php $w = 80; //设置图片宽和高 $h ...

  3. uc浏览器手机版,页面图片不显示

    uc浏览器手机版,有时候上面的轮播广告看不到 原因:uc浏览器会拦截所有带ad的标签 例如: <div id="adDiv"> <img src="/r ...

  4. ionic 修改应用名称 、启动页出现黑白屏 及 修改百度离线地图 点聚合 图标

    1.ionic 修改应用名称 2.启动页打开后会在图片消失会出现一小段黑屏的时间 解决方法: 首先,启动页的图片消失时间默认是在config.xml配置的 <preference name=&q ...

  5. android 解决启动页面加载图片空白以及去掉标题栏

    有时候启动页面根据白天晚上来启动时实现加载不同的图片效果,但是加载时会出现短暂的空白,解决方法如下: android:theme="@android:style/Theme.Transluc ...

  6. Mac Github:第一次上传成功,解决图片不可显示,Initial commit Untracked files

    在上传之前需要先给自己的电脑安装SSH 上传成功用的是github的官方提示,直接复制去做就可以了 解决README.md中图片不可显示:图片路径到底要怎么写? https://blog.csdn.n ...

  7. IE11部分图片无法显示的兼容办法

    问题描述:写的网页在浏览器中测试兼容问题,FF,Chrome,Edge都完美兼容(包括Edge中的仿真),但是在IE11中却无法显示部分图片,并且报:DOM7009: 无法解码 URL 处的图像 错误 ...

  8. Android启动页面的正确打开方式 (转载)

    最近由于领导要求写一个手机APP,于是自学开始,不经意间想到使用过的手机APP在打开的时候都是会有一个启动页面,这是如何实现的呢?比较好奇,于是在网上搜到了以下这篇文章,经过个人实验的确可行,不过原文 ...

  9. Tomcat:解决Tomcat可以在eclipse启动,却无法显示默认页面的操作

    解决Tomcat可以在eclipse启动,却无法显示默认页面的操作 今天在eclipse中配置好tomcat后访问不到它的主页,但是能运行自己的项目,一直找不到原因,百度之后最后解决了这个问题,总结如 ...

随机推荐

  1. 【css系列】六种实现元素水平居中方法

    一.前言 居中效果在CSS中很是普通的效果,平时大家所看到的居中效果主要分为三大类:水平居中.垂直居中和水平垂直居中.而其中水平居中相对于后两者来说要简单得多.使用了css3的flexbox的属性轻松 ...

  2. 用 | 和 & 简化查询

    利用"|"和"&"简化查询 1.多个字段相同查询条件下用"&"处理 例如该情况: $model = M('Test'); $ ...

  3. HTTP 400 Bad request 原因

    我在使用httpclient 发送http请求时遇到问题,请求报 400 Bad request.网上都在说下面这两个原因 400 是 HTTP 的状态码,主要有两种形式: 1.bad request ...

  4. django第二次 (转自刘江)

    除了我们前面说过的普通类型字段,Django还定义了一组关系类型字段,用来表示模型与模型之间的关系. 一.多对一(ForeignKey) 多对一的关系,通常被称为外键.外键字段类的定义如下: clas ...

  5. Android的简述2

    android提供了三种菜单类型,分别为options menu,context menu,sub menu. options menu就是通过按home键来显示,context menu需要在vie ...

  6. netty源码解解析(4.0)-16 ChannelHandler概览

    本章开始分析ChannelHandler实现代码.ChannelHandler是netty为开发者提供的实现定制业务的主要接口,开发者在使用netty时,最主要的工作就是实现自己的ChannelHan ...

  7. Wireshark着色规则

    wireshark抓包蓝色和红色 在默认情况下 蓝色适合红色相反的方向 绿色背景的是HTTP包灰色背景的是TCP包.黑色背景的是TCP错误包或者校验和错误的包 有时候wireshark抓的包还有颜色区 ...

  8. 2.2.2python的BeautifulSoup库

    from bs4 import BeautifulSoupimport rebroken_html = '<ul class="country"><li>A ...

  9. 【译】在 Linux 上不安装 Mono 构建 .NET Framework 类库

    在这篇文章中,我展示了如何在Linux上构建针对.NET Framework版本的.NET项目,而不使用Mono.通用使用微软新发布的 Mocrosoft.NETFramework.Reference ...

  10. MQ如何解决消息的顺序性

    一.消息的顺序性 1.延迟队列:设置一个全局变量index,根据实际情况一次按照index++的逻辑一次给消息队列设置延迟时间段,可以是0.5s,甚至1s; 弊端:如果A,B,C..消息队列消费时间不 ...