ionic与 cordova理解（赞）

r囧r小猫 2022-01-11 08:29 278阅读 0赞

原文出处：[https://blog.csdn.net/liudongdong19/article/details/79964624][https_blog.csdn.net_liudongdong19_article_details_79964624] （原文更易阅读）

ionic是什么：

Ionic(ionicframework)一款开源的Html5移动App开发框架,是AngularJS移动端解决方案,Ionic以流行的跨平台移动app开发框架phoengap为蓝本，让开发者可以通过命令行工具快速生成android ios移动app应用

phoengap是什么？

PhoneGap是一个用基于HTML，CSS和JavaScript的，创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用iPhone，Android，Palm，Symbian,WP7,WP8,Bada和Blackberry智能手机的核心功能——包括地理定位，加速器，联系人，声音和振动.

可能有些新手还是不明白，继续往下看：

通俗的讲：ionic是一款基于angularjs的html5移动app开发框架

phonegap就是一款可以打包并且可以让js调用原生的移动app框架

问题来了？

那我不用命令安装ionic 可以使用ionic开发app吗？答案是可以得。

就可以把ionic当作一款html5 移动app框架，把phonegap/cordova 当作打包 并且调用原生的框架就可以了

至于：为什么ionic也可以打包，上面也说了，ionic的打包插件是基于phonegap/cordova的

首先我们需要明确以下几个概念：

1.即使我们将移动端web页面做得和原生应用及其相似，在我们的页面中也无法像原生应用那样调用原生的能力，当然通过输入框触发键盘、图库、拍照等操作不在这里“调用原生能力”的范畴。

2.单纯的web页面不能提交到应用商店被用户使用。

然后，我们分别就它们之间的关系做出解释：

## Ionic和Angular ##

首先要明确的是Ionic是Angular的衍生品，Angular是单独的[js][]库，和[jQuery][]一样能够独立用于开发应用，而Ionic只是对Angular进行了扩展，利用Angular实现了很多符合移动端应用的组件，并搭建了很完善的样式库，是对Angular最成功的应用样例。即使不使用Ionic，Angular也可与任意样式库，如Bootstrap、Foundation等搭配使用，得到想要的页面效果。

## Ionic/Angular和Cordova ##

可能会有人被问道：“Cordova比Ionic/Angular好吗？”，这就很尴尬了，根本是毫无意义的问题。它们在混合开发中扮演的是不同的角色–Ionic/Angular负责页面的实现，而Cordova负责将实现的页面包装成原生应用（[Android][]:apk；[iOS][]:ipa）。就像花生，最内层的花生仁是Angular，花生仁的表皮是Ionic，而最外层的花生壳则是Cordova。包装完成之后我们的页面才有可能调用设备的原生能力，最后才能上传到应用商店被用户使用。

## Ionic/Angular和Cordova插件 ##

关于Cordova插件要明确以下几点：

*  Cordova插件的作用是提供一个桥梁供页面和原生通信，首先我们的页面不能直接调用设备能力，所以需要与能够调用设备能力的原生代码（[android][Android]:[Java][]；[ios][iOS]:OC）通信，此时就需要Cordova插件了。
 *  Cordova插件能够再任何Cordova工程中使用，和使用什么前端框架（如Ionic）无关。
 *  Ionic 2中封装了Ionic Native，方便了Cordova插件的使用，但在Ionic 2中仍然可以像Ionic 1中一样使用Cordova插件，Ionic Native不是必须的。
 *  即使在Ionic 2中使用了Ionic Native，也首先需要手动添加插件，如：cordova plugin add cordova-plugin-pluginName。

[https_blog.csdn.net_liudongdong19_article_details_79964624]: https://blog.csdn.net/liudongdong19/article/details/79964624
[js]: http://lib.csdn.net/base/javascript
[jQuery]: http://lib.csdn.net/base/jquery
[Android]: http://lib.csdn.net/base/android
[iOS]: http://lib.csdn.net/base/ios
[Java]: http://lib.csdn.net/base/java