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

6,447 阅读3分钟

移动开发已经成为一股潮流,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版本,以后都简称ionicionic3之前基于Angular 4.x版本,现在已经全面切换到Angular5.x了,大家开发的过程中注意甄别,因为 5.x和4.x之间还是有很多改动的。

ionic 的成功少不了AngularCordova 的功劳。

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

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

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

2

上图可以看出 AngularCordovaionic 之前的关系。

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

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

ionic 不是简单的把 AngularCordova 结合在一起,也做了一些改造,使之更适合移动开发。首先,ionic 抛弃了 Angular 中的路由框架,而是实现了自己的堆栈式页面导航功能,通过简单的 pushpop方法,实现页面的跳转和返回,更符合移动开发习惯。其次,ionic 也针对 cordova native plugin写了配套的JS依赖包,使web开发者可以很快上手原生插件的使用。最后,ionic 提供了丰富的适合移动应用开发的UI控件,比如,DateTimeToobar等常用的组件。

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

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

ionic 1

后记

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