移动系统编程-安装和运行Ionic应用程序 (Installation and Running Ionic Apps)

安装 (Installation)

        假设您已经安装了Node.js和Angular，您可以使用以下命令安装Ionic：

npm install -g @ionic/cli

        您也可以不使用CLI安装Ionic，但如果您使用的是最新版本的Cordova，这样做可能会导致版本不匹配，不推荐这样做。

npm install -g ionic

        请注意，这个命令同时安装了Cordova和Ionic。Ionic需要Cordova，但我们将在教程中进一步讨论Cordova。

        我们可以通过克隆tabs起始项目来创建一个名为ionic1的新项目，方法如下：

ionic start ionic1 tabs

        在创建过程中，您可能会被问到两个问题。这两个问题是最近添加的，所以在您阅读本文时可能有所不同。第一个问题是：

Would you like to integrate your new app with Cordova to target native iOS and Android?

        回答“是”。这将允许我们在iOS和Android模拟器或实际设备上运行应用程序。在您阅读本文时，这个问题可能不存在。

Install the free Ionic Pro SDK and connect your app?

        回答“否”。如果您希望尝试，可以回答“是”，但在这个阶段，这是一个新产品，笔记中未集成。

        请注意，由于Ionic正在迅速发展，可能会有其他问题。您应该选择旧的选项（那些无聊的选项），因为这样会减少出现奇怪错误的可能性。

        当完成这些步骤后，我们就可以开始一个Ionic项目了。Ionic框架还衍生出了一个界面模板市场，您可以克隆并使用这些模板作为您自己应用程序的基础。对于本单元，您不需要购买界面，但您应该了解这对商业应用可能有用。

        我们以类似于Angular项目的方式开始开发项目。请注意，这安装的内容比Angular克隆操作还要多，体积也相当大。您可能会发现，通过复制和重命名目录而不是从云端复制来克隆其他项目更为快捷。

        请参阅以下链接了解Ionic安装的最新信息： How to Install The Ionic Framework CLI to Build Mobile Apps

        要启动Ionic开发环境，我们首先需要将默认目录更改为新项目文件夹，并使用ionic serve命令在浏览器中运行项目：

cd ionic1
ionic serve

        这将启动项目，并应在浏览器中打开一个窗口。以下图片是一个Chrome浏览器窗口，调整大小以模拟小型移动设备。

        我们还可以在Android模拟器或真实的Android设备上运行应用程序。这需要两个步骤，首先我们必须使用Cordova命令添加Android平台，然后运行应用程序。可以通过以下命令实现：

ionic cordova platform add android
ionic cordova emulate android

        模拟器环境安装教程：Android Studio安卓手机模拟器环境搭建_android studio 模拟器-CSDN博客

        这将在模拟器中运行应用程序，您需要在计算机上运行模拟器。有很多运行模拟器的选项，但我们将在在线课程中查看标准的Android模拟器（来自Google）。上面的应用程序在下面的Android 6.0模拟器图片中显示。

请注意，服务器不会在模拟器中运行应用程序。每次运行emulate命令时，都是一次性的安装。因此，最好在浏览器中调试您的应用程序，然后再在模拟器中运行。

如果您有一台连接到计算机的真实Android设备，那么您也可以以类似于Cordova运行命令的方式使用run命令。

ionic run android

        您的真实设备可能需要配置为开发模式或调试模式。虽然这有时是默认情况，但您可能需要参考设备手册以了解如何设置此配置。

        最后要注意的是计算机上Ionic应用程序代码的结构。这将在下一节中解释。以下活动将要求您修改一个页面，以便您可以看到服务器的运行情况。

Ionic应用程序结构 (Ionic App Structure)

        Ionic应用程序结构与Angular结构非常相似。这是自然的，因为Ionic基于Angular。但是，它也是基于Cordova的，所以Cordova的结构也被叠加上了。

        我们将展示克隆的tabs应用程序在计算机上的结构，以解释文件布局。以下是应用程序的根目录。

        这些文件是配置文件，我们不需要更改太多。JSON格式允许编辑我们应用程序的各种选项及其在测试环境中的运行方式。各个文件的用途如下：

1. node_modules文件夹应该是我们在进行Angular编码时熟悉的。它包含了我们安装的各种应用程序的Angular及其他代码。我们不会触碰这个文件夹，您应该注意到这是一个非常大的文件夹，包含了所有库，无论我们是否使用它们。需要注意的是，这个目录是用于开发的，当应用程序部署时，只会部署应用程序使用的库。
2. src文件夹包含了Ionic、Angular及其他用途的TypeScript代码。我们在这里编辑我们的Ionic应用程序，所以熟悉这个文件夹的结构和内容是很重要的。
3. 文件夹中的单个文件是开发和测试系统使用的配置文件。通常，我们不会触及这些文件，但会在教程课程中修改一些文件。

        如前所述，主要是src文件夹需要更改，因为这是我们应用程序的源代码。对于tabs应用程序，初次克隆时，它包含以下文件：

        在这个文件夹中，目录的用途如下：

1. app文件夹是我们为应用程序编辑的熟悉的Angular应用程序代码。
2. assets文件夹是我们用于应用程序的媒体资产。通常，我们只是将媒体资源文件放在这个文件夹中，并通过我们的源代码访问它们。
3. theme文件夹包含了操作我们应用程序外观的SCSS代码。在本单元中，我们不会经常使用它，而是依赖于默认的Ionic主题（外观）。
4. 我们不会编辑单个文件。

        SCSS文件包含了Sass格式化的代码。Sass（Syntactically Awesome Style Sheets）是标准CSS的一个超集，编译为CSS以分发到浏览器和其他HTML5容器中。它的实现类似于将TypeScript作为JavaScript的一个超集。在本单元中，我们没有时间深入讨论Sass的细节。

        如您所见，这个结构相当复杂。但是，对于本单元，我们将自己限制在生成Ionic代码的app文件夹。当我们部署代码时，许多文件夹和文件不会被复制到设备中。此外，部署过程通常是自动化的，所以我们不必担心哪些文件和文件夹是运行应用程序所必需的。

活动

        访问以下URL以找到应用程序结构的描述。

Project Structure - Tutorial

        阅读页面内容。请注意，我们将在教程课程中更详细地研究这个问题。

1. 根据您的Angular经验，<ion-app>标签用于什么？

   回答：<ion-app>标签是Ionic应用程序的根组件，它封装了整个应用程序的内容，类似于Angular中的<app-root>标签。

2. 您能看到./src/app/app.html（请注意文件扩展名）用于什么吗？Ionic广泛使用这种类型的文件。

   回答：./src/app/app.html文件是Ionic应用程序的主模板文件，它定义了应用程序的主视图结构和内容。

3. Ionic为其所有特定的代码使用了一个标签前缀。这个前缀是什么？（简单问题）

   回答：Ionic使用的标签前缀是ion-。

        如果您收到有关Capacitor的错误，请在Ionic项目文件夹内的命令行工具中运行以下两个命令以禁用Capacitor并添加Cordova构建器：

ionic integrations disable capacitor ng add @ionic/cordova-builders

        还要运行这些命令以安装Cordova和Native run：

npm install -g native-run npm install -g cordova