360SDN.COM

首页/Ionic/列表

ionic2 解决白屏问题

来源:  2017-06-25 11:08:06    评论:0点击:

来源:http://www.cnblogs.com/hedengyao/p/6439321.html
ionic2下创建项目后,运行启动页后白屏几秒,解决方案

 

问题描述

最近在学习过程中发现ionic2项目运行在真机上,启动页后会有3-5秒的白屏时间,用户体验不是太好。

解决过程

查看到了一篇关于这个问题的博客,但是是ionic1版本下的解决方案,有些差异,在查询ionic官方文档后,找到了ionic2版本的解决方案。
ionic1版本解决方案原址:http://blog.csdn.net/dounainaicsdn/article/details/50767667

步骤

1.首先我们要先添加这个cordova组件

$ cd 项目根目录

$ cordova plugin add cordova-plugin-splashscreen

2.然后可以更换我们的启动页面,配置config.xml文件(可略过,不更换也可)

在 <platform name="android">标签里面添加下面的代码:

<splash src="resources/android/splash/drawable-land-hdpi-screen.png" density="land-hdpi"/>

<splash src="resources/android/splash/drawable-land-ldpi-screen.png" density="land-ldpi"/>

<splash src="resources/android/splash/drawable-land-mdpi-screen.png" density="land-mdpi"/>

<splash src="resources/android/splash/drawable-land-xhdpi-screen.png"density="land-xhdpi"/>

 

<splash src="resources/android/splash/drawable-port-hdpi-screen.png" density="port-hdpi"/>

<splash src="resources/android/splash/drawable-port-ldpi-screen.png" density="port-ldpi"/>

<splash src="resources/android/splash/drawable-port-mdpi-screen.png" density="port-mdpi"/>

<splash src="resources/android/splash/drawable-port-xhdpi-screen.png"density="port-xhdpi"/>

3.接下来我们就要配置启动页面的一些属性了,在config.xml追加以下属性:

<preference name="AutoHideSplashScreen" value="false"/>

  <preference name="ShowSplashScreenSpinner" value="false"/>

  <preference name="SplashMaintainAspectRatio" value="true"/>

  <preference name="SplashShowOnlyFirstTime" value="false"/>

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

  <preference name="FadeSplashScreen" value="false"/>

这些属性的名字都很直观,可以大致了解什么意思,官方文档上也有讲这个,不懂可以去看看:

4.最后我们在app.ts文件下,手动调用splashscreen的hide()方法即可

打开app目录下的app.ts文件
首先导入Splashscreen

 import { Splashscreen } from 'ionic-native';

接下来在函数里调用 Splashscreen.hide()

    platform.ready().then(() => {

      // Okay, so the platform is ready and our plugins are available.

      // Here you can do any higher level native things you might need.

与其坐以待毙,不如自己现在努力.


 


问题描述

处理启动页过后白屏问题,这个问题是因为hybrid app的一个劣势,js等还没有加载完,所有只能通过延长启动界面的时间和每次打开都启用欢迎界面。

下面介绍一个方法来规避此种白屏问题。 

在config.xml里面修改这个属性 

<!--设置启动页延长到10秒--><preference name="SplashScreenDelay" value="10000"/>

 添加此属性 <!--每次打开都要打开启动页--> <preference name="SplashShowOnlyFirstTime" value=“false"/>

 在app.ts文件加入

 //自动隐藏启动页 可解决启动白屏问题 Splashscreen.hide();

但是感觉没起作用。????

也有人说是由于插件自己的bug,这种问题只能去想办法规避,还不能得到真正的解决。所有还得提高hybird app的性能。




 
为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权