使用Ionic开始您的移动应用开发之旅：

在本文中，我将帮助我的读者理解开发应用程序的框架之一。框架是'离子'。我们都知道“应用程序”在我们的生活中处于什么位置，并且有很多方法可以开发应用程序。所以，在进入“离子”世界之前，我想介绍一下应用程序开发世界的一些重要概念。

现在，你一定想知道我在说什么概念。让我们一个接一个地结束等待和潜水。

Web，Hybrid和Native应用程序：

在你开始你的应用程序开发之旅的那一刻，你必须经历过这些话，它还会产生许多问题，比如它们是什么？有什么不同？

让我们一个接一个地理解它们。

网络应用程序：网络应用程序是我们通过网络访问我们的浏览器的应用程序，例如互联网。不要让自己与'app'这个词混淆。您无需通过Google Play商店或应用商店在手机上下载网络应用。它们可以通过chrome，safari等网络浏览器访问。它们不占用用户的任何记忆。现在，它可能会出现另一个问题，“它的行为听起来像网站，然后网络应用程序与网站的不同之处”。答案是网站通常用于提供信息，而网络应用程序则用于提供更多功能和信息。例如，维基百科是一个网站，而Facebook是一个网络应用程序，因为它提供了更多的功能和交互性。

Web应用程序内置HTML，CSS和JS。有许多框架可用于构建Angular，React和Vue.js等Web应用程序。

现在来到另一个听到的词是：

原生应用程序：原生应用程序是专门为一个平台（环境）开发的应用程序，使用特定语言（如Java或kotlin）用于开发Android平台的应用程序，而Swift或Objective-C用于开发iOS平台的应用程序。由于本机应用程序是使用该平台更易理解的特定语言编写的，因此它使本机应用程序与所有设备的操作系统功能（如麦克风，相机等）更具交互性。

现在，它的最后一个时间是：

混合应用程序：由于其名称是自我解释的，混合应用程序是具有本机和Web应用程序功能的应用程序，例如它们可以像应用程序和Google Play商店一样分发，就像本机应用程序一样，可以使用HTML，CSS等网络技术进行开发JS就像网络应用程序一样。不是很酷吗？

它们是网络和本机应用程序的混合体。与本机应用程序一样，这些应用程序也可以与操作系统功能进行交互，并且可以使用单个代码库为两个平台进行开发。等待这可能会让你好奇知道它是如何完成的。实际上，混合应用程序使用Web视图概念。即它们实际上是在嵌入在应用程序中的浏览器中运行的。

如果时间和资源受到限制，混合应用程序实际上很有用。与本机应用程序不同，您无需学习单独的语言进行开发。但是，原生应用程序有其自身的优势。正如我已经说过的，它是用该平台更容易理解的语言开发的。它使它们更快，并提供更好的用户体验。因此，它们都有自己的优点和缺点，这完全取决于你需要确定哪一个更适合你。

现在，我们知道应用程序世界中有哪些不同类型的应用程序，但我们应该知道开发这些类型的应用程序的语言/框架仍然未知。我们来讨论吧。

用于开发此类应用的语言/框架：

我已经讨论过像Java或kotlin这样的语言用于开发Android应用程序，而swift或Objective C用于iOS，即开发本机应用程序，我们可以根据平台使用Java / kotlin / swift或Objective C。市场上也有很好的框架可用于更快地开发Web应用程序，如Angular，React.js。对于混合应用程序开发，可用的框架是PhoneGap，Cordova，Ionic。

这些是我们可以选择开发我们选择的应用程序（本机/网络/混合）的方式。但是，我想告诉其他两个流行的移动应用程序开发框架，它是React原生和扑腾。我知道你一定听说过他们，这就是为什么我想简单地讨论一下。

React native或flutter是用于开发应用程序的其他框架，在市场中存在一个问题，您可能已经过去了，无论本机应用程序实际上是原生应用程序还是混合应用程序。虽然这不是我们主要关注的是本机应用程序是否为原生应用程序。因此，不会讨论这个，但是，本地反应的简要介绍是使用这个框架，开发很容易，因为我们必须编写一次并且可以在任何地方使用。开发是使用混合应用程序之类的JavaScript完成的，但与混合应用程序不同，它不使用Web视图概念。它使用与常规iOS和Android应用程序相同的基本UI构建块。因此，性能就像本机应用程序，但开发就像混合应用程序。

这就是它的全部。现在，我希望我的读者能够深入了解混合应用程序开发领域，因为我们的主题与这个世界有关。

混合应用开发世界：

正如我已经告诉过你的那样，市场上有混合应用程序开发的框架（Ionic，Cordova和PhoneGap）。但是，从字面上看，它们会让你感到困惑。当我开始阅读以了解他们时，我非常困惑。 PhoneGap与Cordova相同或不同，离子与Cordova有何不同？这就是我写这篇文章的原因，这样我的读者就不会像我面对的那样面对混乱。我们走吧。

Cordova是一个开源框架，允许我们使用HTML，CSS，JS等网络技术开发应用程序，能够与设备硬件进行交互，而PhoneGap也可以像Cordova一样使用，但具有一些附加功能。现在，你可能会想 – 它们是否相同，因为它们都在服务于同一目的？为了清楚起见，让我们了解Cordova和PhoneGap的故事：

