返回博客首页
← 所有文章

将您的 NativeScript 应用发布到应用商店的 8 个步骤

2017 年 4 月 20 日 — 作者:TJ VanToll

本文提供了一个简明扼要的清单,用于将使用 NativeScript 构建的应用部署到 iOS App Store 和 Google Play。

将应用发布到商店是一件很困难的事情,这一点毋庸置疑。如果您从未将应用发布到商店,您应该至少预留两天(是的,两天)的时间来完成本文中列出的单调流程。

不过不用担心;一旦您完成这些步骤,以后再进行相同的流程就会容易得多,并且在完成这些步骤时,我会分享一些技巧和窍门。事实上,为了让本文更具现实意义,我将使用最近部署到商店的简单应用 Pokémon Types 来提供一些具体示例,说明您需要做些什么才能将您的下一个应用变为现实。

准备好了吗?准备好咖啡,让我们开始吧!

提示:如果您发现本文中的步骤过于繁琐,您可能希望考虑使用 NativeScript Sidekick 构建 NativeScript 应用,该工具可自动执行本文中提到的许多工作流程。

目录

步骤 1:创建您的应用图标

更新:自本文首次发布以来,我们已经自动执行了此步骤。您现在可以使用 NativeScript CLI 的 tns resources generate icons 命令 从单个源图像生成您的应用图标

应用图标是用户首先注意到的与您的应用相关的内容。当您开始创建新的 NativeScript 应用时,您会获得一个占位符图标,这对于开发来说已经足够了,但对于生产环境,您需要用您要发布到商店的图像替换占位符图标。

placeholder-icon
iOS 设备主屏幕上的 NativeScript 占位符图标

要将生产环境就绪的应用图标文件放到位,您首先需要创建一个 1024 x 1024 像素的 .png 图像资源,该资源代表您的应用。 这是我为 Pokémon Types 使用的图像,仅供参考。

如果您与设计师合作,您需要要求他们为您创建最终的图像文件。如果您没有与专业设计师合作,可以参考一些网站寻求帮助。例如,我从 VectorStock 购买了 Pokémon Types 图标,该网站以几美元的价格提供高质量的图像资源。

vectorstock
VectorStock 是众多提供高质量图像文件供您以合理价格使用图标的网站之一。

为了让您的生活更艰难,iOS 和 Android 都要求您提供各种尺寸的图标图像。不过不用担心;一旦您拥有 1024 x 1024 图像,一些网站会生成 Android 和 iOS 所需的各种尺寸的图像。对于 NativeScript 开发,我建议使用 Brosteins’ 优秀的 NativeScript Image Builder,该工具可从 nsimage.brosteins.com 获取。

访问该网站,找到“上传图标”框,选择您新创建的 .png 文件,然后单击“上传应用图标”按钮。

nativescript-image-builder
如何使用 NativeScript Image Builder 创建 iOS 和 Android 应用所需的图标文件

Image Builder 完成后,您将自动开始下载 icons.zip 文件。该存档包含 AndroidiOS 文件夹,其中包含您所需的图像资源。

要将这些图像放到适当的位置,请首先打开您的应用的 app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset 文件夹。该文件夹包含 iOS 的 NativeScript 占位符图像。删除该文件夹的全部内容,并用从 icons.zip 下载文件中 iOS 文件夹中的文件替换这些内容。

ios-image-assets
如何用您从 NativeScript Image Builder 中获得的图像文件替换默认的 NativeScript 图标图像

将这些新图像放到位后,继续在 iOS 上运行您的 NativeScript 应用,以确保新图标看起来正常。以下是 Pokémon Types 图标在 iOS 模拟器上的显示方式。

poketypes-icon

提示:iOS 和 Android 都会缓存这些图标文件,以便在构建过程中节省一些时间。如果您没有看到图标更改,请使用 tns platform remove ios 命令清除所有现有的本机 iOS 文件。然后使用 tns run ios 命令再次运行您的应用,并将新的图像资源放到位。

现在您的 iOS 图标已经完成,让我们继续进行 Android 部分。为了让您的生活更复杂,Android 采用完全不同的约定来处理图标。(对于 iOS 和 Android,不同的流程是本文中反复出现的一个主题,因此请做好准备。)

在生成 Android 图像之前,您需要了解另一个重要区别。在 iOS 上,几乎所有应用图标都有纯色背景。对于 Pokémon Types,我的图标图像具有纯白色背景,以与其他 iOS 图标保持一致。

