当我们用ionic创建好app后,默认的logo及spash页面均是cordova的图标,显的不太好看,如何使用自己的icon和splash页呢?
1、icon生成
- 生成一个192*192px的logo,保存为icon.png,icon.ai或icon.psd(只支持这三种格式),图片不要有圆角(每个平台会自己给图片加效果,如ios会自动给logo加圆角效果)。
- 在ionic的根目录下有一个resources的目录,将icon的图片放在这个目录下。
- 运行命令,生成不同平台的icon。
运行命令后,会发现生成了一系列的不同尺寸的图片,并且在config.xml中会有想应的配置。$ ionic resources --icon
2、splash页面
- 生成一张2208x2208 px的splash图片,保存为splash.png, splash.ai或splash.psd。
- 在ionic的根目录下有一个resources的目录,将icon的图片放在这个目录下。
- 运行命令,添加splash的plugin
$ ionic plugin add https://github.com/apache/cordova-plugin-splashscreen.git
- 运行命令,生成不同平台的splash
运行命令后,会发现生成了一系列的不同尺寸的图片,并且在config.xml中会有想应的配置。$ ionic resources --splash
注:直接运行ionic resources 会自动处理icon和splash图片,这样可以方便很多
3、针对不同的平台配置
上述的icon和splash的配置对是针对所有平台的,如果你想针对ios, android等使用不同的配置,可以发现resource目录下有相应的ios/和android/的目录,将前文中的icon和 splash放置于相应的目录,再运行ionic resources命令即可。
作者:不鲲
链接:http://www.jianshu.com/p/eda363eb28d3
相关推荐
1、解决ionic 在线生成icon和splash缓慢或失败问题,代码基于photoshop的脚本。代码中有详细的注释,看懂后玩去哪可以自定义尺寸或进行更深层次的研究学习。 2、需要预装photoshop 3、具体使用方法资源中有readme...
### ionic调试环境安装(Windows系统) #### 一、前言 ... - `ionic cordova resources --splash-ios` 通过上述步骤,可以在Windows系统上成功搭建Ionic调试环境,进而方便地开发和调试Ionic应用。
在本文中,我们将深入探讨如何使用 Ionic、Cordova 和 AngularJS 搭建移动应用程序的开发环境。首先,让我们从基础开始。 1. **Java 开发工具包 (JDK) 安装与配置**: - JDK 1.8 或更高版本是必需的,因为这些工具...
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...
- **步骤**:按照文档指引进行操作,下载模板文件`icon.psd`和`splash.psd`。 - **替换资源**:将自定义的图标和启动画面图片放入项目文件夹下的`resources`目录。 - **更新资源**:运行`ionic resources`命令以更新...
- **资源定义**:通过`<icon>`和`<splash>`标签定义应用图标和启动屏幕。 3. **命令行接口 (CLI)**: 提到的“cmd”可能指的是命令行界面,使用Ionic CLI,你可以执行各种操作,例如初始化项目、运行应用、打包和...
Ionic3项目是一种使用Angular2框架和Ionic框架开发的移动应用程序。 Ionic3项目开发需要注意一些问题和解决方法,下面是其中的一些知识点: 1. 页面跳转 在Ionic3项目中,页面跳转可以通过NavController来实现。...
但是,对于像我这样的人,他们的注意力跨度较短,耐心却很少: 前提条件brew install node npm install -g ionic cordova ios-deploy cordova-icon cordova-splash gulp bower npm install -g node-gyp 从工作开发...