Ionic - 环境设置

---

本章将向您展示如何开始使用 Ionic 框架。下表包含启动 Ionic 所需的组件列表。

安装 Cordova 和 Ionic

在本教程中，我们将使用 Windows 命令提示符。相同的步骤也适用于 OSX 终端。打开命令窗口来安装 Cordova 和 Ionic -

C:\Users\Username> npm install -g cordova ionic

创建应用程序

在 Ionic 中创建应用程序时，您可以从以下三个选项中进行选择 -

• 标签应用程序
• 空白应用程序
• 侧面菜单应用程序

在命令窗口中，打开要在其中创建应用程序的文件夹，然后尝试下面提到的选项之一。

标签应用程序

如果您想使用 Ionic 选项卡模板，该应用程序将使用选项卡菜单、标题和一些有用的屏幕和功能来构建。这是默认的 Ionic 模板。打开命令窗口并选择要创建应用程序的位置。

C:\Users\Username> cd Desktop

该命令将更改工作目录。该应用程序将在桌面上创建。

C:\Users\Username\Desktop> ionic start myApp tabs

Ionic Start命令将创建一个名为myApp的文件夹并设置 Ionic 文件和文件夹。

C:\Users\Username\Desktop> cd myApp

现在，我们要访问刚刚创建的myApp文件夹。这是我们的根文件夹。

现在让我们添加适用于 Android 平台的 Cordova 项目并安装基本的 Cordova 插件。以下代码允许我们在 Android 模拟器或设备上运行该应用程序。

C:\Users\Username\Desktop\myApp> ionic platform add android

下一步是构建应用程序。如果运行以下命令后出现构建错误，则可能没有安装 Android SDK 及其依赖项。

C:\Users\Username\Desktop\myApp> ionic build android

安装过程的最后一步是运行您的应用程序，这将启动移动设备（如果已连接）或默认模拟器（如果没有连接的设备）。Android 默认模拟器速度很慢，因此我建议您安装Genymotion或其他一些流行的 Android 模拟器。

C:\Users\Username\Desktop\myApp> ionic run android

这将产生以下结果，这是一个 Ionic Tabs 应用程序。

空白应用程序

如果您想从头开始，可以安装 Ionic 空白模板。我们将使用上面解释的相同步骤，添加ionic start myApp 空白而不是ionic start myApp 选项卡，如下所示。

C:\Users\Username\Desktop> ionic start myApp blank

Ionic Start命令将创建一个名为myApp的文件夹并设置 Ionic 文件和文件夹。

C:\Users\Username\Desktop> cd myApp

让我们添加适用于 Android 平台的 Cordova 项目并安装基本的 Cordova 插件，如上所述。

C:\Users\Username\Desktop\myApp>ionic platform add android

下一步是构建我们的应用程序 -

C:\Users\Username\Desktop\myApp> ionic build android

最后，我们将使用以下代码启动应用程序 -

C:\Users\Username\Desktop\myApp> ionic run android

这将产生以下结果，这是一个 Ionic Blank 应用程序。

侧边菜单应用程序

您可以使用的第三个模板是侧菜单模板。步骤与前两个模板相同；我们将在启动应用程序时添加侧菜单，如下面的代码所示。

C:\Users\Username\Desktop> ionic start myApp sidemenu

Ionic Start命令将创建一个名为myApp的文件夹并设置 Ionic 文件和文件夹。

C:\Users\Username\Desktop> cd myApp

让我们添加适用于 Android 平台的 Cordova 项目，并使用下面给出的代码安装基本的 Cordova 插件。

C:\Users\Username\Desktop\myApp> ionic platform add android

下一步是使用以下代码构建我们的应用程序。

C:\Users\Username\Desktop\myApp> ionic build android

最后，我们将使用下面给出的代码启动应用程序。

C:\Users\Username\Desktop\myApp> ionic run android

这将产生以下结果，这是一个 Ionic 侧边菜单应用程序。

在浏览器中测试应用程序

由于我们使用 JavaScript，因此您可以在任何网络浏览器上提供您的应用程序。这将加快您的构建过程，但您应该始终在本机模拟器和设备上测试您的应用程序。键入以下代码以在 Web 浏览器上提供您的应用程序。

C:\Users\Username\Desktop\myApp> ionic serve

上述命令将在网络浏览器中打开您的应用程序。Google Chrome 为移动开发测试提供了设备模式功能。按F12访问开发者控制台。

单击控制台窗口的左上角有“切换设备模式”图标。下一步是单击右上角的“停靠到右侧”图标。刷新页面后，您应该准备好在网络浏览器上进行测试。

项目文件夹结构

Ionic 为所有类型的应用程序创建以下目录结构。对于任何 Ionic 开发人员来说，了解每个目录和下面提到的文件的用途都很重要 -

让我们快速了解上图所示的项目文件夹结构中可用的所有文件夹和文件。

• 挂钩- 挂钩是可以在构建过程中触发的脚本。它们通常用于 Cordova 命令定制和构建自动化流程。在本教程中我们不会使用此文件夹。

• Platforms - 这是创建 Android 和 IOS 项目的文件夹。您在开发过程中可能会遇到一些需要这些文件的特定于平台的问题，但大多数时候您应该保持它们完好无损。

• Plugins - 此文件夹包含 Cordova 插件。当您最初创建 Ionic 应用程序时，将安装一些插件。我们将在后续章节中向您展示如何安装 Cordova 插件。

• 资源- 此文件夹用于向项目添加图标和启动屏幕等资源。

• Scss - 由于 Ionic 核心是使用 Sass 构建的，因此这是 Sass 文件所在的文件夹。为了简化过程，我们在本教程中不会使用 Sass。我们的样式将使用 CSS 来完成。

• www - www 是 Ionic 开发人员的主要工作文件夹。他们大部分时间都在这里度过。Ionic 为我们提供了“www”内的默认文件夹结构，但开发人员可以随时更改它以满足自己的需求。打开此文件夹后，您将找到以下子文件夹 -

  • css文件夹，您将在其中编写 CSS 样式。

  • img文件夹，用于存储图像。

  • js文件夹包含应用程序主配置文件 (app.js) 和 AngularJS 组件（控制器、服务、指令）。您的所有 JavaScript 代码都将位于这些文件夹中。

  • libs文件夹，您的库将放置在其中。

  • HTML 文件的模板文件夹。

  • Index.html作为您的应用程序的起点。

• 其他文件- 由于这是初学者教程，我们只会提到一些其他重要文件及其用途。

  • .bowerrc是 Bower 配置文件。

  • .editorconfig是编辑器配置文件。

  • .gitignore用于指示当您要将应用程序推送到 Git 存储库时应忽略应用程序的哪一部分。

  • 如果您选择使用 Bower 包管理器，bower.json将包含 Bower 组件和依赖项。

  • gulpfile.js用于使用 gulp 任务管理器创建自动化任务。

  • config.xml是 Cordova 配置文件。

  • package.json包含有关使用 NPM 包管理器安装的应用程序、其依赖项和插件的信息。

在下一章中，我们将讨论 Ionic 开源框架中可用的不同颜色。