Open JerryMissTom opened 6 years ago
移动开发已经成为一股潮流,web开发者假如也想在此浪潮中冲浪的话,我推荐 ionic 这个跨平台的移动应用开发框架。它的口号是 Build amazing apps in one codebase, for any platform, with the web, 可以做到 write once, run anywhere。
Build amazing apps in one codebase, for any platform, with the web
write once, run anywhere
ionic1 基于 angularjs,已经成为历史。前不久发布了ionic4,做了很大的改动,最重要的一点就是使用了Stencil这个可以将自定义组件转为web Components的编译器,鉴于这个版本暂时还是beta版本,不建议使用。
ionic1
angularjs
ionic4
web Components
beta
本系列的文章全部基于ionic3,底层的Angular使用5.x版本,以后都简称ionic,ionic3之前基于Angular 4.x版本,现在已经全面切换到Angular5.x了,大家开发的过程中注意甄别,因为 5.x和4.x之间还是有很多改动的。
ionic3
ionic
Angular 4.x
Angular5.x
ionic 的成功少不了Angular 和Cordova 的功劳。
Angular
Cordova
Angular 是 Google 推出的前端开发框架,使用 TypeScipt 语言进行开发,适合规模大,多人配合的项目。
Google
TypeScipt
Cordova 脱胎于 Adobe 的 PhoneGap,后来其核心源码被捐给Apache ,改名为 Cordova ,是一个使用web技术的跨平台移动应用开发框架。
Adobe
PhoneGap
Apache
ionic 是 Angular 的一些核心开发者,将 Angular 与 Cordova 结合起来,并针对移动应用的特点进行改造,提供了丰富的UI组件的跨平台移动应用开发框架。同时,ionic也提供了命令行工具 ionic-cli ,功能强大,简单好用。
ionic-cli
上图可以看出 Angular,Cordova 和 ionic 之前的关系。
个人认为 ionic 可以简单解释为成 Angular+Cordova 基础上的UI框架,它使用 Angular 开发,提供了精美的UI组件,通过Cordova plugin 与原生功能进行交互,最后借助 Cordova 命令打包成可以运行在不同平台上的App,当然也可以只使用 www 文件夹下的内容当做可以通过浏览器访问的 webApp 。
Angular+Cordova
Cordova plugin
www
webApp
打包出来的Android App其实就是一个 WebView ,加载本地的www 文件夹中的网页。网页中可以调用 Native 功能就是通过 Cordova 这个桥梁。iOS同理。
WebView
Native
ionic 不是简单的把 Angular 和 Cordova 结合在一起,也做了一些改造,使之更适合移动开发。首先,ionic 抛弃了 Angular 中的路由框架,而是实现了自己的堆栈式页面导航功能,通过简单的 push 和 pop方法,实现页面的跳转和返回,更符合移动开发习惯。其次,ionic 也针对 cordova native plugin写了配套的JS依赖包,使web开发者可以很快上手原生插件的使用。最后,ionic 提供了丰富的适合移动应用开发的UI控件,比如,DateTime,Toobar等常用的组件。
push
pop
cordova native plugin
DateTime
Toobar
ionic 的缺点也是显而易见的,首先,性能,还是性能,安卓低端机上卡顿明显,用户体验很差。其次,虽然 ionic 提供了大部分常见的与原生进行交互的插件,但是假如你的需求很冷门,只能自己写一个,比如说支付。最后,使用 Angular 这个框架,学习曲线比较陡峭。
下图展示了应用打开的过程及以打开相机为例调用原生功能的流程,内容简单,不过多解释。
谢谢大佬
移动开发已经成为一股潮流,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
这个框架,学习曲线比较陡峭。下图展示了应用打开的过程及以打开相机为例调用原生功能的流程,内容简单,不过多解释。