ionic添加icon和splash--转载

2017-09-19

当我们用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

相关推荐