【初探IONIC】不会Native可不能够开发APP？

时间 2019-11-05 标签初探IONIC 不会 native 可不能够开发 app

前言

Hybrid技术流行已经有一段日子了，楼主的关注点也一直围绕着移动端围绕着Hybrid相关展开，Hybrid已是大大提高开发效率的开发方式了，可是仍然须要至少一个IOS与Andriod，那么可不能够只使用H5相关的知识就能作一个APP出来呢？答案是能够的。javascript

什么是cordova？

cordova为一移动开发框架，他让咱们能够仅仅专一前端代码，而后经过一个开发框架编译造成一个可安装的APP，由于前端代码的特性，因此这种APP是跨平台的，能够最大程度的提高开发效率，由于只须要前端人员，其成本节约也是不可忽视的！css

PS：不少时候一些朋友也会说到phoneGap，其实phoneGap就是指cordovahtml

其实cordova与Hybrid是一致的，只不过Hybrid中的IOS和Andriod Webview容器是咱们Native同事开发的，而cordova打包后的Webview容器是公司开发的，这里所谓跨平台，实际上是有一个公司作出了这种平台性产品作出了支撑。前端

这里又会引出另外一个问题，哪一个好？java

孰优孰劣得看应用场景，这个和是否使用外面提供的第三方的前端UI插件是一致的，外面的插件大而全，可是性能方面可能差点，本身作的话，定制化须要或者性能方面可能更好点，就目前状况来讲，稍微有点实力的公司都会由本身的Native团队作Hybrid Webview容器壳，一些创业团队或者刚起步的移动团队会使用Cordova试水。android

PS：Cordova最适合的场景是前端接外包！！！git

整个架构的话依旧跳不出这张图，基础应用使用H5开发，Native提供接口，交互会有一个phone gap bridge层。github

IONIC

Ionic是一个基于Cordova的移动开发框架，他的一大优点就是提供了不少UI，这样对于开发者来讲就比较省心了，其次Ionic使用的angularJS做为配套框架（强依赖），因此对于前端来讲是很不错的一个体验。npm

固然，Ionic在一些Andriod机上表现不是很好，由于是内嵌资源，做为APP来讲加载速度较快还无所谓，可是同一套代码若是要用作H5站点的话，angularJS的尺寸就是很大一个制约。浏览器

这里作完了简单介绍，咱们仍是简单实践一把，体验下他的威力。

更多的学习教程：http://www.runoob.com/ionic/ionic-tutorial.html

简单实践

安装Ionic

咱们去git上下载源文件（release中）：https://github.com/driftyco/ionic/tree/master/release

咱们在目录下新建一个demo文件夹，新增index.html：

 1 <!doctype html>
 2 <html  ng-app="ionicApp">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>ionic demo</title>
 6     <link href="../css/ionic.min.css" rel="stylesheet" type="text/css" />
 7     <script src="../js/ionic.bundle.min.js" type="text/javascript"></script>
 8     <script type="text/javascript">
 9         angular.module('ionicApp', ['ionic']).controller('MyCtrl', function ($scope) {
10         });
11     </script>
12 </head>
13 <body ng-controller="MyCtrl">
14     <ion-header-bar class="bar-positive">
15     <h1 class="title">Hello World!</h1>
16     </ion-header-bar>
17     <ion-content>
18         <p>个人第一个 ionic 应用。</p>
19     </ion-content>
20 </body>
21 </html>

从这里能够看出Ionic几个特色：

① 强依赖angularJS（前面说过了）

② body部分依赖于IScroll，至于IScroll会有什么优点与劣势，咱们在以前讨论过：

http://www.cnblogs.com/yexiaochai/p/3762338.html

http://www.cnblogs.com/yexiaochai/p/3764503.html

③ 有本身一套UI体系

第一眼的感受是：

① 该框架比较完善，开发效率必然很高

② 不能确定是否适合客户端产品，由于js与css尺寸皆很大

③ 视觉样式比较固定，若是一个公司有本身的规范可能不太适合

④ 由于angular与IScroll固有的特色，作出来的应用可能体验不会太好

Ionic安装

上面咱们在浏览器简单感觉了下Ionic，接下来咱们须要将之放到移动设备上运行，这里的第一步是环境安装。

进行这个操做前，得保证电脑具备Node环境，而后执行命令行：

npm install -g cordova ionic

而后咱们随便找一个目录，建立咱们第一个项目myAPP：

ionic start myApp tabs

这里须要安装Andriod开发环境，否则的话，下面几个命令会报错，若是有Andriod环境的话，就能成功运行了：

$ cd myApp
$ ionic platform add android
$ ionic build android
$ ionic emulate android

若是正常的话，技能弹出模拟器：

若是有心作Ionic应用，IOS&Andriod环境都是须要安装的，可能还须要使用eclipse，这里各位看看文档吧，这里很少说。

结语

由于我这边想要对Hybrid作更深刻的了解，因此今天花了时间来简单了解了下Ionic，也只是很简单的了解，若是真的要生产应用各位能够去上面的网址认真学习吧，以个人经验，有angular的基础的话，学习周期在一周左右即可入坑开发了！！！

后面咱们将更加深刻的研究各大公司Hybrid一些实现，有兴趣的朋友能够持续关注。

文中只是我的观点，有误的话请各位指正，不足请各位提出。