离子2简介

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

什么是离子？

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

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

使用Cordova和Ionic构建的应用程序可以在Android和iOS设备上运行。 您还可以安装Cordova插件以提供本机功能，例如访问摄像头和使用Bluetooth Low Energy设备 。

但是，Ionic不仅仅是一个UI框架。 Ionic公司还提供支持Ionic UI框架的服务，包括Ionic Creator ， Ionic View和Ionic Cloud 。

Ionic 2的新增功能？

在本节中，我们将介绍版本2对Ionic的一些重大更改，以及Ionic 2中引入的新功能和工具。

浏览器支持

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

您还可以定位Electron，Electron是使用HTML，CSS和JavaScript构建跨平台桌面应用程序的平台。 Electron非常类似于Cordova，但适用于Windows，Ubuntu或macOS等桌面操作系统。

Angular 2和TypeScript

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中的模板语法已发生了很大变化，这主要是因为它已转换为使用Angular2。您甚至可能发现新语法更加简单明了。 以下是Ionic 1和Ionic 2语法的一些示例：

听事件：

<!--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应用类似的样式和行为。

尽管在撰写本文时，它仅支持默认的Light主题，但在Ionic中支持主题设置。 如果要调整主题，可以编辑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脚本是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已添加了许多新组件，在本节中，我们将介绍其中一些组件。

滑梯

如果您希望您的应用程序适合初学者使用， Slides组件可让您轻松创建一个。 该组件使您可以创建基于页面的布局，用户可以在其中滑动以阅读有关应用程序的全部信息。

行动表

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

区隔

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

吐司

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

工具列

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

约会时间

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

浮动动作按钮

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

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

新功能和改进

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

网络动画API

切换到Angular 2的一个好处是Angular的新动画系统 ，该系统基于Web Animations API构建。 请注意， 并非所有浏览器都支持 Web动画API ，这就是为什么您需要使用Crosswalk与应用程序一起安装受支持的浏览器的原因。 唯一的缺点是它将使安装尺寸更大。 另一种选择是使用polyfill 。

性能

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

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

• 本机滚动： Ionic不再使用JavaScript滚动。 相反，它现在对支持的WebView使用本机滚动。 现在在所有平台上都启用了它（与之相反，仅在Ionic 1中的Android上支持它）。 除了本机滚动之外，还有Virtual Scroll ，它允许滚动很大的项目列表而对性能的影响很小。 这两个更改共同提高了滚动性能。

• Web Workers： Web Workers允许您在后台运行脚本，与运行网页的线程隔离。 Ionic 2通过其ion-img组件实现了网络工作者。 使用此组件代替标准的img元素，您可以将用于获取图像的HTTP请求委派给Web Worker。 这使得图像的加载更加轻松，尤其是在大型列表中。 ion-img组件还处理延迟加载，该加载仅在图像在用户视口中可见时才请求并渲染图像。

离子本机

Ionic Native与Ionic 2的ngCordova等效。它们都充当Cordova插件的包装，以实现本机功能（例如Camera，GeoLocation）。 如果需要，您甚至可以在Ionic 1应用程序中使用Ionic Native。 主要区别在于Ionic Native允许您使用ES6功能和TypeScript语法编写代码。 由于它在默认情况下已经使用TypeScript，因此这使得在Ionic 2中更容易使用。 这是一个如何在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) => {
 
});

文献资料

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

您应该使用Ionic 2吗？

在撰写本文时，Ionic 2已发布。 这意味着它已准备好用于生产应用程序。 考虑到Angular 2和TypeScript附带的所有新功能，工具和优点，唯一使您无法使用Ionic 2的事情是项目的状态。

如果您只是刚刚开始一个新项目，并且您和您的队友只熟悉Angular 1并且您的项目需要尽快完成，则仍然可以使用Ionic 1。 但是，如果您有足够的时间来进行该项目，则应考虑使用Ionic2。学习曲线会有些许弯曲，并且还会遇到一些问题，因为它没有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应用程序将这些知识付诸实践。 敬请关注！

如果您想了解有关Ionic 2的更多信息，请确保查看以下资源：

翻译自: https://code.tutsplus.com/articles/introduction-to-ionic-2--cms-28193