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

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

ionic1 基于 angularjs ,已经成为历史。前不久发布了 ionic4 ,做了很大的改动,最重要的一点就是使用了Stencil 这个牛逼的 Component 编译器,使得 ionic 的开发与框架无关,鉴于这个版本暂时还是 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 ,功能强大,简单好用。

上图可以看出 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入门的教学手册 ionic3-handbook ,还有一个基于真实项目的ionic项目 HW-basic ,感兴趣的可以看一下。

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章