解决ionic 启动页面图片没有显示及启动页出现黑白屏
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 启动页面图片没有显示及启动页出现黑白屏的更多相关文章
- 得到设备是何种iPhone设备 + 怎么获得启动页面图片
一.前言 今天做一个功能,需要动态的获得启动页,然后根据不同设备去使用不用的启动页图片. 二.正文 常规来说,我们直接判断是何种设备,然后通过name去获得图片选择性加载即可.但是实际上遇到的两个问题 ...
- 如何解决php 生成验证码图片不显示问题
最近遇到一个问题,就是验证码在别人的电脑上可以显示,但是我自己的电脑上去不能.原因找了好久,哈哈,终于找到了!现在给大家分享一下: 程序: <?php $w = 80; //设置图片宽和高 $h ...
- uc浏览器手机版,页面图片不显示
uc浏览器手机版,有时候上面的轮播广告看不到 原因:uc浏览器会拦截所有带ad的标签 例如: <div id="adDiv"> <img src="/r ...
- ionic 修改应用名称 、启动页出现黑白屏 及 修改百度离线地图 点聚合 图标
1.ionic 修改应用名称 2.启动页打开后会在图片消失会出现一小段黑屏的时间 解决方法: 首先,启动页的图片消失时间默认是在config.xml配置的 <preference name=&q ...
- android 解决启动页面加载图片空白以及去掉标题栏
有时候启动页面根据白天晚上来启动时实现加载不同的图片效果,但是加载时会出现短暂的空白,解决方法如下: android:theme="@android:style/Theme.Transluc ...
- Mac Github:第一次上传成功,解决图片不可显示,Initial commit Untracked files
在上传之前需要先给自己的电脑安装SSH 上传成功用的是github的官方提示,直接复制去做就可以了 解决README.md中图片不可显示:图片路径到底要怎么写? https://blog.csdn.n ...
- IE11部分图片无法显示的兼容办法
问题描述:写的网页在浏览器中测试兼容问题,FF,Chrome,Edge都完美兼容(包括Edge中的仿真),但是在IE11中却无法显示部分图片,并且报:DOM7009: 无法解码 URL 处的图像 错误 ...
- Android启动页面的正确打开方式 (转载)
最近由于领导要求写一个手机APP,于是自学开始,不经意间想到使用过的手机APP在打开的时候都是会有一个启动页面,这是如何实现的呢?比较好奇,于是在网上搜到了以下这篇文章,经过个人实验的确可行,不过原文 ...
- Tomcat:解决Tomcat可以在eclipse启动,却无法显示默认页面的操作
解决Tomcat可以在eclipse启动,却无法显示默认页面的操作 今天在eclipse中配置好tomcat后访问不到它的主页,但是能运行自己的项目,一直找不到原因,百度之后最后解决了这个问题,总结如 ...
随机推荐
- [HDOJ] 1753.大明A+B (大数加法)
Problem Description 话说,经过了漫长的一个多月,小明已经成长了许多,所以他改了一个名字叫"大明". 这时他已经不是那个只会做100以内加法的那个"小明 ...
- 01、HTML 简介
实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title ...
- sonarlint在idea&eclipse中安装与使用
介绍 代码质量管理的开源平台,用于管理源代码的质量 通过插件形式,可以支持包括java,C#,C/C++,PL/SQL,Cobol,JavaScrip,Groovy等等二十几种编程语言的代码质量管 ...
- es6的基本用法
1. let和const <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- C#编程.异常处理(Exception Handling Statements)
C#语言包含结构化异常处理(Structured Exception Handling,SEH). throw The throw statement is used to signal the oc ...
- NetCore跨平台桌面框架Avalonia的OSX程序打包
虽然工作开发语言已经转到了java,但平时仍会用netcore做一些小工具,提升工作效率,但是笔记本换成了Mac,小工具只能做成命令行形式,很是痛苦,迫切需要一个.net跨平台的桌面程序解决方案. 为 ...
- manjaro配置记录
一.换源 官方镜像源(包括 core, extra, community, multilib ) sudo pacman-mirrors -i -c China -m rank //更新镜像排名 su ...
- SpringBoot入门(二):日志及自定义属性
这一章主要说springboot中日志的配置.自定义属性的配置与读取.分环境的yml配置文件(如本地环境.测试环境.生产环境等).比较偏向实际开发,较为实用,前面一章的一些基本创建在这里就不多废话了. ...
- 【iOS】“找不到使用指定主机名的服务器”
今天用 Application Loader 提交 APP 的时,遇到了这个奇葩的问题,如下图: 后来换个网络解决了……我也不知道什么原因,就这么奇葩的弄好了……
- 记kepServer读写西门子PLC
在程序开发过程中为了测试方法或者验证某个属性的值是否正确 经常通过Kepserver 的 OPC Quick Client来手动置点或者读取点位 例如 这里显示的值都是经过转化后得到的十进制值,那我们 ...