Ionic环境设置

本章将向您展示如何从Ionic Framework入手。下表包含启动Ionic所需的组件列表。

Sr.No. 软件和描述
1

NodeJS

这是使用Ionic创建移动应用程序所需的基础平台。您可以在我们的NodeJS环境设置中找到有关NodeJS安装的详细信息。确保在安装NodeJS时也安装npm。
2

html SDK

如果您要在Windows平台上工作并正在为html平台开发应用程序，那么您应该在计算机上安装html SDK。以下链接提供有关html环境设置的详细信息。
3

XCode

如果您打算在Mac平台上工作并正在为iOS平台开发应用程序，那么您应该在计算机上安装XCode。以下链接提供有关iOS环境设置的详细信息。
4

cordova and Ionic

这些是开始使用Ionic所需的主要SDK。本章介绍如何在简单步骤中设置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 文件夹。这是我们的根文件夹。

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

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

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

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

安装过程的最后一步是运行您的应用程序，如果连接，将启动移动设备，如果没有连接设备，则启动默认模拟器。html默认模拟器很慢，所以我建议你安装Genymotion或其他一些流行的html模拟器。

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

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

Ionic Tabs App

空白应用程序

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

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

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

C:\Users\Username\Desktop> cd myApp

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

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

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

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

最后，我们将使用以下代码启动App

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

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

Ionic空白应用程序

侧面菜单应用程序

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

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

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

C:\Users\Username\Desktop> cd myApp

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

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

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

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

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

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

这将产生以下结果，即Ionic侧菜单应用程序。

Ionic侧菜单应用程序

在浏览器中测试App

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

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

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

Ionic侧菜单应用程序

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

项目文件夹结构

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

文件夹结构

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

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

  • platforms - 这是创建html和IOS项目的文件夹。 在开发过程中，您可能会遇到一些需要这些文件的特定于平台的问题，但您应该在大多数情况下保持原样。

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

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

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

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

    • 在 CSS 文件夹，在那里你会写你的CSS样式。

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

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

    • 该 库 文件夹，你的图书馆将被放置。

    • HTML文件的 templates 文件夹。

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

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

    • .bowerrc 是凉亭配置文件。

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

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

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

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

    • config.xml 是Cordova配置文件。

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

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