Icon(图标)和Splash(启动画面)是应用的门面,好的Icon和Splash能让用户对这款App产生良好的第一印象,不过我们这里不讲怎么设计他们,而是如何在Ionic应用中定制自己的icon和splash,在这里ionic为我们提供了非常方便的自动化生成工具。

准备资源

Ionic能帮你自动生成各个平台中各个不同尺寸的图片,但巧妇难为无米之炊,首先你得提供给他合适的图片资源。资源要求如下:

  • 格式: .png, .psd, .ai
  • 命名: 例如icon.png, splash.png
  • 大小: icon-192x192无圆角,splash-2208x2208居中

生成资源

准备好图片后将他们放到资源目录 ./resources,然后输入命令:

1
2
3
4
5
6
7
8
9
$ ionic resources
Ionic icon and splash screen resources generator
uploading icon.png...
uploading splash.png...
✓ icon.png (192x192) upload complete
✓ splash.png (2208x2208) upload complete
generating splash ios Default~iphone.png (320x480)...
generating splash ios Default@2x~iphone.png (640x960)...
generating splash ios Default-Portrait~ipad.png (768x1024)...

如果只希望生成一种资源,可以

1
2
$ ionic resources --icon
$ ionic resources --splash

如果想为不同平台准备不同的图标,那么需要修改路径

1
2
3
resources/android/icon.png
resources/ios/icon.png
# splash 同理

测试验证

生成成功后在手机上验证一下吧

1
2
$ ionic platform add android
$ ionic run android

看看效果怎么样,在我手机上的截图如下:

遇到的问题

一个很恼人的问题是,ionic在生成资源的时候,他会对上传的图片做一个checksum,如果一致则不会重新生成图标,而是从cache中取。这就导致它如果生成资源的时候出现错误会导致应用崩溃,然而重新运行命令还是从cache中取。要重新生成可以重新编辑图片以产生不同的checksum,然而这真是个nc的问题,为什么它不提供一个’clean-cache’选项!更多内容可以查看github上的issue

资源