前言

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

什么是cordova？

cordova为一移动开发框架，他让我们可以仅仅专注前端代码，然后通过一个开发框架编译形成一个可安装的APP，因为前端代码的特性，所以这种APP是跨平台的，可以最大程度的提升开发效率，因为只需要前端人员，其成本节约也是不可忽视的！

PS：很多时候一些朋友也会说到phoneGap，其实phoneGap就是指cordova

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

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

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

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

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

IONIC

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

当然，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：

 <!doctype html>

 <html  ng-app="ionicApp">

 <head>

     <meta charset="UTF-8">

     <title>ionic demo</title>

     <link href="../css/ionic.min.css" rel="stylesheet" type="text/css" />

     <script src="../js/ionic.bundle.min.js" type="text/javascript"></script>

     <script type="text/javascript">

         angular.module('ionicApp', ['ionic']).controller('MyCtrl', function ($scope) {

         });

     </script>

 </head>

 <body ng-controller="MyCtrl">

     <ion-header-bar class="bar-positive">

     <h1 class="title">Hello World!</h1>

     </ion-header-bar>

     <ion-content>

         <p>我的第一个 ionic 应用。</p>

     </ion-content>

 </body>

 </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一些实现，有兴趣的朋友可以持续关注。

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

【初探IONIC】不会Native可不可以开发APP？的更多相关文章

  1. 用React Native编写跨平台APP

    用React Native编写跨平台APP React Native 是一个编写iOS与Android平台实时.原生组件渲染的应用程序的框架.它基于React,Facebook的JavaScript的 ...

  2. ionic react-native和native开发移动app那个好

    ionic react-native和native开发移动app那个好 ? 移动端开发如何选型?这里介绍一下我眼中的ionic,react-native,native 三种移动端开发选型对比.欢迎大家 ...

  3. ionic react-native和native开发移动app到底那个好

    ionic react-native和native开发移动app那个好 ? 移动端开发如何选型?这里介绍一下我眼中的ionic,react-native,native 三种移动端开发选型对比.欢迎大家 ...

  4. mui开发app之html5+,5+Runtime,5+sdk,native.js

    说说几个名词 html5:目前最新的html规范,w3c联盟制定,手机端主要由webkit实现规范,对用户来说就是浏览器实现了它 html5+:所谓"+",扩充了html5原本没有 ...

  5. ionic+cordova 学习开发App（一）

    一.项目所需环境 (一)jdk 1.jdk的安装,必须同时包含Java 和javac [一般安装包中都包含有,可以确定下] (二)node.js 和NPM 1.大多插件和辅助工具都运行在NPm平台上. ...

  6. react-native —— 在Windows下搭建React Native Android开发环境

    在Windows下搭建React Native Android开发环境 前段时间在开发者头条收藏了 @天地之灵_邓鋆 分享的<在Windows下搭建React Native Android开发环 ...

  7. 如何评价ionic和react native？

    Q:对于开发hybird app首选哪个好?是ionic还是react native?如何评价ionic和react native? A: 我看好React系,React系以正确地姿势,专注地做了正确 ...

  8. Cordova 开发 App

    Cordova 是一个开源的移动开发框架.允许你用标准的 Web 技术——HTML5,CSS3 和 JavaScript 做跨平台开发.应用在每个平台的具体执行被封装了起来,并依靠符合标准的 API ...

  9. Wijmo 5 + Ionic Framework之：费用跟踪 App

    Wijmo 5 + Ionic Framework之:费用跟踪 App 费用跟踪应用采用了Wijmo5和Ionic Framework创建,目的是构建一个hybird app. 我们基于<Mob ...

随机推荐

  1. Mysql - 性能优化之子查询

    记得在做项目的时候, 听到过一句话, 尽量不要使用子查询, 那么这一篇就来看一下, 这句话是否是正确的. 那在这之前, 需要介绍一些概念性东西和mysql对语句的大致处理. 当Mysql Server ...

  2. SSIS 包部署 Package Store 后，在 IS 中可以执行，AGENT 执行却报错

    可以执行 SSIS Package ,证明用 SSIS Package 的账户是可以执行成功的.SQL Server Agent 默认指定账号是 Network Service. 那么可以尝试一下将 ...

  3. SqlServer简单数据分页

    手边开发的后端项目一直以来都用的.NET MVC框架,访问数据库使用其自带的EF CodeFirst模式,写存储过程的能力都快退化了 闲来无事,自己写了条分页存储过程,网上类似的文章多的是,这里只列了 ...

  4. javaMail

    JavaMail概述:        JavaMail是由Sun定义的一套收发电子邮件的API,不同的厂商可以提供自己的实现类.但它并没有包含在JDK中,而是作为JavaEE的一部分. javaMai ...

  5. Linux.NET学习手记（7）

    前一篇中,我们简单的讲述了下如何在Linux.NET中部署第一个ASP.NET MVC 5.0的程序.而目前微软已经提出OWIN并致力于发展VNext,接下来系列中,我们将会向OWIN方向转战. 早在 ...

  6. "过期不候"--具备生命周期的数据的技术实现方案

    "过期不候"--具备生命周期的数据的技术实现方案 1   引言 本文可以作为之前的一个 原理性文章 对应的 技术实现部分 . 此处给出其上文的直达电梯: http://www.cn ...

  7. STM32的入侵检测是干什么用的

    [引]:侵入检测的作用就是监测侵入事件,保护重要的数据不被非法窃取. 你的数据是保存在RAM里的;但是一掉电RAM里的数据就没了;有一块地方,后备电池相关的一块RAM的数据却放不掉(除非电池没电了); ...

  8. Android开发学习之路-RecyclerView滑动删除和拖动排序

    Android开发学习之路-RecyclerView使用初探 Android开发学习之路-RecyclerView的Item自定义动画及DefaultItemAnimator源码分析 Android开 ...

  9. [原创]关于ORACLE的使用入门

    Oracle===============================数据库:Oracle------>甲骨文(Oracle) 49+%DB2---------->IBM 49+%Sq ...

  10. 06. Web大前端时代之：HTML5+CSS3入门系列~HTML5 画布

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...