Ionic 2简介

在本文中，我们将介绍 ionic 2，它是 Ionic 跨平台移动应用程序框架的最新版本。首先，我们将回顾一下 Ionic 是什么以及它的用途。然后我们将深入研究 Ionic 2。我会告诉你新功能以及它与 Ionic 1的不同之处，我会帮助你决定是否应该在下一个项目中使用它。 

什么是Ionic(离子)？

Ionic 是一个使用html、css和javascript构建混合应用程序的框架。它带有一组 UI 组件和功能，您可以使用它们来创建功能齐全且有吸引力的移动应用程序。 

Ionic 建立在 cordova 堆栈上。你不能单独使用 Ionic 创建移动应用程序，因为它只处理 UI 部分。它需要与处理应用程序逻辑的 angular 和跨平台应用程序框架 Cordova 一起使用，它允许您将应用程序编译成可安装的文件并在移动设备的 Web 视图中运行它。 

使用 Cordova 和 Ionic 构建的应用程序可以在android和ios设备上运行。您还可以安装Cordova 插件 来提供本地功能，例如访问相机 和使用蓝牙低功耗设备。不过，Ionic 不仅仅是一个 UI 框架。Ionic 公司还提供支持 Ionic UI 框架的服务，包括Ionic Creator、Ionic View和Ionic Cloud。 

Ionic 2 有什么新功能？

在本节中，我们将了解 Ionic 版本 2 中的一些重大变化，以及 Ionic 2 中引入的新功能和工具。

浏览器支持

Ionic 1 在构建时只考虑了混合移动应用程序。但 Ionic 2 也是为支持渐进式 Web 应用程序 和Electron 应用程序而构建的。这意味着您现在不仅可以构建在 Cordova 环境中运行的 Ionic 应用程序，还可以构建渐进式 Web 应用程序，这些应用程序使用现代 Web 功能为用户提供类似应用程序的体验。 

您还可以针对Electron，这是一个使用 HTML、CSS 和 JavaScript 构建跨平台桌面应用程序的平台。Electron 与 Cordova 非常相似，但适用于 Windows、Ubuntu 或mac OS 等桌面操作系统。

Angular 2 和打字稿

Ionic 2 现在使用 Angular 2 进行模板和应用程序逻辑。这意味着开发人员必须先学习新的 Angular 2 语法，然后才能高效地创建 Ionic 2 应用程序。不过不要担心，因为这些概念与 Angular 1 中的概念仍然相同。还有ngMigrate等资源 可以帮助您将 Angular 1 技能转换为 Angular 2。

除了 Angular 2，Ionic 2 还使用typescript。对于那些不熟悉它的人来说，TypeScript 是 javaScript 的超集。这意味着您仍然可以使用原生 JavaScript 语法来编写您的应用程序。如果你想使用 TypeScript 附带的特性，例如 ES6 和 ES7 语法、静态类型和智能代码完成，那么你可以使用 TypeScript 特定的语法。您可以在自己喜欢的文本编辑器或 IDE 上安装一些插件，以获得 TypeScript 高级代码完成功能的好处。

句法

正如我所提到的，Ionic 2 中的模板语法发生了显着变化，主要是因为它过渡到使用 Angular 2。您甚至可能会发现新的语法更加简单和简洁。以下是 Ionic 1 和 Ionic 2 语法的几个示例：

监听事件s：

<!--ionic 1-->
<button on-tap="onTap()" class="button">Test</button>

<!--ionic 2-->
<button (tap)="onTap($event)">Test</button>

使用模型：

<!--ionic 1-->
<input ng-model="email" />

<!--ionic 2-->
<input [(ng-model)]="email" />

循环遍历数组并显示每个项目：

<!--ionic 1-->
<li ng-repeat="item in list">
    {{ item.name }}
</li>

<!--ionic 2-->
<li *ngFor="let item of list">
    {{ item.name }}    
</li>

文件夹结构

如果您比较 Ionic 1 项目和 Ionic 2 项目的文件夹结构，您会注意到您习惯在 Ionic 1 项目中看到的大多数文件夹在 Ionic 2 中仍然存在。这是因为底层平台并没有真正改变——Ionic 2 仍然使用 Cordova。唯一改变的是与源文件有关的部分。这是 Ionic 1 应用程序的文件夹结构的屏幕截图：

这是一个使用 Ionic 2 构建的应用程序：

如果您仔细观察，您会注意到现在有一个src 文件夹。那是您项目的所有源文件所在的位置，每次您对该目录中的文件进行更改时，更改的文件都会被编译并复制到www/build 目录。以前，源文件都在 www 目录中，您不需要额外的编译步骤。

