前言

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种使用Notification实现通知管理以及自定义通知栏（Notification示例四）

    示例一:实现通知栏管理 当针对相同类型的事件多次发出通知,作为开发者,应该避免使用全新的通知,这时就应该考虑更新之前通知栏的一些值来达到提醒用户的目的.例如我们手机的短信系统,当不断有新消息传来时,我 ...

  2. 信息安全－2：python之hill密码算法[原创]

    转发注明出处:http://www.cnblogs.com/0zcl/p/6106513.html 前言: hill密码算法我打算简要介绍就好,加密矩阵我用教材上的3*3矩阵,只做了加密,解密没有做, ...

  3. PLSql Oracle配置

    1.安装Oracle客户端或者服务端 2.配置环境变量 <1>.一般如果安装了Oracle客户端或者服务端的话,在环境变种的Path中有Oracle的安装路径(计算机-属性-高级系统设置- ...

  4. （转载）linux下各个文件夹的作用

    linux下的文件结构,看看每个文件夹都是干吗用的/bin 二进制可执行命令 /dev 设备特殊文件 /etc 系统管理和配置文件 /etc/rc.d 启动的配置文件和脚本 /home 用户主目录的基 ...

  5. 我的MYSQL学习心得（十一） 视图

    我的MYSQL学习心得(十一) 视图 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据 ...

  6. 如何使用RobotFramework编写好的测试用例

    如何使用Robot Framework编写优秀的测试用例 概述 命名 测试套件命名 测试用例命名 关键字命名 setup和teardown的命名 文档 测试套件文档 测试用例文档 用户关键字文档 测试 ...

  7. ASP.NET MVC Model元数据(四)

    ASP.NET MVC Model元数据(四) 前言 前面的篇幅讲解了Model元数据生成的过程,并没有对Model元数据生成过程的内部和Model元数据结构的详细解释.看完本篇后将会对Model元数 ...

  8. Alcatraz 的安装和删除

    Xcode 所有的插件都安装在目录: ~/Library/Application Support/Developer/Shared/Xcode/Plug-ins/ 你也可以手工切换到这个目录来删除插件 ...

  9. iOS实现UICollectionViewDataSource与Controller的分离

    之前每次用到UICollectionView的时候都会都需要在Controller里面去实现DataSource & Delegate方法 单独Delegate方法还好不是很多, 但是再加上D ...

  10. 快消品迎来B2B元年，行业将如何变革？

    一年接近尾声,又到了年终总结的时候,宴会厅里传来各种激情澎湃的演讲,有的行业遍地开花.欢声笑语不绝于耳:有的行业却没能迎来"昨夜东风",只能嗟叹"不堪回首".2 ...