ios-set-of-icons
iOS 图标通常具有纯色背景

但在 Android 上,图标通常具有透明背景。因此,对于 Pokémon Types,我的图标具有透明背景,以与其他 Android 图标保持一致。

android-set-of-icons
Android 图标通常具有透明背景

这意味着您可能需要将两个不同的 1024 x 1024 图像上传到 NativeScript Image Builder,一个具有纯色背景(用于 iOS),另一个具有透明背景(用于 Android)。这就是我最终为 Pokémon Types 所做的事情。

无论您做出何种设计决策,一旦您的图像资源已准备好用于 Android,请首先打开您的应用的 app/App_Resources/Android 文件夹。接下来,将 icons.zip 文件的 Android 文件夹中的 icon.png 文件移动到 app/App_Resources/Android 文件夹中的相应位置。请参考下图了解具体的文件放置位置。

android-image-assets
如何用您从 NativeScript Image Builder 中获得的图像文件替换默认的 NativeScript Android 图标图像。

将这些文件放到位后,继续在 Android 上运行您的应用,以确保新图标按预期显示。以下是 Pokémon Types 在我的 Android 模拟器上的显示方式。

poketypes-icon-android

就这样,图标就完成了。呼!我早就告诉过您这些步骤可能需要一段时间 😄

但请不要关闭您的图像编辑器,因为接下来您需要处理启动画面。

步骤 2:创建您的启动画面

更新:自本文首次发布以来,我们已经自动执行了此步骤。您现在可以使用 NativeScript CLI 的 tns resources generate splashes 命令 从单个源图像生成您的应用启动画面

启动画面是用户打开您的应用后在应用准备好使用之前看到的内容。例如,以下是用户打开 Pokémon Types 时在 iOS 上看到的内容。

poketypes-splash-screen

尽管启动画面可以实现许多功能,但大多数应用会显示应用的徽标,也许还会显示应用的名称。NativeScript 有一系列约定,使这种启动画面在 iOS 和 Android 上相对容易实现。

让我们从 iOS 开始。打开您的应用的 app/App_Resources/Assets.xcassets 文件夹,您会看到两个名为 LaunchScreen.AspectFill.imagesetLaunchScreen.Center.imageset 的文件夹。

ios-splash-screen-folders
NativeScript 应用中 iOS 启动画面文件的位置

这些文件包含您迄今为止在应用中使用的默认启动画面。您可以 参考 NativeScript 文档 了解 NativeScript 如何使用这些文件的详细信息,但基本原理非常简单:AspectFill 图像就是启动画面的背景,而 Center 图像则是居中显示在背景上的。因此,假设您想要一个相对简单的启动画面,您的任务就是更改 AspectFill 图像的背景颜色,并将徽标放在 Center 图像中。

您可以随意查看 Pokémon Types 的 Assets.xcassets 文件夹,了解具体信息,但基本上 AspectFill 图像是纯白色,而 Center 图像包含居中的应用徽标。例如,以下是我应用的 LaunchScreen-Center.png 文件的外观。

LaunchScreen-Center
Pokémon Types 应用的 LaunchScreen-Center.png 文件

注意:想知道您应用中的 LaunchImage.launchimage 文件是什么?启动图像用于在 iOS 7 及更低版本上显示启动画面。如果您的应用不再支持 iOS 7,您可以忽略这些文件。(您甚至可以删除 LaunchImage.launchimage 文件夹,但如果这样做,还需要从应用的 build.xcconfig 文件中删除 ASSETCATALOG_COMPILER_LAUNCHIMAGE_NAME = LaunchImage; 行。)

此时,继续运行您的 iOS 应用,以确保新的启动画面文件按预期工作。

在完成 iOS 部分后,您就可以继续进行 Android 部分,幸运的是,这次的步骤几乎相同。在您的应用的 app/App_Resources/Android 文件夹中,您会找到一系列 background.pnglogo.png 文件。与 iOS 类似,NativeScript 使用 background.png 作为启动画面的背景,并在其上方居中显示 logo.png 文件。您可以参考 Pokémon Types 中的相关文件,但这只是重复进行一些图像编辑工作。

完成后,在 Android 上运行您的应用,以确保一切正常,然后继续配置应用的元数据。

步骤 3:配置您的元数据

