ionic生成全尺寸icon和splash

http://www.jianshu.com/p/eda363eb28d3

重新添加platform

--no-resources可以禁止重新生成icon和splash

ionic cordova platform remove android
ionic cordova platform add android --no-resources

1. icon

提供1024*1024的icon.png图片, 放到根目录下的resources目录下, 执行命令就能生成各个尺寸的图片了

ionic cordova resources --icon

2. splash

先安装插件

$ ionic cordova plugin add cordova-plugin-splashscreen

同样的提供2732*2732的splash.png图片, 执行命名

ionic cordova resources --splash

注意

一定要是真的png图片, 改后缀是无效的, 同时添加了对应的platform才会生成.

修改过splash图片可能会出现打包错误的问题 - Execution failed for task ':mergeDebugResources'.

办法是在platforms\android\build.gradle中加入下面这段

android {
    aaptOptions.cruncherEnabled = false
    aaptOptions.useNewCruncher = false

默认3秒后隐藏会显示一个黑屏. 设置加载好之后才隐藏splash

config.xml中加入下面的配置, SplashShowOnlyFirstTime可以单独给android添加. 参考: ionic开发之splash screen配置问题

    <preference name="SplashScreenDelay" value="3000" />
    <preference name="ShowSplashScreenSpinner" value="false" />
    <preference name="AutoHideSplashScreen" value="false" />
    <preference name="FadeSplashScreen" value="false" />
    <preference name="SplashMaintainAspectRatio" value="false" />
    <preference name="SplashShowOnlyFirstTime" value="true" />

help

λ ionic cordova resources --help

? The Ionic CLI has an update available (3.18.0 => 3.19.0)! Would you like to install it? No
Not automatically updating your CLI.

  ionic cordova resources - Automatically create icon and splash screen resources

    Ionic can automatically generate perfectly sized icons and splash screens from source images (.png, .psd, or .ai)
    for your Cordova platforms.

    The source image for icons should ideally be at least 1024×1024px and located at resources/icon.png. The source
    image for splash screens should ideally be at least 2732×2732px and located at resources/splash.png. If you used
    ionic start, there should already be default Ionic resources in the resources/ directory, which you can overwrite.

    You can also generate platform-specific icons and splash screens by placing them in the respective
    resources/<platform>/ directory. For example, to generate an icon for Android, place your image at
    resources/android/icon.png.

    By default, this command will not regenerate resources whose source image has not changed. To disable this
    functionality and always overwrite generated images, use --force.

    For best results, the splash screen's artwork should roughly fit within a square (1200×1200px) at the center of the
    image. You can use https://code.ionicframework.com/resources/splash.psd as a template for your splash screen.

    ionic cordova resources will automatically update your config.xml to reflect the changes in the generated images,
    which Cordova then configures.

    Cordova reference documentation:
    - Icons: https://cordova.apache.org/docs/en/latest/config_ref/images.html
    - Splash Screens: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/

    This command uses Ionic servers, so we require you to be logged into your free Ionic account. Use ionic login to
    login.

  Usage:

    $ ionic cordova resources [<platform>] [options]

  Inputs:

    platform ................. The platform for which you would like to generate resources (android, ios)

  Options:

    --force, -f .............. Force regeneration of resources
    --icon, -i ............... Generate icon resources
    --splash, -s ............. Generate splash screen resources

  Examples:

    $ ionic cordova resources
    $ ionic cordova resources ios
    $ ionic cordova resources android

欢迎页图片规格, 都是.png的图片

android
480*800
240*320
320*480
720*1280
960*1600
1280*1920

IOS
640*960
320*480
640*1136
750*1334
1242*2280

备份一个配置文件

准备只配置prot的图片, 缩小app

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.zehuiwenhua.xiaoshutong" version="1.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>小书童</name>
    <description>An awesome Ionic/Cordova app.</description>
    <author email="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author>
    <content src="index.html" />
    <access origin="*" />
    <allow-navigation href="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <preference name="AllowInlineMediaPlayback" value="true" />
    <preference name="webviewbounce" value="false" />
    <preference name="UIWebViewBounce" value="false" />
    <preference name="DisallowOverscroll" value="true" />
    <preference name="android-minSdkVersion" value="16" />
    <preference name="BackupWebStorage" value="none" />
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="FadeSplashScreenDuration" value="300" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <preference name="SplashScreen" value="screen" />
    <preference name="SplashScreenDelay" value="10000" />
    <preference name="ShowSplashScreenSpinner" value="false" />
    <preference name="AutoHideSplashScreen" value="false" />
    <preference name="FadeSplashScreen" value="true" />
    <preference name="SplashMaintainAspectRatio" value="false" />
    <preference name="orientation" value="portrait" />
    <platform name="android">
        <name>小书童</name>
        <allow-intent href="market:*" />
        <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
        <icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
        <icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
        <icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
        <icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
        <icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
        <splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
        <splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
        <splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
        <splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
        <splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
        <splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
        <splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
        <splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
        <splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
        <splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
        <splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
        <splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
    </platform>
    <platform name="ios">
        <name>小书童</name>
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <icon height="57" src="resources/ios/icon/icon.png" width="57" />
        <icon height="114" src="resources/ios/icon/icon@2x.png" width="114" />
        <icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
        <icon height="80" src="resources/ios/icon/icon-40@2x.png" width="80" />
        <icon height="120" src="resources/ios/icon/icon-40@3x.png" width="120" />
        <icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
        <icon height="100" src="resources/ios/icon/icon-50@2x.png" width="100" />
        <icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
        <icon height="120" src="resources/ios/icon/icon-60@2x.png" width="120" />
        <icon height="180" src="resources/ios/icon/icon-60@3x.png" width="180" />
        <icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
        <icon height="144" src="resources/ios/icon/icon-72@2x.png" width="144" />
        <icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
        <icon height="152" src="resources/ios/icon/icon-76@2x.png" width="152" />
        <icon height="167" src="resources/ios/icon/icon-83.5@2x.png" width="167" />
        <icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
        <icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" />
        <icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" />
        <icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" />
        <splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
        <splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
        <splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
        <splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
        <splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
        <splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" />
        <splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
        <splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
        <splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" />
        <splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
        <splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
        <splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
        <splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
    </platform>
    <engine name="browser" spec="^5.0.1" />
    <engine name="ios" spec="4.5.4" />
    <engine name="android" spec="6.3.0" />
    <plugin name="ionic-plugin-keyboard" spec="^2.2.1" />
    <plugin name="cordova-plugin-whitelist" spec="^1.3.1" />
    <plugin name="cordova-plugin-statusbar" spec="^2.2.1" />
    <plugin name="cordova-plugin-device" spec="^1.1.4" />
    <plugin name="cordova-plugin-splashscreen" spec="^4.0.3" />
    <plugin name="cordova-plugin-camera" spec="^3.0.0" />
    <plugin name="cordova-plugin-file" spec="^5.0.0" />
    <plugin name="cordova-plugin-console" spec="^1.1.0" />
    <plugin name="cordova-plugin-file-transfer" spec="^1.7.0" />
    <plugin name="cordova-plugin-wechat" spec="^2.1.0">
        <variable name="WECHATAPPID" value="wx4a525790c75c494f" />
    </plugin>
    <plugin name="cordova-plugin-screen-orientation" spec="^2.0.2" />
    <plugin name="jpush-phonegap-plugin" spec="^3.2.12">
        <variable name="APP_KEY" value="26218938532daa6c8446c2b5" />
    </plugin>
    <plugin name="es6-promise-plugin" spec="^4.1.1" />
    <plugin name="cordova-plugin-network-information" spec="~1.3.4" />
    <plugin name="cordova-plugin-screensize" spec="^1.3.1" />
    <plugin name="cordova-plugin-app-version" spec="^0.1.9" />
    <plugin name="cordova-plugin-file-opener2" spec="^2.0.19" />
</widget>
posted @ 2017-12-04 22:24  CooMark  阅读(1599)  评论(0)  编辑  收藏  举报