Phonegap splashscreen 配置使用方法
来源:互联网 发布:杭州淘宝模特经纪公司 编辑:程序博客网 时间:2024/04/29 21:16
最新版Cordova CLI已经支持在config.xml中配置<splash> 和 <icon>,CB-2606, CB-3571 Add support for <icon>, <splash>。设置如下:
具体可以参考官方文档:Icons and Splash Screens
如果你本地安装了ImageMagick,CLI还会自动调用ImageMagick来做成不同尺寸的图像。
需要注意的是:
(1)图像的路径是相对于工程根目录不是根据www
(2)不要和PhoneGap CLI的设置混淆
==========================================================
(1)创建以下图像
以Android为例:
icon图像:
splashscreen图像:
(2)给工程添加splashscreen插件
(3)配置config.xml
相比于在config.xml中设置延迟时间,更应该在设备初始化完成后隐藏Splash画面(index.html)
(4)Copy文件
phonegap是可以在config.xml中配置icon和splash的,但是cordova不支持,需要在cordova build之后Copy文件,也可以通过创建hook来实现。
***phonegap的配置也局限于remote build的时候Phonegap Build起作用,local build也不起作用,需手动处理。参考这里。
icon.png:
把www/res/icon/android下的文件Copy到相应的platforms/android/res/drawable*/下。
splash.png:
把www/res/screen/android下的文件Copy到相应的platforms/android/res/drawable*/下。
完成以后启动“cordova emulate android”即可。
phonegap的config.xml
- <platform name="android">
- <icon src="res/android/icon-36-ldpi.png" density="ldpi" />
- <splash src="res/android/screen-xhdpi-portrait.png" density="port-xhdpi"/>
- </platform>
具体可以参考官方文档:Icons and Splash Screens
如果你本地安装了ImageMagick,CLI还会自动调用ImageMagick来做成不同尺寸的图像。
需要注意的是:
(1)图像的路径是相对于工程根目录不是根据www
(2)不要和PhoneGap CLI的设置混淆
==========================================================
(1)创建以下图像
以Android为例:
icon图像:
- www/res/icon/android/icon-36-ldpi.png - 36px x 36px
- www/res/icon/android/icon-48-mdpi.png - 48px x 48px
- www/res/icon/android/icon-72-hdpi.png - 72px x 72px
- www/res/icon/android/icon-96-xhdpi.png - 96px x 96px
splashscreen图像:
- www/res/screen/android/screen-ldpi-landscape.png - 320px x 200px
- www/res/screen/android/screen-mdpi-landscape.png - 480px x 320px
- www/res/screen/android/screen-hdpi-landscape.png - 800px x 480px
- www/res/screen/android/screen-xhdpi-landscape.png - 1280px x 720px
- www/res/screen/android/screen-ldpi-portrait.png - 200px x 320px
- www/res/screen/android/screen-mdpi-portrait.png - 320px x 480px
- www/res/screen/android/screen-hdpi-portrait.png - 480px x 800px
- www/res/screen/android/screen-xhdpi-portrait.png - 720px x 1280px
(2)给工程添加splashscreen插件
引用
> cordova plugin add org.apache.cordova.splashscreen
(3)配置config.xml
- <preference name="SplashScreen" value="splash" /> <!-- 不带后缀png的文件名,默认是screen-->
- <preference name="SplashScreenDelay" value="10000" /> <!-- Splash显示时间,默认是3000ms-->
- <feature name="SplashScreen">
- <param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen" />
- </feature>
相比于在config.xml中设置延迟时间,更应该在设备初始化完成后隐藏Splash画面(index.html)
- document.addEventListener("deviceready", onDeviceReady, false);
- function onDeviceReady() {
- navigator.splashscreen.hide();
- }
(4)Copy文件
phonegap是可以在config.xml中配置icon和splash的,但是cordova不支持,需要在cordova build之后Copy文件,也可以通过创建hook来实现。
***phonegap的配置也局限于remote build的时候Phonegap Build起作用,local build也不起作用,需手动处理。参考这里。
icon.png:
把www/res/icon/android下的文件Copy到相应的platforms/android/res/drawable*/下。
splash.png:
把www/res/screen/android下的文件Copy到相应的platforms/android/res/drawable*/下。
完成以后启动“cordova emulate android”即可。
phonegap的config.xml
- <!-- Define app icon for each platform. -->
- <icon src="icon.png" />
- <icon src="res/icon/android/icon-36-ldpi.png" gap:platform="android" gap:density="ldpi" />
- <icon src="res/icon/android/icon-48-mdpi.png" gap:platform="android" gap:density="mdpi" />
- <icon src="res/icon/android/icon-72-hdpi.png" gap:platform="android" gap:density="hdpi" />
- <icon src="res/icon/android/icon-96-xhdpi.png" gap:platform="android" gap:density="xhdpi" />
- <icon src="res/icon/blackberry/icon-80.png" gap:platform="blackberry" />
- <icon src="res/icon/blackberry/icon-80.png" gap:platform="blackberry" gap:state="hover"/>
- <icon src="res/icon/ios/icon-57.png" gap:platform="ios" width="57" height="57" />
- <icon src="res/icon/ios/icon-72.png" gap:platform="ios" width="72" height="72" />
- <icon src="res/icon/ios/icon-57-2x.png" gap:platform="ios" width="114" height="114" />
- <icon src="res/icon/ios/icon-72-2x.png" gap:platform="ios" width="144" height="144" />
- <icon src="res/icon/webos/icon-64.png" gap:platform="webos" />
- <icon src="res/icon/windows-phone/icon-48.png" gap:platform="winphone" />
- <icon src="res/icon/windows-phone/icon-173.png" gap:platform="winphone" gap:role="background" />
- <!-- Define app splash screen for each platform. -->
- <gap:splash src="res/screen/android/screen-ldpi-portrait.png" gap:platform="android" gap:density="ldpi" />
- <gap:splash src="res/screen/android/screen-mdpi-portrait.png" gap:platform="android" gap:density="mdpi" />
- <gap:splash src="res/screen/android/screen-hdpi-portrait.png" gap:platform="android" gap:density="hdpi" />
- <gap:splash src="res/screen/android/screen-xhdpi-portrait.png" gap:platform="android" gap:density="xhdpi" />
- <gap:splash src="res/screen/blackberry/screen-225.png" gap:platform="blackberry" />
- <gap:splash src="res/screen/ios/screen-iphone-portrait.png" gap:platform="ios" width="320" height="480" />
- <gap:splash src="res/screen/ios/screen-iphone-portrait-2x.png" gap:platform="ios" width="640" height="960" />
- <gap:splash src="res/screen/ios/screen-ipad-portrait.png" gap:platform="ios" width="768" height="1024" />
- <gap:splash src="res/screen/ios/screen-ipad-landscape.png" gap:platform="ios" width="1024" height="768" />
- <gap:splash src="res/screen/windows-phone/screen-portrait.jpg" gap:platform="winphone" />
0 0
- Phonegap splashscreen 配置使用方法
- phonegap+splashscreen插件
- [Phonegap+Sencha Touch] 移动开发36 Phonegap/Cordova项目的图标和启动画面(splashscreen)配置
- ionic(phonegap)-SplashScreen设置
- SplashScreen
- PhoneGap配置
- Android中PhoneGap的使用方法
- 在eclipse配置phonegap
- PhoneGap Android 环境配置
- android phonegap配置
- android配置phonegap
- phonegap(cordova)安装配置
- phonegap安装配置
- phonegap环境配置
- PhoneGap Android配置
- iOS phonegap 配置环境
- phonegap-android环境配置
- phonegap安装配置)
- python字典类型用法举例
- Ubuntu 14.04 修改开机启动顺序
- .bashrc vs .bash_profile
- 黑马程序员—【Java语言基础】
- 开源 java CMS - FreeCMS2.3 积分规则管理
- Phonegap splashscreen 配置使用方法
- 使用Alcatraz来管理Xcode插件
- 那些不能错过的Xcode插件
- 解决VirtualBox占用100%CPU的问题
- altium规则详解
- Apple Watch 开箱上手
- Eclipse中引入ActionBarSherlock和ActionBarSherlock 介绍
- EXT.NET 按钮调后台方法之前做验证的方法
- Perl 清空文件c1