PhoneGap由Nitobi创建。 Adobe于2011年从Nitobi购买它。为了使其成为开放源代码，Adobe为Apache提供了PhoneGap代码库，而它更名为'Cordova'，现在世界知道为'Apache Cordova'。因此，PhoneGap实际上是Cordova，但具有adobe额外功能。最初，Cordova和PhoneGap之间没有区别，但随着时间的推移，Adobe为PhoneGap添加了功能。因此，我们可以说PhoneGap实际上是Cordova，但具有adobe额外功能。

现在，来到Ionic。你一定在思考，那么离子是什么？它与Cordova和PhoneGap的区别如何？ Ionic也建立在'Apache Cordova'的顶部，但有角度（虽然支持Vue和React正在开发中）。 Ionic允许您开发带角度和Cordova的混合应用程序。您可以使用相同的Web应用程序角度代码进行一些小的更改，以便在很短的时间内开发应用程序。不是很酷吗？

我希望你现在必须对应用程序世界和更重要的混合应用程序世界有一个很好的了解。最后，我们将角度项目转换为app的时候到了。

将您的Angular项目转换为app：

在这个子主题中，我们将学习如何使用Ionic从头开始将角度项目转换为app，只需几步。在继续之前，我想告诉你角度的版本以及我更关注的平台。在这里，我使用了角度6（假设您已经有一些角度项目要转换成应用程序或'Hello World'项目也足够）并且将主要关注'android'平台。开始吧

假设您已经安装了NodeJS（如果没有，请点击此链接）。现在，使用下面的命令（使用npm）安装Cordova和Ionic：

npm install -g cordova ionic

现在，你可能想知道为什么科尔多瓦？你还记得吗，我告诉过Ionic是建在科尔多瓦上的。它为我们提供了与设备硬件交互的功能。这就是为什么需要安装Cordova。

安装完成后，让我们创建我们的离子项目（我将我的一个角度项目'meetingTime'转换为app。用你的项目名称替换它）：

离子开始会议时间

查看视频以便更好地了解。

https://vimeo.com/327792378

运行您的项目。转到项目目录并使用'ionic serve'。它将显示虚拟项目。现在，是时候运行你的实际项目了。为此，我们需要做出一些改变。

打开离子和角度项目的package.json并合并它。完成后，打开你的Ionic项目的angular.json，用angular.json的angular项目'styles'和'scripts'属性替换'styles'和'scripts'属性。

在此之后，用您的角度项目的src替换离子项目的src。现在，您的角度项目已准备好转换为app。在继续之前，运行它并检查（确保已运行'npm install'来安装其依赖项）。欢呼我希望你能看到你的项目完美运行。

等待您没有来这里在浏览器中运行您的项目，但希望将其作为应用程序运行到您的手机中。别担心你离这个愿望并不远。

在继续之前，我想对名为'config.xml'的文件进行说明。这是控制我们的应用程序设置的重要文件之一。在这里，我们'开发者'输入我们的应用程序的元数据，如packageName，version，versionCode（用于android），CFBundleVersion（用于iOS），启动屏幕配置等。有关详细信息，请访问此处。

现在，你知道这个文件的重要性，但是你会看到你的离子项目。此文件丢失。要生成它，请使用以下命令：

离子集成使cordova

这将生成config.xml。修改config.xml，如您的应用程序包名称，版本等。

等待您是否注意到上述命令不仅生成了config.xml，还生成了“resources”文件夹。此文件夹包含不同大小的应用程序图标和启动画面（启动图像），我们知道这是用户看到的第一件事。所以，让我们用我们的图标和屏幕替换那个虚拟图标和启动画面，但你可能会想到生成不同尺寸的图标和屏幕是多么繁琐的工作。别担心当Ionic在这里时，你为什么要照顾。只需在同一位置排列至少为2732×2732px的resources / icon.png和启动画面，至少应安排1024×1024px的图标图像。排列后，运行以下命令：

离子科多瓦资源

这将生成不同大小的图标和闪屏。 MAGIC，不是吗？这有多容易？但是，想要Android和iOS的不同图标和启动画面。别担心点击链接。

现在，您已完成配置文件，图标和启动画面。正如我已经告诉过你的那样，我将专注于android平台。所以，现在是构建apk的时候了。但是，我们需要在我们的离子项目中添加android平台以继续前进。

要添加android平台，请使用以下命令：

离子cordova平台添加android

这将添加android平台。现在，您可以在离子项目中看到'platforms'文件夹，其中'android'文件夹将在那里。

最后，使用简单命令创建apk：

离子cordova构建android -prod

以上命令将生成apk。

注意：Generated apk将调试一个，-prod标志最小化和优化我们的项目（aot complier in scene – Angular concept）。

对你有使用Ionic的应用程序的apk。将其安装到您的设备中，然后查看您的应用。

等待我们知道google play store不会接受这个调试apk。我们必须让它签名。别担心这也很简单就像生成调试apk一样。

开始吧。

首先，在上面的命令中使用-release标志制作unsigned apk（不是debug），即使用：

离子cordova构建android -prod – 发布

这将生成unsigned apk。使用以下命令签署您的发布版本apk：

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore key-store-fiilename.jks unsigned-apk

使用以下命令将您的构建与zipalign工具对齐：

（您的Android SDK路径）/ build-tools /（最新版本号）/ zipalign -v 4 android-release-unsigned.apk myapp-signed.apk

欢呼只需三个步骤，您就可以在Google Play商店中分发已签名的apk。

而已。这完全是关于应用程序世界以及我们如何使用Ionic以简单的方式将现有的角度项目转换为应用程序。

谢谢阅读