iOS 和 Android 应用有许多信息需要您在将应用部署到各自的商店之前进行配置。NativeScript 为许多这些值提供了智能默认值,但您需要在部署之前查看一些值。

应用 ID

您的应用 ID 是应用的唯一标识符,它使用称为反向域名表示法的方法。例如,Pokémon Types 的应用 ID 是 com.tjvantoll.pokemontypereference。NativeScript CLI 有一条约定,用于在创建应用时设置应用 ID,tns create MyApp --appid com.mycompany.myappname,但如果您没有使用该选项,则可以轻松更改应用 ID。

打开您应用的根目录下的 package.json 文件,找到 "nativescript" 键。确保 "id" 属性包含您要使用的值。

{
  "nativescript": {
    "id": "com.tjvantoll.pokemontypereference",
    "tns-android": {
      "version": "2.5.0"
    },
    "tns-ios": {
      "version": "2.5.0"
    }
  },
  ...
}

注意:如果您正在更改 package.json 文件中的应用 ID,您可能还需要更改 app/App_Resources/Android/app.gradle 文件中的值(查找 applicationId 键),以便更改在 Android 上生效。

显示名称

您的应用的显示名称是用户在屏幕上看到图标旁边的名称。例如,Pokémon Types 使用“PokéTypes”作为显示名称,该名称会以这种方式显示。

poketypes-iconpoketypes-icon-android

您的应用的显示名称会显示在其图标旁边。

默认情况下,NativeScript 会根据您传递给 tns create 的值来设置您的应用的显示名称,这通常与您希望用户看到的名称不完全相同。例如,运行 tns create pokemon-types 会导致一个显示名称为“pokemontypes”的应用程序。

要在 iOS 上更改该值,首先打开您的应用程序的 app/App_Resources/iOS/Info.plist 文件。Info.plist 文件是 iOS 的主要配置文件,您将在其中找到许多您可能希望在发布您的应用程序之前调整的值。对于显示名称,您需要更改 CFBundleDisplayName 值。以下是 Pokémon Types 的此值的示例。

<key>CFBundleDisplayName</key>
<string>PokéTypes</string>

注意:虽然显示名称没有实际的字符限制,但 iOS 和 Android 都会在 10-12 个字符左右截断您的显示名称。例如,当我尝试使用“Pokémon Types”作为我的应用程序的显示名称时,我最终得到了以下截断显示。

icon-truncated
iOS 和 Android 都会截断长显示名称。这里,iOS 正在截断“Pokémon Types”的显示名称。

由于截断的显示不是理想的,因此您可能需要在选择应用程序的显示名称时发挥创意。

在 Android 上,更改显示名称的过程类似。在您的应用程序中查找 app/App_Resources/Android/values/strings.xml 文件。如果该文件不存在(默认情况下不存在),请继续创建它,并将以下代码粘贴进去。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">PokéTypes</string>
    <string name="title_activity_kimera">PokéTypes</string>
</resources>

接下来,将两个“PokéTypes”引用更改为您的应用程序的显示名称。完成后,再次在 Android 上运行您的应用程序,以确保一切正常。

其他元数据

虽然应用程序 ID 和显示名称是两个最常见的 value,但您可能需要在部署应用程序之前检查一些其他 value。

如果您打开应用程序的 app/App_Resources/iOS/Info.plist 文件,您将看到其他您可能希望更改的 value,例如应用程序支持的方向。有关这些不同键的详细信息,您可以参考 Apple 关于该主题的文档

在 Android 上,应用程序的 app/App_Resources/Android/AndroidManifest.xml 文件中还有其他配置 value。您需要在此处检查的一件事是您当前请求的权限,以及它们是否与您应用程序的当前状态保持一致。有关更多详细信息,请查看 Android 关于权限的文档

最后一点:您的 Info.plistAndroidManifest.xml 文件还包含应用程序的版本号,NativeScript 默认将其设置为 1.0。如果您想更改这些 value,或者如果您需要更新应用程序更新的 value,请参考 NativeScript 关于版本控制的文档 - 这里有 iOS 文档,这里有 Android 文档

当您对配置感到满意并准备就绪时,让我们继续优化您的代码本身。

步骤 4(可选):Webpack

在 NativeScript 中,您的源代码是 JavaScript,就像 Web 上的 JavaScript 代码一样,您可能希望在将代码推送到生产环境之前优化您的 JavaScript 代码。对于 NativeScript 应用程序,首选的优化工具是 webpack,NativeScript 对其内置了支持。

