在本文中,我们将介绍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