`
wxinpeng
  • 浏览: 592506 次
  • 性别: Icon_minigender_1
  • 来自: 青岛
社区版块
存档分类
最新评论

ionic添加icon和splash--转载

阅读更多

当我们用ionic创建好app后,默认的logo及spash页面均是cordova的图标,显的不太好看,如何使用自己的icon和splash页呢?

1、icon生成

  1. 生成一个192*192px的logo,保存为icon.png,icon.ai或icon.psd(只支持这三种格式),图片不要有圆角(每个平台会自己给图片加效果,如ios会自动给logo加圆角效果)。
  2. 在ionic的根目录下有一个resources的目录,将icon的图片放在这个目录下。
  3. 运行命令,生成不同平台的icon。
    $ ionic resources --icon
    运行命令后,会发现生成了一系列的不同尺寸的图片,并且在config.xml中会有想应的配置。

2、splash页面

  1. 生成一张2208x2208 px的splash图片,保存为splash.png, splash.ai或splash.psd。
  2. 在ionic的根目录下有一个resources的目录,将icon的图片放在这个目录下。
  3. 运行命令,添加splash的plugin
    $ ionic plugin add https://github.com/apache/cordova-plugin-splashscreen.git
  4. 运行命令,生成不同平台的splash
    $ ionic resources --splash
    运行命令后,会发现生成了一系列的不同尺寸的图片,并且在config.xml中会有想应的配置。

注:直接运行ionic resources 会自动处理icon和splash图片,这样可以方便很多

3、针对不同的平台配置

上述的icon和splash的配置对是针对所有平台的,如果你想针对ios, android等使用不同的配置,可以发现resource目录下有相应的ios/和android/的目录,将前文中的icon和 splash放置于相应的目录,再运行ionic resources命令即可。



作者:不鲲
链接:http://www.jianshu.com/p/eda363eb28d3

分享到:
评论

相关推荐

    ionic icon/splash离线裁剪

    1、解决ionic 在线生成icon和splash缓慢或失败问题,代码基于photoshop的脚本。代码中有详细的注释,看懂后玩去哪可以自定义尺寸或进行更深层次的研究学习。 2、需要预装photoshop 3、具体使用方法资源中有readme...

    ionic调试环境安装(windows系统)

    ### ionic调试环境安装(Windows系统) #### 一、前言 ... - `ionic cordova resources --splash-ios` 通过上述步骤,可以在Windows系统上成功搭建Ionic调试环境,进而方便地开发和调试Ionic应用。

    ionic+cordova+angularJs环境搭建.pdf

    在本文中,我们将深入探讨如何使用 Ionic、Cordova 和 AngularJS 搭建移动应用程序的开发环境。首先,让我们从基础开始。 1. **Java 开发工具包 (JDK) 安装与配置**: - JDK 1.8 或更高版本是必需的,因为这些工具...

    ionic-white-label:对Ionic进行必要的更改,以使应用程序贴上白色标签

    ionic-white-label --id=my.app.id.com --name=AppName --icon=resources/client1/icon.png --splash=resources/client1/splash.png ARGS: config:config.xml文件路径(默认值:./confix.xml) id:config.xml...

    ionic安装及常见问题的解决方法

    - **步骤**:按照文档指引进行操作,下载模板文件`icon.psd`和`splash.psd`。 - **替换资源**:将自定义的图标和启动画面图片放入项目文件夹下的`resources`目录。 - **更新资源**:运行`ionic resources`命令以更新...

    ionic配置文件

    - **资源定义**:通过`<icon>`和`<splash>`标签定义应用图标和启动屏幕。 3. **命令行接口 (CLI)**: 提到的“cmd”可能指的是命令行界面,使用Ionic CLI,你可以执行各种操作,例如初始化项目、运行应用、打包和...

    Ionic3项目总结

    Ionic3项目是一种使用Angular2框架和Ionic框架开发的移动应用程序。 Ionic3项目开发需要注意一些问题和解决方法,下面是其中的一些知识点: 1. 页面跳转 在Ionic3项目中,页面跳转可以通过NavController来实现。...

    exposure-app.gulfexposure.info

    但是,对于像我这样的人,他们的注意力跨度较短,耐心却很少: 前提条件brew install node npm install -g ionic cordova ios-deploy cordova-icon cordova-splash gulp bower npm install -g node-gyp 从工作开发...

Global site tag (gtag.js) - Google Analytics