1.4 Ionic概述

Ionic是一个专注使用Web开发技术创建移动应用的开发框架,完全开源,提供了简洁、完美适配各平台原生控件风格的UI组件,基于Angular实现MVVM模式,依赖Cordova编译成各个平台的App。自推出以来发展迅速,受到了大量开发者的欢迎。

1.4.1 Ionic简介

Ionic在Cordova之上,提供了大量UI组件,如对话框、日期选择器、按钮、菜单、列表、图标、Tab页、开关按钮等,并且对Cordova的API进行了封装,提供了CLI(命令行)工具及项目模板,能够很方便的构建出一个基本的Cordova App项目。最酷的是这些UI组件可自动适配各平台的默认风格,让开发者能够专注于业务逻辑的开发,无需关心不同平台的样式适配。当然如果对App外观要求高的话,也完全可以对样式进行个性化定制。对于设计功底不强的开发者来说,使用Ionic提供的默认风格就可以做出一款简洁大方的App了。

支持平台 图1-3 Ionic应用风格

Ionic相比其他的跨平台UI框架来说具有以下优势:

  • 免费&开源。Ionic框架是一个100%免费并开源的项目,基于MIT开源协议,开发者可以将其用于任何项目中,没有任何限制,但必须在发行版中包含原许可协议的声明。Ionic借助社区的强大力量快速发展。
  • 跨平台。Ionic能够使用同一套代码构建渐进式Web应用(Progressive Web Apps)和本地移动应用。Ionic在任何平台看起来都非常漂亮,并具有良好的性能。
  • 丰富的原生插件。Ionic对Cordova的插件进行了封装,提供了超过70种特性,包括蓝牙、指纹识别等。
  • 高质量的文档支持。Ionic的文档质量非常高,能够在查看组件代码示例的同时预览其运行效果,并提供了完善的入门指南帮助开发者学习。
  • 令人着迷的性能表现。Ionic非常重视性能,支持各种最新的移动设备的硬件功能,当然这得益于Angular2的强劲性能。
  • 简洁漂亮的设计。Ionic提供了简洁干净的UI组件,完美适配各平台的设计风格,在不同的平台上样式也不同,Ionic会自动适配。
  • 为原生和Web优化。Ionic可以作为原生应用运行,也可以作为PWA运行,并自动选择不同的特性,非常灵活。如针对原生模式时,Ionic优先使用SQLite,当作为Web运行时,Ionic将使用localStorage作为存储方式。

Ionic1代基于Angular1.x版本,支持iOS7+/Android4.1+版本。随着Angular2推出正式版,Ionic团队也大刀阔斧的进行了改革,推出了第二代版本,对所有的组件进行了重写,在性能和开发效率上都有了巨大的提高。目前Ionic已经可以用于正式开发了。

1.4.2 Ionic相对1.x版本的改进

Ionic2之后的版本与Ionic1.x可以看做是两个完全不同的产品了,借助Angular的改进,Ionic2相比1.x版本具有以下优势:

  • 更快的性能。这个主要得益于Angular在检测机制上的优化。此外还因为Angular支持AoT编译,也使Ionic的性能大大提高。
  • 更清晰的项目结构。这个改进也是得益于Angular的模块化,Ionic2的项目结构比1.x版本更加清晰。
  • -home.page
  • --home.page.ts
  • --home.page.html
  • --home.page.scss
  • -about.page
  • --about.page.ts
  • --about.page.html
  • --about.page.scss

每个页面的代码、模板、样式都在一块,意义非常清晰。

  • 更强大的CLI。CLI即Ionic提供的命令行工具,如添加一个新页面,可以使用以下命令:
    ionic g page NewPage
    
    CLI会生成以下的文件,并且文件中已经生成了基本的代码:
  • -new-page
  • --new-page.ts
  • --new-page.html
  • --new-page.scss

CLI可以生成pages, providers, tabs, pipes, components,directives等等。

  • 更友好的导航方式。Ionic的导航方式相比1.x版本有了巨大的改进,更加简单友好。在Ionic1中,实现导航需要配置路由,如:
    .config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state('home', {
      url: '/',
      templateUrl: 'templates/home.html',
      controller: 'HomeCtrl'
    })
    .state('main', {
      url: '/main',
      templateUrl: 'templates/main.html',
      controller: 'MainCtrl'
    });
    $urlRouterProvider.otherwise("/");
    });
    
    Ionic 抛弃了这种繁琐的方式,更类似原生的开发体验,一行代码即可搞定:
    this.nav.push(SecondPage);
    
    使用全新的NavController组件,导航栈的操作方式更加方便,实现前进、后退等功能就像操作数组那么简单。
  • 更强大的模板语法。这也是Angular的改进之一,语法变得更加清晰易读,能够更加灵活的控制单项绑定、双向绑定、事件绑定等各种功能。关于Angular的语法在后续内容中将会介绍。
  • 更高效的开发体验。基于TypeScript提供的强类型、接口、lambda表达式等新特性,大大改善了Ionic的开发体验,在编辑器中可以获得完善的智能感知等功能,如在VS Code中: VS Code开发体验 图1-4 VS Code中完善的智能感知

当然,因为最终还是要依靠 Cordova 进行打包,因此不可避免的会遇到所有 Cordova 类跨平台应用面临的问题,在某些性能较差的移动设备上渲染速度较慢。Ionic 2 已经明确提出不支持低版本 Android 设备,并且在 Angular 2正式版发布以后,支持 AoT 编译也会在一定程度上优化 App 性能。

results matching ""

    No results matching ""