Ionic Framework之初体验

Mon 09 May 2016 / In categories Server Stack

Ionic, PhoneGap

Ionic是什么,转载标点符的文章移动开发框架:Ionic Framework中的说明:

Ionic是DriftyCodiqa(基于 Web 的 jQuery Mobile构建工具)和Jetstrap(基 于 Web 的 Twitter Bootstrap 构建工具)之后的第三个项目。是一个用HTML, CSS 跟JS 开发的一个用于移动设备Web App 开发框架,采用Sass与AngularJS 开发。通过它可以构建接近原生体验的移动应用程序。Ionic 主要关注外观和体验,以及和你的应用程序的 UI 交互,特别适合用于基于 Hybrid 模式的 HTML5 移动应用程序开发。

简单来说,Ionic是一套基于AngularJS的Web UI框架,可以用来开发Hybrid的移动APP。

Hybrid移动APP

使用Web栈(HTML5/CSS/Javascript)来开发移动APP的想法一直都很有市场。目前在不同的平台开发原生的移动APP需要平台相关的SDK,所以能够用平台不相关的Web栈开发原生APP应该能省力。

应着这种思路,PhoneGap顺势而生。PhoneGap是这么一个东西,它为Web栈提供了核心引擎,使Web栈可以访问一些原生API的,比如摄像头、联系人、消息通知等。开发的代码打包以后,生成一种混合型的APP,长得和原生的差不多,可以直接安装到移动设备上。所以英文把这叫做Hybrid,形容这是混合而成的。

PhoneGap被Adobe收购后,其核心引擎被捐献到Apache项目地下,成为Codorva。这俩的关系有点像Chrome和Webkit,PhoneGap是Cordova引擎的一个发行版,包含了很多Adobe自家的东西。所以现在很多基于Web栈和Cordova的移动APP框架像雨后春笋一样冒出来,Ionic是其中的佼佼者。

使用Inoic开发移动App

使用Inoic开发移动App简单到什么地步呢?下面是一个官方的例子告诉你怎么做一个带tab的界面

  1. 安装Ionic:$ npm install -g cordova ionic
  2. 创建一个App:$ ionic start myApp tabs
  3. 进入目录:<span class=“gp”>$ </span><span class=“nb”>cd </span>myApp
  4. 选择App平台(为方便查看这里选浏览器做平台):

    <span class=“gp”>$ </span>ionic platform add browser

  5. 构建App:<span class=“gp”>$ </span>ionic build browser

  6. 查看App:<span class=“gp”>$ </span>ionic emulate browser

这时候会弹出一个像Chrome一样的浏览器窗口,里面显示了这个App的界面。

参考链接:

Load Disqus Comments