在我们开始之前,值得注意的是,使用 webpack 对于 NativeScript 应用程序是可选的。您从使用 webpack 中获得了一件大事 - 因为 webpack 减少了应用程序中的 JavaScript 代码量,您的应用程序将加载更快,并且当您的应用程序出现在应用商店中时,您将拥有更小的应用程序大小。您从 webpack 中获得的实际好处取决于您正在构建的应用程序,最显著的是它当前的大小。

在 NativeScript 中使用 webpack 的缺点是需要配置和维护另一个东西。虽然 NativeScript 的 webpack 插件超级容易安装和开始使用,但对于高级使用来说,配置起来可能很棘手,尤其是如果您以前从未使用过 webpack 的话。如果您已经对本文中的部署步骤感到不知所措,您可以考虑先将应用程序部署到商店,并在后续版本中使用 webpack 优化这些应用程序。

决定权在您手中,但如果您想试用 webpack,请继续阅读 NativeScript webpack 文档。如果您遇到问题,请尝试在 NativeScript 社区论坛 上寻求帮助。

一切都设置好后,让我们继续构建您的应用程序。

步骤 5:Android 发布版本

现在您已经完成了所有配置,您已准备好构建您的应用程序并将其放到应用商店中。让我们从 Android 开始,因为将您的应用程序放到 Google Play 比处理 iOS App Store 要容易得多。

在您前往 Google Play 注册和发布此应用程序之前(这是下一步),您首先需要为您的应用程序生成可执行的 Android 文件。在 Android 上,此文件具有 .apk 扩展名,您可以使用 NativeScript CLI 生成此文件。

您在 NativeScript 开发过程中一直在使用的 tns run 命令实际上为您生成了一个 .apk 文件,并将该文件安装在 Android 模拟器或设备上。但是,您必须为实际的 Google Play 发布执行的构建也必须进行代码签名。如果您想深入了解密码学细节,您可以参考 Android 关于代码签名的文档,但在高层面上,您需要执行两项操作才能创建您的 Android 应用程序的发布版本。

  1. 创建一个 .keystore.jks(Java 密钥库)文件。
  2. 在构建期间使用该 .keystore.jks 文件对您的应用程序进行签名。

Android 文档为您提供了 有关如何创建密钥库文件的一些选项。我首选的方法是 keytool 命令行实用程序,它包含在 NativeScript 依赖的 Java JDK 中,因此它应该已经在您的开发机器的命令行中可用。

要使用 keytool 生成用于代码签名的密钥库,请使用以下命令,将 tj-vantoll 替换为您自己的姓名或公司的名称,并将 NameOfYourApp 替换为您的应用程序的名称。

keytool -genkey -v -keystore tj-vantoll.jks -keyalg RSA
-keysize 2048 -validity 10000 -alias NameOfYourApp

keytool 实用程序将询问您许多问题,其中一些问题是可选的(组织名称,以及您的城市/州/国家/地区名称),但最重要的一个是密钥库和别名(稍后会详细介绍)的密码。以下是当我为 Pokémon Types 生成密钥库时,keytool 过程的样子。

keystore-generation
运行 keytool 命令以生成密钥库的输出

在我们继续讨论如何使用此 .jks 文件之前,有一件重要的事情您需要知道。将此 .jks 文件放在安全的地方,并且不要忘记密钥库或别名的密码。(我个人喜欢为我的密钥库和别名使用相同的密码,以简化我的生活。)Android 要求您使用完全相同的 .jks 文件对您的应用程序的所有更新进行签名。这意味着,如果您丢失了此 .jks 文件或其密码,您将无法更新您的 Android 应用程序。您将不得不创建 Google Play 中的一个全新条目,并且您现有的用户将无法升级。所以不要丢失它!

还有一件事:在大多数情况下,您将希望使用单个密钥库文件对所有个人或公司的 Android 应用程序进行签名。您还记得您必须将 -alias 标志传递给 keytool 实用程序,以及该别名具有自己的密码吗?事实证明,一个密钥库可以拥有多个别名,并且您需要为构建的每个 Android 应用程序创建一个别名。(注意:在 Android Studio 中向现有密钥库添加别名的最简单方法。)

