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. PHPStrom激活方法【亲测有效2018.4.23】

    直接用浏览器打开 http://idea.lanyus.com/ 点击页面中的"获得注册码", 然后在注册时切换至Activation Code选项,输入获得的注册码一长串字符串 ...

  2. springboot - 登录+静态资源访问+国际化

    1.项目目录结构 2.pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmln ...

  3. CSRF_TOKEN

    目的是防御CSRF攻击. Token就是令牌,最大的特点就是随机性,不可预测. CSRF 攻击之所以能够成功,是因为黑客可以完全伪造用户的请求,该请求中所有的用户验证信息都是存在于 cookie 中, ...

  4. Java 之MVC动态分页完美实现

    一个分页小技术有时也是让人挠头,在这里完全前端实现方式与Java的实现方式,我们提供给你完全的编码参考,希望能够帮到你哦(:) 内容导读 1.程序结构 2.JSP页面设计 3.分页主要编码 4.运行效 ...

  5. spring boot 学习笔记之前言----环境搭建(如何用Eclipse配置Maven和Spring Boot)

    本篇文档来源:https://blog.csdn.net/a565649077/article/details/81042742 1.1 Eclipse准备 (1)     服务器上安装JDK和Mav ...

  6. 荔枝FM前端面试题

    最近接到了荔枝FM的面试通知,遗憾的是没有拿到offer,但是这次面试呢,还是收获很大的,下面就来给大家说说我遇到的面试题 一面 一面是直接发了一套面试题到邮箱,开启了防作弊的,限时20分钟做完,下面 ...

  7. 2、大型项目的接口自动化实践记录--接口测试简介及RequestsLibrary关键字简介

    1.接口测试简介 1)先简单介绍下接口测试,那么什么是接口测试呢? 百科的回答:接口测试是测试系统组件间接口的一种测试.接口测试主要用于检测外部系统与系统之间以及内部各个子系统之间的交互点. 看起来有 ...

  8. Linux下Docker以及portainer相关配置

    一.安装使用Docer CE 本文以CentOS 7为例,安装docker CE版本,docker有两种版本,社区版本CE和企业版本EE,此处学习研究以CE版本为例, 两种安装方式可选:1.使用yum ...

  9. Java.基础 -------- 一个Java源文件中可以有很多类,但只能有一个类是public的

    一个Java源文件中可以有很多类,但只能有一个类是public的        Java程序是从一个public类main函数开始执行的,只能有一个public是为了给类装载器提供方便,一个publi ...

  10. 算法与数据结构基础 - 字典树(Trie)

    Trie基础 Trie字典树又叫前缀树(prefix tree),用以较快速地进行单词或前缀查询,Trie节点结构如下: //208. Implement Trie (Prefix Tree)clas ...