zoukankan      html  css  js  c++  java
  • 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'.

    办法是在platformsandroiduild.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>
    
  • 相关阅读:
    ssh实现免密码登录和文件传输
    linux后台执行程序相关命令
    orchestrator
    curl下载安装与使用
    goland使用
    mysql集群
    consul理解
    my.cnf
    数据库的表设计
    项目常见面试问题
  • 原文地址:https://www.cnblogs.com/wancy86/p/7979337.html
Copyright © 2011-2022 走看看