好的,现在您有了此 .jks 文件,并且您已将其存储在安全的位置,其余过程非常简单。运行 tns build android 命令,并将您刚刚用来创建 .jks 文件的信息传递给它。例如,以下是用于创建 Pokémon Types 的发布版本的命令。

tns build android --release
--key-store-path ~/path/to/tj-vantoll.jks
--key-store-password my-very-secure-password
--key-store-alias PokemonTypes
--key-store-alias-password my-very-secure-password

该命令完成后,您将在应用程序的 platforms/android/app/build/outputs/apk 文件夹中获得一个发布 .apk 文件。请注意该文件的路径,因为您将在下一步中需要它 - 将您的应用程序部署到 Google Play。

步骤 6:Google Play

Google Play 是 Android 用户查找和安装应用程序的地方,Google Play 开发者控制台 是开发者注册和上传应用程序供用户查找的地方。

Android 关于 上传应用程序和设置您的商店列表 的文档非常好,因此我不会在此处重新创建所有这些信息。相反,我将提供一些提示,您可能在将自己的 NativeScript 应用程序上传到 Google Play 时发现这些提示很有用。

屏幕截图

在 Google Play 开发者控制台的“商店列表”选项卡上,您必须提供至少两个应用程序运行时屏幕截图。虽然您可以选择多种方法来创建这些屏幕截图,但我认为我会详细说明我首选的方法。

使用 tns run android 命令在 Android AVD(Android 虚拟设备)中启动您的应用程序。Android AVD 具有使用模拟器侧边栏的小相机图标拍摄屏幕截图的内置方式。

avd-camera
您可以用来从 Android 虚拟设备拍摄屏幕截图的按钮

使用此按钮拍摄应用程序中最重要的屏幕的几个屏幕截图,并且图像文件本身将出现在您的桌面上。从那里,您可以获取这些文件并直接将它们上传到 Google Play 开发者控制台,但我个人建议使用 DaVinci 等服务来为您的屏幕截图添加一些风格,并将它们变成一个小型教程,说明您的应用程序的功能。例如,以下是我用于 Pokémon Types 的屏幕截图。

pokemon-types-screenshots
我用于 Pokémon Types 的屏幕截图。注意屏幕截图不仅仅是显示应用程序的静态图像。

像经过精心打磨的屏幕截图这样的细微之处可以决定用户是点击“安装”按钮还是继续前进,因此花几分钟时间制作高质量的屏幕截图文件确实值得。

特色图形

Google Play 还要求您上传一个 1024 x 500 的“特色图形”图像文件。此文件将显示在您的商店列表的顶部。为了让您了解实际效果,以下是我在 Nexus 6 上的 Pokémon Types“特色图形”的样子。

android-feature-graphic
Google Play 应用程序列表中“特色图形”的位置

设计特色图形可能很困难,作为缺乏设计天赋的人,我认为我在 Pokémon Types 上做得不是很好。如果您在设计这些图像时遇到困难,您可以尝试的事情之一就是使用应用程序的徽标作为纯色背景。一些流行的应用程序采用这种方法,例如 Facebook。

facebook-feature-graphic
许多流行的应用程序,例如 Facebook,使用简单的图标作为它们的特色图形

APK

Google Play 开发者控制台的“应用程序版本”部分是您上传在本文前面步骤中生成的 .apk 文件的地方。仅作为提醒,该文件位于应用程序的 platforms/android/app/build/outputs/apk 文件夹中。

上传 APK 并详细说明开发者控制台中应用程序的所有信息后,您就可以提交应用程序了!Android 应用程序审查通常需要几个小时,除非 Google 发现任何问题,否则您的应用程序应该会在半天左右的时间内在 Google Play 中可用。

Android 完成后,现在您可以着手处理 iOS 了。

步骤 7:iOS 发布版本

说句实话,将 iOS 应用发布到 iOS App Store 是您在软件开发生涯中最痛苦的流程之一。因此,如果您在这些步骤中遇到困难或困惑,请知道这不是您一个人在战斗——每个人第一次发布 iOS 应用都会感到沮丧。

与之前的步骤一样,我不会在这篇文章中详细说明生成 iOS 发布版本的每个步骤——因为必要的步骤经常发生变化,而且 NativeScript 文档已经详细介绍了创建 iOS 发布版本的主题。我将要做的是列出一些您应该了解的事情。

Apple 开发者帐户