目录结构也更有条理。如果您查看src/pages 目录，您可以看到每个页面都有自己的文件夹，每个文件夹中都有该特定页面的 HTML、CSS 和 JavaScript 文件。 

以前，在 Ionic 1 中，您只是获得了一个空目录，并且可以自由地按照您的意愿构建您的项目。但这带来了不强迫你以最好的方式做事的缺点。您可能会变得懒惰并坚持将所有文件集中在一起的结构，这可能会使处理复杂应用程序的大型团队变得困难。

主题化

与之前版本的 Ionic 不同，它在所有平台上只有一个外观和感觉，Ionic 2 现在支持三种模式：Material Design、iOS 和 Windows。现在，Ionic匹配了它所部署平台的外观和感觉。因此，例如，如果您的应用程序安装在 Android 上，它将使用类似于原生 Android 应用程序的样式和行为。 

Ionic 支持主题化，但在撰写本文时，它仅附带默认的 Light 主题。如果要调整主题，可以编辑src/theme/variables.scss 文件。 

工装

Ionic 2 还附带了一些新工具，可以让创建移动应用程序成为一种乐趣。我将在本节中向您展示一些。

发电机

Ionic 2 现在提供了一个生成器，允许您为您的应用创建页面和服务：

ionic g page contactPage

这将在您的文件夹中创建以下文件app/pages ：

contact-page/contact-page.html
contact-page/contact-page.ts
contact-page/contact-page.scss

每个文件还包含一些样板代码：

<!--contact-page.html-->
<ion-header>

  <ion-navbar>
    <ion-title>contactPage</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

</ion-content>

这也可以作为新开发人员的指南，以便他们了解构建代码的最佳实践。这是生成的 TypeScript 代码，用于处理上述页面的逻辑：

//contact-page.js
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

