移动开发已经成为一股潮流,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,感兴趣的可以看一下。