为您的第一个Ionic 2应用程序编码：设置

最新推荐文章于 2024-10-18 00:00:00 发布

cunjie3951

最新推荐文章于 2024-10-18 00:00:00 发布

阅读量278

点赞数

文章标签： python java 大数据 linux 编程语言

在最新版本的Ionic 2中，您可能会是想要尝试的混合应用程序开发人员之一。但是，也许您对入门所需的学习量不知所措。

这就是为什么我想通过逐步引导您创建第一个Ionic 2应用程序为您提供一个良好的开端的原因。如果您已经熟悉Ionic，那么这些概念可能很容易随您“点击”。但是，如果您是一个完整的初学者，请不要担心-我不会假设您对框架有任何先验知识。

应用概述

在本教程和下一个教程中，您将创建一个照片共享应用程序，使用户可以从设备中选择图像并将其共享到Instagram。这是该应用程序的外观：

设置环境

在开始使用Ionic 2开发应用程序之前，首先必须设置您的开发环境。这包括以下软件位：

Android SDK ：使用Cordova和Ionic构建的应用程序依赖于本机应用程序开发人员使用的相同开发人员工具。
Node.js ：Ionic主要将其用于工具-诸如编译代码和检查错误之类的事情。
用于测试的Android设备或模拟器。您可以使用Android SDK安装程序安装默认的Android模拟器。

我不会向您展示如何设置您的开发环境。 Cordova平台指南已经在以下方面做得很好：

这两页将向您显示有关为iOS或Android设置Cordova所需的所有知识。设置好您的开发环境后，我们可以继续下一步。

安装Cordova和Ionic

！现在，您可以实际安装Cordova和Ionic。使用以下命令：

npm install -g cordova ionic

一旦完成安装，假设没有任何错误，您可以使用以下命令验证它们是否确实已安装： cordova --version和ionic --version 。这将向您显示系统上安装的Cordova和Ionic框架的版本。对我来说，它们返回6.4.0和2.2.1 。

如果要查看更详细的版本信息，例如Ionic Framework版本和Ionic CLI版本，请改用以下内容：

ionic info | grep "Version"

这是一个示例输出：

Ionic Framework Version: 2.2.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
Node Version: v6.7.0

创建一个新的离子项目

Ionic CLI提供了ionic start命令，可轻松创建新项目：

ionic start photoSharer blank --v2 --id com.tutsplus.photosharer

这是一个模板，可帮助您了解每个选项的作用：

ionic start {name of the app} {starter template to use} --v2 --id {ID of the app when installed}

此处使用的启动器模板为blank 。为了使某些东西显示在屏幕上，它仅包含最低要求。还有其他一些，但它们可能有点压倒性的。

请记住，Ionic CLI可以同时满足Ionic 1和Ionic 2项目，因此，由于Ionic 1仍是默认设置，因此您仍必须指定--v2选项以引导Ionic 2项目。但是，一旦进入Ionic 2项目，Ionic CLI就会很聪明，知道要使用哪个版本。

添加平台

默认情况下，Ionic不附带任何可部署到的平台。您可以使用ionic platform add命令添加一个，然后在您要部署到的平台上添加一个：

ionic platform add android

如果要部署到另一个平台，只需将android替换为所需的任何平台。

安装插件

对于此应用程序，您将需要两个插件：一个用于从用户库中选择图像，另一个用于将图像共享至Instagram应用程序。

首先是Image Picker插件。这使该应用程序能够从用户的照片库中选择图像。

ionic plugin add https://github.com/Telerik-Verified-Plugins/ImagePicker

接下来是Instagram插件。这使您可以将图像转发到Instagram应用进行发布。

ionic plugin add cordova-instagram-plugin

您刚刚安装的这两个插件是精选的ES6和TypeScript包装器的一部分，这些包装器用于名为Ionic Native的 Cordova插件。他们的主要工作是通过在Promises或Observables包装插件回调，使与Cordova插件的交互变得更加容易。

开发流程

现在您已经准备好开始对应用程序进行编码。但是在开始之前，我们先来看一下Ionic 2的开发工作流程和文件夹结构。

在Ionic 2中，大多数开发工作都在src文件夹中完成。每次您对此文件夹中的文件进行更改时，都会重新编译这些文件。与Ionic 1不同，必须进行编译，因为源文件是用TypeScript（编译为ES5代码）和Sass（编译为CSS代码）编写的。每次进行更改时，还会检查代码中是否存在错误，这些错误会通过控制台或应用预览报告给开发人员。编译完成后，结果文件将复制到www文件夹，更改将反映在应用程序预览中。

资料夹结构

为了使您能够轻松地处理Ionic 2项目，您需要熟悉文件夹结构。对于初学者，您需要知道每个文件夹的用途，以便知道将源文件放置在哪里以及在哪里寻找所需的文件。

node_modules ：这是Ionic 2依赖项的存储位置。在大多数情况下，除非其中一个依赖项存在问题并且您必须重新安装它，否则您无需触摸此文件夹。
platform ：在构建要在设备或仿真器上运行的应用程序时，这是放置平台特定代码的位置，也是放置应用程序安装程序的位置。这意味着，每次构建应用程序时， www和plugins文件夹中的所有文件都会复制到此处。
plugins ：显然，这是存储插件的位置—默认的Ionic插件和您安装的任何其他插件。
resources ：在此处放置应用程序资源，例如图标和初始屏幕。
src ：这是您大部分时间进行编码的地方。构成您的应用程序的所有模板，样式表和TypeScript文件都存储在此处。
www ：这是编译文件所在的位置。此处的文件在应用预览中提供。
hooks ：这是Cordova开发钩子脚本的存储位置。如果您有要在开发生命周期的某个阶段（例如，添加平台或插件时）执行的自定义脚本，则使用这些脚本。