前言

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. Atitit.cto 与技术总监的区别

    Atitit.cto 与技术总监的区别 1. 核心区别1 2. Cto主要职责1 3. 如何提升到cto1 4. CTO五种基本的必备素质:2 5. 2 1. 核心区别 技术总监(Chief Tech ...

  2. [PHP源码阅读]strpos、strstr和stripos、stristr函数

    我在github有对PHP源码更详细的注解.感兴趣的可以围观一下,给个star.PHP5.4源码注解.可以通过commit记录查看已添加的注解. strpos mixed strpos ( strin ...

  3. Web应用多账号系统设计及微信扫码登录实现

    Web应用多账号系统设计及微信扫码登录实现 1   前言概述 公司对功能测试,性能测试,安全测试等等都做了比较好的自动化后,急需要一个MIS系统来统一管理这些结果及报表. 此MIS系统特点如下: 仅内 ...

  4. Linux 中我该如何备份系统

    系统备份概述 在前面的一些文章中,我反复提到经常会把系统搞崩溃,所以备份系统就是一件不容忽视的事情.由于 Linux 系统本身的优越性,系统的备份和还原还是比较容易的.主要表现在以下方面: Linux ...

  5. 企业IT管理员IE11升级指南【17】—— F12 开发者工具

    企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...

  6. CSharpGL(39)GLSL光照示例：鼠标拖动太阳（光源）观察平行光的漫反射和镜面反射效果

    CSharpGL(39)GLSL光照示例:鼠标拖动太阳(光源)观察平行光的漫反射和镜面反射效果 开始 一图抵千言.首先来看鼠标拖动太阳(光源)的情形. 然后是鼠标拖拽旋转模型的情形. 然后我们移动摄像 ...

  7. CSharpGL(21)用鼠标拾取、拖拽VBO图元内的点、线或本身

    CSharpGL(21)用鼠标拾取.拖拽VBO图元内的点.线或本身 效果图 以最常见的三角形网格(用GL_TRIANGLES方式进行渲染)为例. 在拾取模式为GeometryType.Point时,你 ...

  8. Android colors资源文件常用的颜色

    <?xml version="1.0" encoding="utf-8"?> <resources> <color name=&q ...

  9. salesforce 零基础学习（五十七）Test 类中创建TestUser帮助类

    我们写Test Class的时候往往都需要指定一个uesr去run test method. TestUserHelper类如下: public class TestUserHelper { publ ...

  10. 如何在Nginx下配置PHP程序环境

    1.nginx与PHP的关系 首先来看nginx与php的关系, FastCGI的关系(而不是像apache那样安装成nginx的模块) FastCGI的意思是, 快速的通用网关接口:CGI Comm ...