解决ionic 启动页面图片没有显示及启动页出现黑白屏
2017-03-21 16:21
537 查看
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配置改为:
然后,app.js添加代码 navigator.splashscreen.hide(),如下:
这样,这个bug就可以解决了。ionic app 的细节问题很多,如果不尝试去解决的话,那app的体验将会很差,所以,尽量记录起来!
原因很有可能就是你没有装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的体验将会很差,所以,尽量记录起来!
相关文章推荐
- 使用cordova插件解决ionic页面在手机上启动出现黑频问题
- vs 2015 安装ionic后启动页面没有显示
- 页面启动马上显示弹窗出现错误解决
- IonicApp启动页面之后出现黑屏的解决方法
- 设置启动图片- Iphone5 上下方黑边,页面显示不全的解决办法
- ionic启动页面黑屏不显示的问题的解决
- 桌面快速启动栏里的“显示桌面”没有的解决办法
- 解决jasperreports报表在HTML页面显示的PX图片的问题
- .NET中运行时出现"无法在WEB服务器上启动调试,调试失败,因为没有启用集成WINDOWS身份验证",请问怎么解决?
- PHP 显示页面以及数据库中出现乱码问题的解决方式
- [转]<不知道能否解决先转下来再说>不显示删除回复显示所有回复显示星级回复显示得分回复 没有找到MSVR90D.dll因此这个应用程序未能启动
- 启动Apache时出现没有找到PHP_mbstring.dll 问题解决办法
- magento 后台分类页面catelog,点击后,出现右边信息不同步显示,不显示点击的分类的信息,问题的解决!!!
- 请问如何解决WORD转HTML是出现的“内存或磁盘空间不足,无法显示或打印图片”这个问题?
- .html的页面的内容没有显示,只因为少了一个成对出现的标签
- Word 图片无法显示,出现对话框:错误,嵌入对象无效的解决办法
- vs2008与IIS 7.0使用在vista上时出现的问题及解决方法(Internet Explorer 无法显示该页面)(VS2008: IE Cannot Display Web Page)
- 使用Form验证,未登录时登录页面无法显示图片、css、js文件的解决方法
- Crystal Report XI 图片没有办法显示解决方法
- 没有滚动条,页面内容显示不全问题的解决方法