准备素材
此刻你的应用应该打包好了,正常工作,可以提交到应用商店里。在将他提交到应用商店之前,我们还有一些需要做的事情。
你可以在阅读本书的同时在制作自己的应用,前提是你已经完成了其中一个范例应用的制作。这样的话,我还是建议你通过这些步骤,或者至少读完他们,这样你就学习提交过程是怎样的。然后我希望你在将应用实际提交到应用商店之前暂停一下,我很高兴你在你的应用中很好的用上了这些胆码,但是你不能提交这些范例中的任何一个到应用商店。
生成图标和闪屏
市面上有大量的设备,他们有着不同的屏幕尺寸和分辨率,在制作图标和闪屏的时候,我们需要去适配这些设备。
头脑正常的人都不会在给同一个文件制作50种不同版本而觉得亦可赛艇。幸运的是Ionic提供了一个非常简单,接近全自动的方法。我们可以通过ionic resources命令来为我们生成这些。虽然Ionic给你做了很多事情,但是他不会为你设计你的图形资源,所以我们需要做一些设置。
设计图标
Ionic资源工具之要求一个 192x192 的图标作为基本,但是由于应用商店需求一个大一些的图标,因此最好先设计为 1024x1024(甚至是 2048x2048)。在大部分时候,将大图缩小比较好,特殊情况下你可以特殊设计小号图标。
> 创建一个 192x192 的图标名为 icon.png 将他保存到 resource 文件夹内(覆盖已有的图标)
设计闪屏
图标很好,因为他们都是方形的。闪屏就相当不幸了,任何形状,任何尺寸。这意味着要么你进行弹性设计,要么每个不同屏幕单独制作一个闪屏。
什么是“弹性”设计?好吧,我管能够和Ionic的资源工具完美工作的设计叫做弹性设计。如果你将闪屏设计为 2208x2208 那么所有的闪屏都可以很好的生成。
问题是永远都会发生不同程度的裁切 — 有的屏幕比较高有点屏幕比较宽。为了避免设计的重要部分被切掉,尽量将重要部分设计为靠近图片的中心部分,靠近边缘的是稍微不那么重要的东西(即,背景图片部分)。
> 从下载包中获取splash-screen-template.psd或者splash-screen-template.png文件。基于他们制作自己的 2208x2208 闪屏然后存放到resources文件夹命名为 splash.png。
运行资源工具
现在制作好了基本图标和闪屏,可以通过如下命令生成其他的图标和闪屏:
ionic resources
设置Bundler ID和App Name
在进行构建之前有一个重要的步骤是修改config.xml文件里的App Name和Bundle ID。这个文件的前几行是这样的:
<?xml version='1.0' encoding='utf-8'?>
<widget id="io.ionic.starter" version="0.0.1"
xmlns="http://www.w3.org/ns/widgets"
xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>V2 Test</name>
<description>An Ionic Framework and Cordova project.</description>
<author email="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author>
你应该把上面这些配置改成你自己的,包括id也就是现在的io.ionic.starter。这个值应该匹配你下节课签名的值,应该被设置为类似:com.yourname.project。如果你是第一次发布此应用的话,版本好最好也设置为1.0.0。
设置Cordova偏好
这本地上不是一个什么步骤,但是你可以在config.xml中进行一些偏好设置来影响如何构建。config.xml文件有一些默认的如下:
<preference name="webviewbounce" value="false" />
<preference name="UIWebViewBounce" value="false" />
<preference name="DisallowOverscroll" value="true" />
<preference name="android-minSdkVersion" value="16" />
<preference name="BackupWebStorage" value="none" />
但是还有成吨的偏好设置选择,具体查看此处
缩减素材
这也是一个可选步骤但是我个人觉得很重要。如果你想尽量减少最终发布版的大小,其中一个方法就是通过一些工具来缩减图片尺寸例如TinyPNG。只要通过工具跑一遍图片然后重新保存到项目中即可。