手摸手带你入门ionic3(一)：ionic介绍

移动开发已经成为一股潮流，web开发者假如也想在此浪潮中冲浪的话，我推荐 ionic 这个跨平台的移动应用开发框架。它的口号是 Build amazing apps in one codebase, for any platform, with the web, 能够作到 write once, run anywhere。

ionic1 基于 angularjs，已经成为历史。前不久发布了ionic4，作了很大的改动，最重要的一点就是使用了 Stencil 这个能够将自定义组件转化为web Components的编译器，鉴于这个版本暂时仍是beta版本，不建议使用。

本系列的文章所有基于ionic3，底层的Angular使用5.x版本，之后都简称ionic，ionic3以前基于Angular 4.x版本，如今已经全面切换到Angular5.x了，你们开发的过程当中注意甄别，由于 5.x和4.x之间仍是有不少改动的。

ionic 的成功少不了Angular 和Cordova 的功劳。

Angular 是 Google 推出的前端开发框架，使用 TypeScipt 语言进行开发，适合规模大，多人配合的项目。

Cordova 脱胎于 Adobe 的 PhoneGap，后来其核心源码被捐给Apache ，更名为 Cordova ，是一个使用web技术的跨平台移动应用开发框架。

ionic 是 Angular 的一些核心开发者，将 Angular 与 Cordova 结合起来，并针对移动应用的特色进行改造，提供了丰富的UI组件的跨平台移动应用开发框架。同时，ionic也提供了命令行工具 ionic-cli ，功能强大，简单好用。

上图能够看出 Angular，Cordova 和 ionic 以前的关系。

我的认为 ionic 能够简单解释为成 Angular+Cordova 基础上的UI框架，它使用 Angular 开发，提供了精美的UI组件，经过Cordova plugin 与原生功能进行交互，最后借助 Cordova 命令打包成能够运行在不一样平台上的App，固然也能够只使用 www 文件夹下的内容当作能够经过浏览器访问的 webApp 。

打包出来的Android App其实就是一个 WebView ，加载本地的www 文件夹中的网页。网页中能够调用 Native 功能就是经过 Cordova 这个桥梁。iOS同理。

ionic 不是简单的把 Angular 和 Cordova 结合在一块儿，也作了一些改造，使之更适合移动开发。首先，ionic 抛弃了 Angular 中的路由框架，而是实现了本身的堆栈式页面导航功能，经过简单的 push 和 pop方法，实现页面的跳转和返回，更符合移动开发习惯。其次，ionic 也针对 cordova native plugin写了配套的JS依赖包，使web开发者能够很快上手原生插件的使用。最后，ionic 提供了丰富的适合移动应用开发的UI控件，好比，DateTime，Toobar等经常使用的组件。

ionic 的缺点也是显而易见的，首先，性能，仍是性能，安卓低端机上卡顿明显，用户体验不好。其次，虽然 ionic 提供了大部分常见的与原生进行交互的插件，可是假如你的需求很冷门，只能本身写一个，好比说支付。最后，使用 Angular 这个框架，学习曲线比较陡峭。

下图展现了应用打开的过程及以打开相机为例调用原生功能的流程，内容简单，不过多解释。

后记

本人在写一个ionic入门的教学手册 ionic3-handbook，还有一个基于真实项目的ionic项目HW-basic，感兴趣的能够看一下。