phonegap/cordova 启动页面

时间：2021-08-12 13:34:49

启动phonegap应用时，因为phonegap还在加载一系列的东西，总会出现一段时间的黑屏。解决方法是设置一个启动页面（闪屏）来过渡，让应用的用户体验更好一些。

先讲ios版本的：

首先，你需要准备一下图片：

  • Default-568h@2x~iphone.png (640x1136 pixels)
  • Default-Landscape@2x~ipad.png (2048x1496 pixels)
  • Default-Landscape~ipad.png (1024x748 pixels)
  • Default-Portrait@2x~ipad.png (1536x2008 pixels)
  • Default-Portrait~ipad.png (768x1004 pixels)
  • Default@2x~iphone.png (640x960 pixels)
  • Default~iphone.png (320x480 pixels)

名字最好也这样命名，然后替换掉project's Resources/splash。便可以了。

android版本的：

制作9宫格的启动画面（不明请自行百度，主要为了适应不同的分辨率），然后，替换platforms/android/res/drawable*
目录（*号代表不同尺寸）

尺寸应该是：

  • xlarge (xhdpi): at least 960 × 720
  • large (hdpi): at least 640 × 480
  • medium (mdpi): at least 470 × 320
  • small (ldpi): at least 426 × 320

然后在config.xml中配置

<preference name="SplashScreen" value="screen" />

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

最后，不要忘了安装splashScreen插件 如不会安装，参考这里 点击打开

安装插件后，我们需要做的就算 在 deviceready
事件中把启动画面隐藏掉就行了。（因为启动页面已经完成了他的使命）

android直接navigator.splashscreen.hide()就可以了。

ios有点特殊，需要

 setTimeout(function() {

        navigator.splashscreen.hide();

    }, 1000);
这是插件本身存在的差异。
至于navigator.splashscreen.show(),因为启动画面默认已启动就会显示，所以我们无需手动去调用该方法

另外，还有一种方法，可以通过把


    android/screen-hdpi-landscape.png

    android/screen-hdpi-portrait.png

    android/screen-ldpi-landscape.png

    android/screen-ldpi-portrait.png

    android/screen-mdpi-landscape.png

    android/screen-mdpi-portrait.png

    android/screen-xhdpi-landscape.png

    android/screen-xhdpi-portrait.png


以及

    ios/screen-ipad-landscape-2x.png

    ios/screen-ipad-landscape.png

    ios/screen-ipad-portrait-2x.png

    ios/screen-ipad-portrait.png

    ios/screen-iphone-landscape-2x.png

    ios/screen-iphone-landscape.png

    ios/screen-iphone-portrait-2x.png

    ios/screen-iphone-portrait.png

    ios/screen-iphone-portrait-568h-2x.png

都放在www/res/screens目录下，然后在config中做相应配置。实现同样的效果（这种文档上有写，但我没有验证过）

大家也可以参考一下官方文档，点击这里

相关文章