前言

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. Android 指纹认证

    安卓指纹认证使用智能手机触摸传感器对用户进行身份验证.Android Marshmallow(棉花糖)提供了一套API,使用户很容易使用触摸传感器.在Android Marshmallow之前访问触摸 ...

  2. SpringMVC初始化参数绑定--日期格式

    一.初始化参数绑定[一种日期格式] 配置步骤: ①:在applicationcontext.xml中只需要配置一个包扫描器即可 <!-- 包扫描器 --> <context:comp ...

  3. 使用“Cocos引擎”创建的cpp工程如何在VS中调试Cocos2d-x源码

    前段时间Cocos2d-x更新了一个Cocos引擎,这是一个集合源码,IDE,Studio这一家老小的整合包,我们可以使用这个Cocos引擎来创建我们的项目. 在Cocos2d-x被整合到Cocos引 ...

  4. Oracle---------sql 中取值两列中值最大的一列

    1.表中有A B C三列,用SQL语句实现:当A列大于B列时选择A列否则选择B列,当B列大于C列时选择B列否则选择C列. select (case when a>b then a else b ...

  5. 简化SSH框架的整合

    一.开发环境: (1)    OS:Windows 7 (2)    DB:MySql 5.1.6 (3)    JDK:1.8.0_17 (4)    Server:Apache Tomcat 8. ...

  6. hibernate多对一单向关联

    关联是类(类的实例)之间的关系,表示有意义和值得关注的连接. 本系列将介绍Hibernate中主要的几种关联映射 Hibernate一对一主键单向关联Hibernate一对一主键双向关联Hiberna ...

  7. 快速查找sql server中的存储过程和视图

    select a.name,a.[type],b.[definition] from sys.all_objects a,sys.sql_modules b where a.is_ms_shipped ...

  8. HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)

    1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息.   但是c ...

  9. 《JS设计模式笔记》 5,适配器模式

    //适配器模式的作用就像一个转接口. jQuery("#"+id); $id=function (id) { return jQuery("#"+id)[0]; ...

  10. ASP.NET Core中的依赖注入（4）: 构造函数的选择与服务生命周期管理

    ServiceProvider最终提供的服务实例都是根据对应的ServiceDescriptor创建的,对于一个具体的ServiceDescriptor对象来说,如果它的ImplementationI ...