移动开发已经成为一股潮流, web 开发者假如也想在此浪潮中冲浪的话, 我推荐 https://ionicframework.com/ 这个跨平台的移动应用开发框架. 它的口号是
Build amazing apps in one codebase, for any platform, with the web
, 可以做到
write once, run anywhere
.
ionic1 基于 angularjs, 已经成为历史. 前不久发布了 ionic4, 做了很大的改动, 最重要的一点就是使用了 Stencil https://stenciljs.com/ 这个牛逼的 Component 编译器, 使得 ionic 的开发与框架无关, 鉴于这个版本暂时还是 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 入门的教学手册 https://github.com/JerryMissTom/ionic3-handbook , 还有一个基于真实项目的 ionic 项目 https://github.com/JerryMissTom/HW-basic , 感兴趣的可以看一下.
来源: https://juejin.im/post/5addbb89f265da0b9f3fe4cd