要将 iOS 应用部署到 iOS App Store,您必须拥有一个有效的 Apple 开发者帐户。加入该计划的费用为每年 99 美元,您可以在 developer.apple.com/register 上注册。

证书、标识符和配置文件

拥有 Apple 开发者帐户后,您需要在 Apple Developer 门户网站上创建生产证书、App ID 和分发配置文件。这是整个过程中最繁琐的部分,因为需要花一些时间来学习这些不同文件的作用以及如何使用它们。

NativeScript 文档中包含引导您完成该过程的步骤,但坦率地说,最好的方法是找到另一个已完成这些步骤的人,让他们指导您完成必要的步骤。如果您遇到困难,请在 NativeScript 社区论坛 上寻求帮助。

生成您的 .ipa 文件

iOS 中相当于 Android 的 .apk 文件的是 .ipa 文件,您需要该文件才能将您的应用上传到 iOS App Store。

在 NativeScript 中,您可以通过几种不同的方法生成该文件。我首选的方法是使用 NativeScript CLI 的 tns build ios 命令,并使用以下标志。

tns build ios --release --for-device

注意:以上命令要求您在 app/App_Resources/iOS/build.xcconfig 文件中填写代码签名信息——具体来说,取消对 CODE_SIGN_IDENTITYDEVELOPMENT_TEAM 行的注释,并提供适当的值。CODE_SIGN_IDENTITY 应该与您的分发 iOS 证书的名称相同(我将我的证书命名为“iOS Distribution”),您可以在 https://developer.apple.com/account/#/membership 上找到您的 DEVELOPMENT_TEAM ID(查找“团队 ID”)。

此命令完成后,您将在 platforms/ios/build/device 文件夹中获得所需的 .ipa 文件。记下该文件的位置,因为您将在本指南的最后一步中用到它。

呼!希望您能安然无恙地走到这一步。现在您可以进行最后一步了,我希望我能告诉您它很简单——iTunes Connect。

步骤 8:iTunes Connect

iTunes Connect 是 Apple 等同于 Google Play 开发者门户的网站,但更糟糕。我所说的更糟糕是指,至少比 Google Play 开发者门户多花 50% 的时间来填写适当的信息并弄清楚该怎么做。

与之前的步骤一样,我不会提供将您的应用上传到 iTunes Connect 的分步指南。Apple 太频繁地更改该门户网站,而且他们关于 iTunes Connect 的文档相当不错。但是,我会为您提供一些关于如何注册您的应用以进行 iOS 分发的提示。

创建新的应用

您需要做的第一件事是注册您的应用。为此,请访问 https://itunesconnect.apple.com/,点击“我的应用”,然后点击“+”按钮(目前位于屏幕左上角),然后选择“新建应用”。

itunes-connect-new-app
要注册 iTunes Connect 中的新应用,请使用上面的“新建应用”链接。

在这里,您需要提供一些关于您的应用的信息,例如它的名称和 App ID。以下是我为 Pokémon Types 提供的信息。

itunes-connect-info
注册 iTunes Connect 中的新应用时需要提供的信息示例

提供这些信息后,您将被带到您的应用的仪表板,您需要在那里提供更多关于您的应用程序的元数据。大多数信息都非常直观,例如描述、定价等,但有一些“有趣的”部分需要您处理,例如屏幕截图。

屏幕截图

与 Android 上的情况类似,iOS 要求您提供屏幕截图文件才能提交您的应用。以前版本的 iTunes Connect 要求您为每个支持的 iPhone 和 iPad 分辨率提供五个屏幕截图,这就像听起来那样痛苦。

幸运的是,iTunes Connect 现在只要求您上传两组屏幕截图,一组用于最大的 iPhone 设备(5.5 英寸显示屏),另一组用于最大的 iPad 设备(12.9 英寸显示屏)。Apple 仍然允许您为每个 iOS 设备尺寸提供优化的屏幕截图,但如果您只提供 5.5 英寸和 12.9 英寸的屏幕截图,Apple 会自动将您提供的屏幕截图重新缩放为更小的显示设备。

要获得这些屏幕截图,您可以将您的应用运行在物理 iPhone Plus 和 iPad Pro 设备上,但我发现从 iOS 模拟器中获取这些屏幕截图要容易得多。为此,请在任何 iOS 模拟器上运行您的 iOS 应用。

tns run ios --emulator

iOS 模拟器运行后,使用模拟器的“硬件”->“设备”菜单切换到“iPhone 7 Plus”,因为它可以用于获取 5.5 英寸的屏幕截图。

