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. [HDOJ] 1753.大明A+B (大数加法)

    Problem Description 话说,经过了漫长的一个多月,小明已经成长了许多,所以他改了一个名字叫"大明". 这时他已经不是那个只会做100以内加法的那个"小明 ...

  2. 01、HTML 简介

    实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title ...

  3. sonarlint在idea&eclipse中安装与使用

    介绍 ​ 代码质量管理的开源平台,用于管理源代码的质量 通过插件形式,可以支持包括java,C#,C/C++,PL/SQL,Cobol,JavaScrip,Groovy等等二十几种编程语言的代码质量管 ...

  4. es6的基本用法

    1. let和const <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  5. C#编程.异常处理(Exception Handling Statements)

    C#语言包含结构化异常处理(Structured Exception Handling,SEH). throw The throw statement is used to signal the oc ...

  6. NetCore跨平台桌面框架Avalonia的OSX程序打包

    虽然工作开发语言已经转到了java,但平时仍会用netcore做一些小工具,提升工作效率,但是笔记本换成了Mac,小工具只能做成命令行形式,很是痛苦,迫切需要一个.net跨平台的桌面程序解决方案. 为 ...

  7. manjaro配置记录

    一.换源 官方镜像源(包括 core, extra, community, multilib ) sudo pacman-mirrors -i -c China -m rank //更新镜像排名 su ...

  8. SpringBoot入门(二):日志及自定义属性

    这一章主要说springboot中日志的配置.自定义属性的配置与读取.分环境的yml配置文件(如本地环境.测试环境.生产环境等).比较偏向实际开发,较为实用,前面一章的一些基本创建在这里就不多废话了. ...

  9. 【iOS】“找不到使用指定主机名的服务器”

    今天用 Application Loader 提交 APP 的时,遇到了这个奇葩的问题,如下图: 后来换个网络解决了……我也不知道什么原因,就这么奇葩的弄好了……

  10. 记kepServer读写西门子PLC

    在程序开发过程中为了测试方法或者验证某个属性的值是否正确 经常通过Kepserver 的 OPC Quick Client来手动置点或者读取点位 例如 这里显示的值都是经过转化后得到的十进制值,那我们 ...