越来越不喜欢繁重的开发框架和大容量的插件包. 所以往往会选择更应手的工具来开发一些小的应用.

所以这里来谈谈跨平台APP开发工具 Ionic.

阅读此文收获:

1) 获得Ionic添加Icon和启动页的方法

2)获得Ionic自动添加Icon和启动页Splash的python脚本

3)提供开发效率, 介绍您宝贵的时间.

一. 开篇.

我们在使用Ionic开发Android应用,IOS应用很大一部分原因就是高效,低成本. 但是这款高效的开发框架下也有些不如人意的地方, 比如:当我们用ionic创建好app后,默认的logo及spash页面均是cordova的图标,显的不太好看,如何使用自己的icon和splash页呢?

接下来我们来谈谈如果制作Ionic APP的启动页和Icon.

1.1 制作基础的Icon文件.

这里推荐您制作512px x 512px的Icon文件. 并且可以使用自动圆角工具来生成圆角logo文件.

Atool自动透明圆角制作工具: http://www.atool.org/roundcorner.php

PS制作好的icon文件放置到 工程目录/resources 目录下并命名为icon.png

运行命令,生成不同平台的icon。

ionic resources –icon

运行命令后,会发现生成了一系列的不同尺寸的图片,并且在config.xml中会有想应尺寸图片的配置.

1.2 添加启动画面

1.2.1 生成一张1024×1024 px的splash图片,保存为splash.png,

1.2.2 在ionic工程根目录下有一个resources的目录,将创建好的splash.png图片放在这个目录下。

执行如下命令, 添加启动画面插件

ionic plugin add cordova-plugin-splashscreen

1.2.3 运行命令,生成不尺寸大小的splash

$ ionic resources –splash

到此时, 我们就已经生成好了 Icon文件和启动屏幕文件, 接下来需要做的就copy到android/IOS 工程里面对应的目录中,

对应目录: Ionic工程目录/platform/android/res/mipmap-hdpi

PS: 根据不同文件, 放到不同文件夹. 这里是需要手工操作的, 比较麻烦, copy过去还需要修改文件, 我们来自动化的实现这部

再重新打包就可以使用我们新生成的icon文件了


二, 自动化

上面讲解了 如果制作icon 和splash文件, 但是需要手工来复制文件到android工程中,比较浪费时间.

接下来采用Python脚本帮我们自动生成文件

效果图如下:

自动生成好的各种尺寸的icon图标

自动化脚本执行示意图



欢迎投稿 职场/创业方向. 邮箱wangfzcom(AT)163.com:王夫子社区 » [原创]Ionic自动添加图标icon和启动页splash的python脚本

    标签: