• phonegap/cordova 启动页面


    启动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中做相应配置。实现同样的效果(这种文档上有写,但我没有验证过)



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


       


    一艘船如果没有目标,那无论海面上哪个方向的风,都是逆风! 个人主页: http://chenblog.sinaapp.com/
  • 相关阅读:
    (18)随机数
    JMeter 正则表达式提取器(二)
    swiper控件(回调函数)
    移动测试之appium+python 导出报告(六)
    移动测试之appium+python 简单例子(五)
    移动测试之appium+python 入门代码(四)
    移动测试之appium+python 入门代码(三)
    移动测试之appium+python 入门代码(二)
    移动测试之appium+python 环境安装(一)
    网站架构模式(二)
  • 原文地址:https://www.cnblogs.com/chen4342024/p/4576096.html
Copyright © 2020-2023  润新知