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>
    
  • 相关阅读:
    json学习系列(1)-使用json所要用到的jar包下载
    Java 时间架构图
    时间纪元与时区介绍
    HTML5 Canvas 绘制库存变化折线
    HTML5 Canvas 笛卡尔坐标系转换尝试
    像孩童一样欣喜的看着自己的成长
    《老炮儿》结尾貌似历史上的一幕
    很多人还在守着金饭碗要饭
    还是用文本编辑器编程让人愉悦
    Node.js 网页爬虫再进阶,cheerio助力
  • 原文地址:https://www.cnblogs.com/wancy86/p/7979337.html
Copyright © 2011-2022 走看看