simulator-device-menu
您可以使用 iOS 模拟器的硬件菜单切换到不同的 iOS 设备。

注意:在您运行了正确大小的模拟器后,您需要重新运行 tns run ios --emulator 以将您的应用部署到该新的模拟器。

在运行了正确的模拟设备后,您可以使用模拟器的 Cmd + S 键盘快捷键为您的应用截取屏幕截图,该快捷键会将相应的图像文件保存到您的桌面。与 Android 一样,为您的应用在运行时最重要的部分截取几个屏幕截图。

完成后,使用模拟器的“硬件”->“设备”菜单切换到“iPad Pro(12.9 英寸)”,因为它可以用于获取 12.9 英寸的屏幕截图。使用 tns run ios --emulator 命令将您的应用部署到 iPad 模拟器,然后使用 Cmd + S 键盘快捷键获取几个 iPad 尺寸的图像。

此时,您已做好准备。您可能想使用 DaVinci 等服务来完善您的图像文件,但准备就绪后,将您的图像拖放到 iTunes Connect 的“应用预览和屏幕截图”区域。以下是我为 Pokémon Types 提供的屏幕截图示例。

pokemon-types-screenshots-ios
屏幕截图文件在 iTunes Connect 中的外观

提示:您可能希望考虑在此部分的 iTunes Connect 中为您的应用程序添加应用预览视频。应用预览是您可以用来展示您的应用在运行时的短视频,如果制作得当,它真的可以帮助您提高下载量。要详细了解应用预览视频以及如何创建好的应用预览视频,请参阅Apple 关于此主题的文档

上传您的 .ipa 文件

您快到了!在将所有信息输入 iTunes Connect 后,您最后一步是将您构建的 .ipa 文件与您刚刚输入的所有信息相关联。具体来说,您需要填写 iTunes Connect 中的这个部分。

itunes-connect-build
iTunes Connect 中“构建”部分的默认外观

正如 Apple 的消息所说,您可以通过多种方法上传您的 .ipa 文件,包括使用 Xcode 或名为 Application Loader 的工具。但我个人更喜欢使用 NativeScript CLI 中的内置上传功能。

运行以下命令以将您的应用发布到 iTunes Connect。

tns publish ios --ipa <path to your ipa file>

提示:请记住,您的 .ipa 文件位于您的应用的 platforms/ios/build/device 文件夹中。对于 Pokeémon Types,我运行的完整命令是 tns publish ios --ipa platforms/ios/build/device/pokemontypes.ipa

这应该是全部内容。不过,有一点需要注意:出于某种奇怪的原因,从您上传 iOS 应用到该应用出现在 iTunes Connect 中之间存在不可忽略的延迟。我见过延迟短至 30 秒,长至一小时。这很奇怪,而且 iTunes Connect 没有提供任何提示表明正在进行某种处理。所以请耐心等待,并在构建文件出现之前频繁点击刷新按钮。出现后,您将看到类似这样的内容。

itunes-connect-uploaded-build
在您上传有效的 .ipa 文件后,iTunes Connect 中“构建”部分的外观

选择构建后,您可能已做好准备。点击“提交以供审核”按钮……并祈祷一切顺利。

Apple 审核您提交的 iOS 应用的延迟时间非常不稳定。在撰写本文时,iOS App Store 的平均审核时间约为 2 天。我收到 Pokémon Types 的审核结果几乎正好花了 2 天。

提示:网站 appreviewtimes.com/ 提供聚合的应用审核时间,让您了解当前的应用审核时间。

如果一切顺利,您将在收件箱中收到一条类似这样的喜讯。

success-email
Apple 批准您的 iOS 应用后,您将看到的消息示例

总结

完成了这八个步骤后,您的应用现在已在 Google Play 和 iOS App Store 上上架。如果您完成了所有步骤,恭喜您🎉

请务必在 NativeScript 展示页面 上告诉我们您的应用——我们可以帮助宣传您这款酷炫的新应用。

部署应用并非易事,但现在您已经完成了一次该过程,当您需要为将来的应用执行此操作时,它应该会容易得多。

注意:在阅读本指南的过程中遇到困难了吗?NativeScript 社区论坛 是一个绝佳的地方,您可以在这里提出与 NativeScript 有关的所有问题。请告诉我们您如何提供帮助。