/*
  Generated class for the ContactPage page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  selector: 'page-contact-page',
  templateUrl: 'contact-page.html'
})
export class ContactPagePage {  constructor(public navCtrl: NavController, public navParams: NavParams) {}

  ionViewDidLoad() {
    console.log('ionViewDidLoad ContactPagePage');
  }

}

错误报告

Ionic 2 现在带有一个用于前端的错误报告工具。这意味着，只要您的代码出现错误，Ionic 就会在应用预览本身中打开一个模式窗口。这使得开发人员很容易发现应用程序中发生的错误。 

离子应用脚本

Ionic App Scripts 是 Ionic 项目的构建脚本的集合。以前，Ionic 使用 Gulp 来处理其构建过程。 

Ionic 2 附带了一些这样的脚本，可以更轻松地完成常见的开发任务。这包括将 TypeScript 代码转换为 ES5、提供应用程序以在浏览器中进行测试或在特定设备上运行它。

您可以在项目文件中找到默认脚本package.json：

"scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
},

新组件

组件是 Ionic 中的 UI 构建块。示例包括按钮、卡片、列表和输入字段。Ionic 2 中添加了许多新组件，在本节中，我们将看看其中的一些。 

幻灯片

如果您希望您的应用程序为初次使用的用户提供演练，幻灯片组件 可以让您轻松创建一个。该组件允许您创建基于页面的布局，用户可以通过滑动来阅读有关您的应用程序的所有信息。 

行动表

操作表 是从屏幕底部向上滑动的菜单。操作表显示在屏幕的顶层，因此您必须通过点击空格或从菜单中选择一个选项来关闭它。这通常用于确认操作，例如当您删除 iOS 设备上的文件时。 

细分市场

段 就像标签。它们用于将相关内容分组在一起，以便用户只能看到当前所选片段的内容。段通常与列表一起使用 以过滤相关项目。

吐司

toasts 是警报的微妙版本。它们通常用于通知用户发生了不需要任何用户操作的事情。它们通常显示在页面的顶部或底部，以免干扰当前显示的内容。它们也会在指定的秒数后消失。

工具栏

工具栏 用作位于应用程序页眉或页脚中的信息和操作的容器。例如，当前屏幕的标题、按钮、搜索字段和段通常包含在工具栏中。

约会时间

DateTime 组件 用于显示用于选择日期和时间的 UI 。UI 类似于使用datetime-local 元素时生成的 UI，唯一的区别是该组件带有易于使用的 JavaScript api。以前，Ionic 没有用于处理日期和时间的组件。您要么必须使用浏览器的本机日期选择器，要么安装插件。 

浮动操作按钮

浮动操作按钮 (FAB) 是固定在屏幕特定区域的按钮。如果您曾经使用过gmail应用程序，则用于撰写新邮件的按钮是一个浮动操作按钮。它们不限于单个操作，因为它们可以在点击时展开以显示其他浮动按钮。

有关新组件的更多信息，请查看 有关组件的文档。

新功能和改进

Ionic 2 还包含新功能和改进。这些主要是由于它向 Angular 2 和 TypeScript 的过渡。  

网络动画 API

切换到 Angular 2 的一个好处是Angular 的新动画系统，它建立在Web Animations API之上。请注意，并非所有浏览器都支持Web Animations API — 这就是为什么您需要使用Crosswalk 来安装支持的浏览器以及您的应用程序。唯一的缺点是它会使安装大小变大。另一种选择是使用polyfill。

表现

使用 Ionic 2 创建的应用程序比使用 Ionic 1 创建的应用程序更快捷。原因如下：

• Angular 2：  dom 操作和 JavaScript 性能在 Angular 2 中得到了很大改进。 如果你想了解细节，可以查看此表。Angular 2 带来的另一个好处是提前编译——模板是使用构建工具预编译的，而不是在应用程序在浏览器中运行时进行编译。这使得应用程序初始化更快，因为不再需要即时编译模板。

• 原生滚动：  Ionic 不再使用 JavaScript 滚动。相反，它现在对支持的webview使用本机滚动。它现在也在所有平台上启用（而不是仅在 Ionic 1 中的 Android 上支持）。除了本机滚动之外，还有Virtual Scroll，它允许在非常大的项目列表上滚动而对性能影响很小。这两个变化加起来更平滑的滚动性能。

• Web Workers：  Web Workers 允许您在后台运行脚本，与运行网页的线程隔离。Ionic 2 通过其 ion-img 组件实现 web worker。使用此组件而不是标准元素，您可以将获取img图像 的 HTTP 请求委托给 Web Worker。这使得图像的加载更加快捷，尤其是在大型列表中。该 组件还处理延迟加载，它只会在图像在用户视口中可见时请求和渲染图像。ion-img

离子原生

Ionic Native 相当于 Ionic 2 的ngCordova  。它们都充当 Cordova 插件的包装器以实现本机功能（例如相机、GeoLocation）。如果你愿意，你甚至可以在你的 Ionic 1 应用程序中使用 Ionic Native。主要区别在于 Ionic Native 允许您使用 ES6 功能和 TypeScript 语法编写代码。这使得在 Ionic 2 中使用起来更容易，因为它已经默认使用 TypeScript。下面是如何  在 ngCordova中实现Cordova Camera 插件的示例：

$cordovaCamera.getPicture({ quality: 50 }).then(function(imagedata) {

  var image = "data:image/jpeg;base64," + imageData;
}, function(err) {

});

以下是使用 Ionic Native 的方法：

import { Camera } from 'ionic-native';

Camera.getPicture(options).then((imageData) => {
 
 let base64Image = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
 
});

文档

文档改进了很多。我特别喜欢这样一个事实，即现在每个平台上的每个组件都有不同的预览。这让开发人员可以很好地了解他们的应用程序的外观。所有这一切都无需开发人员编写任何代码！ 

你应该使用离子 2 吗？

在撰写本文时，Ionic 2 已经发布。这意味着它已准备好用于生产应用程序。考虑到 Angular 2 和 TypeScript 带来的所有新功能、工具和好处，唯一会阻止您使用 Ionic 2 的是您的项目状态。

如果您只是刚刚开始一个新项目，如果您和您的团队成员只熟悉 Angular 1，并且您的项目需要尽快完成，您仍然可以使用 Ionic 1。但是如果你有足够的时间来完成这个项目，你应该考虑使用 Ionic 2。这会有一点学习曲线，你也会遇到一些问题，因为它不像 Ionic 1 那样经过实战考验，但它是由于 Ionic 2 的酷炫新功能和改进，所有这些努力都是值得的。

如果您已经使用 Ionic 1 开始了当前项目，那么您可能希望坚持使用 Ionic 1 并避免进行重大重写。不要太担心 Ionic 1 的支持、改进和错误修复——Ionic 开发人员长期以来一直致力于支持 Ionic 1。具体多久不清楚。至少，它会在 Ionic 2 稳定版发布后的几年内得到支持。但我们还需要记住，Ionic 是一个拥有 200 多个贡献者的开源项目。因此，只要人们继续使用它，我们总是可以期待社区提供某种形式的支持。

结论

而已！在本文中，您了解了有关 Ionic 2 的所有信息。具体来说，您了解了 Ionic 2 与其前身之间的显着差异。我们还查看了 Ionic 2 中添加的新功能，以及您是否应该将它用于您未来的项目。在以后的教程中，我们将通过创建 Ionic 2 应用程序将这些知识付诸实践。敬请关注！