Ionic是一个前端的框架,帮助开发人员使用HTML5, CSS3和JavaScript做出原生应用。

ionic的理念类似前端开发的BootStrap,目标是封装HTML5移动跨平台开发的最佳实践。就像Twitter Bootstrap在前端开发中做的一样。

Ionic框架眼下发展非常迅速。我们从2014年3月開始使用,当时是1.0.0beta2,如今已经更新到1.0.0beta10,大概每2个星期会出一个beta版本号,而且都包括实质性更新。Ionic框架非常先进,js部分是基于AngularJS框架,大量使用了Css3,css生成基于Sass,构建工具基于最新的gulp,版本号升级基于bower,原生层无缝封装了cordova。

The beautiful, open source front-end framework for developing hybrid mobile apps with HTML5。

ionic框架的结构和理念

使用Ionic框架,能够有效利用AngularJs的特性,极大的提供HTML5应用开发效率,质量。模块化程度。依据我们的经验,使用ionic开发,比使用基于jquery的移动框架。相同功能代码量会降低50%,开发速度提高一倍以上。与原生开发相比,不考虑原生应用开发不能跨平台的因素,相同是在iOS上开发,使用ionic要比使用oc开发快一倍以上。

用户体验方面,在iOS和高端Android设备(1500元以上的手机,平板)上,与原生应用区别不大。一般用户无法分辨出是HTML5的。

眼下来看,市场竞争激烈的App。临时还不适合用HTML5开发。即使HTML5全然能实现业务需求,比如去哪儿,携程这样的竞争性的App。但在企业应用领域,使用ionic有明显优势,我们已经用ionic框架上线了iPad和android
Pad企业应用。

有了ionic, 我们就能够使用HTML5、javascript(angular)和css(sass)开发android和ios应用。

Getting Started with Ionic

安装ionic

安装nodejs

nodejs近年来很热门,安装nodejs是为了能够通过命令行工具安装Cordova和ionic

安装cordova和ionic

npm install -g cordova ionic

在Mac中,须要加上sudo:





sudo npm install -g cordova ionic

创建应用

ionic官网为开发人员提供了多个开发模板,如默认的Tab模板(页面基于类似微信的Tab组织,使用了ionTab指令),Sidemenu模板等

创建基于Tab模板的应用

ionic start myApp1
控制台输出
 ionic start myApp1
Running start task...
Creating Ionic app in folder /Users/zhangxitao/myApp1 based on tabs project DOWNLOADING: https://github.com/driftyco/ionic-app-base/archive/master.zip DOWNLOADING: https://github.com/driftyco/ionic-starter-tabs/archive/master.zip
Initializing cordova project.
Fetching plugin "org.apache.cordova.device" via plugin registry
Fetching plugin "org.apache.cordova.console" via plugin registry
Fetching plugin "https://github.com/driftyco/ionic-plugins-keyboard" via git clone

能够看到创建模板应用就是从git上下载ionic框架的代码,然后通过cordova命令初始化cordovaproject。接着加入了Device,console log。keyboard等的插件,最后一个插件ionic-plugins-keyboard使用ionic开发的,提供了软键盘事件的js层通知,在android上非常实用。


加入ios原生代码,事实上就是调用了cordova platform add ios,当然这边要在mac上做了。而且须要安装了xcode

$ ionic platform  add ios
Running platform task...
Adding platform ios
Creating ios project...
Installing "com.ionic.keyboard" for ios
Installing "org.apache.cordova.console" for ios
Installing "org.apache.cordova.device" for ios

在模拟器上执行一下创建的应用吧

$ ionic run ios
Running run task...
Running app on platform ios
Running command: /Users/zhangxitao/myApp1/platforms/ios/cordova/run
No device is connected, trying Simulator.
Build settings from command line:
ARCHS = i386
CONFIGURATION_BUILD_DIR = /Users/zhangxitao/myApp1/platforms/ios/build/emulator
SDKROOT = iphonesimulator7.1
VALID_ARCHS = i386 === BUILD TARGET CordovaLib OF PROJECT CordovaLib WITH CONFIGURATION Debug ===

假设最后是成功状态,会在iphone模拟器上启动应用。例如以下图,界面是扁平风格的,非常美丽吧

以下做什么,看ionic的文档,在此基础上做自己的应用吧!


转载请注明转自 offbye涛声依然-全端技术博客

十分钟使用ionic Framework开发一个跨平台移动应用的更多相关文章

  1. 拥抱.NET Core,如何开发一个跨平台类库 (1)

    在此前的文章中详细介绍了使用.NET Core的基本知识,如果还没有看,可以先去了解“拥抱.NET Core,学习.NET Core的基础知识补遗”,以便接下来的阅读. 在本文将介绍如何配置类库项目支 ...

  2. 使用electron+vue开发一个跨平台todolist(便签)桌面应用

    # 1 最近一直在使用electron开发桌面应用,对于一个web开发者来说,html+javascript+css的开发体验让我非常舒服.之前我一直简单的以为electron只是张网页加个壳,和那些 ...

  3. 如何用 Electron + WebRTC 开发一个跨平台的视频会议应用

    在搭建在线教育.医疗.视频会议等场景时,很多中小型公司常常面临 PC 客户端和 Web 端二选一的抉择.Electron 技术的出现解决了这一难题,只需前端开发就能完成一个跨平台的 PC 端应用.本文 ...

  4. 使用ionic framework创建一个简单的APP

    ionic是一个以cordova为基础的html5前端框架,功能强大,能够快速做出与原生开发相似的应用. 一,安装和配置 1,安装(前提:cordova环境配置完成) npm install -g i ...

  5. 2) 十分钟学会android--建立第一个APP,执行Android程序

    通过上一节课创建了一个Android的Hello World项目,项目默认包含一系列源文件,它让我们可以立即运行应用程序. 如何运行Android应用取决于两件事情:是否有一个Android设备和是否 ...

  6. 十分钟上手-搭建vue开发环境(新手教程)

    想写一些关于vue的文章已经很久了,因为这个框架已经火了很久,在公司里用的框架都比较老旧,但怎么也得跟上前端发展变化的潮流,这不,开始使用vue开发项目了,一遍开发一边踩坑中,今天要记录的是五分钟搭建 ...

  7. 4) 十分钟学会android--建立第一个APP,启动另一个Activity

    在完成上一课(建立简单的用户界面)后,我们已经拥有了显示一个activity(一个界面)的app(应用),该activity包含了一个文本字段和一个按钮.在这节课中,我们将添加一些新的代码到MyAct ...

  8. 1) 十分钟学会android--建立第一个APP,创建android项目

    一个Android项目包含了所有构成Android应用的源代码文件. 本小节介绍如何使用Android Studio或者是SDK Tools中的命令行来创建一个新的项目. Note:在此之前,我们应该 ...

  9. 三:Ionic Framework开发Android应用

    第一步:添加Android平台 ionic cordova platform add android 第二步:编译Android应用 中间等待的过程有点长,需要耐心等待,生成的apk此时可以复制至平板 ...

随机推荐

  1. Ant Design React按需加载

    Ant Design是阿里巴巴为React做出的组件库,有统一的样式及一致的用户体验 官网地址:https://ant.design 1.安装: npm install ant --save 2.引用 ...

  2. No module named '_Sqlite3' 解决方法

    今晚,在学习Python的时候,(学习链接:http://yidao620c.github.io/blog/20150420/simpleblog-01.html(搭载自己的博客案例)): 想为系统生 ...

  3. oracle中clob字段怎么查询非空列_20180517

    select * from uap_groupsynlogvo a where a.log_msg is not null ; 附加demo的建表脚本跟业务数据. 链接:https://pan.bai ...

  4. Why Did the Cow Cross the Road III(树状数组)

    Why Did the Cow Cross the Road III 时间限制: 1 Sec  内存限制: 128 MB提交: 65  解决: 28[提交][状态][讨论版] 题目描述 The lay ...

  5. 简单说明CentOS源码安装程序

    第一步.安装依赖包.一般官网会有依赖关系,没有就网上搜索一下. 第二步.下载源码包,上传至CentOS服务器 第三步.解压缩 第四步.进入源码文件夹 第五步.执行./configure,这一步主要是为 ...

  6. (转)求质数算法的N种境界[1] - 试除法和初级筛法

    ★引子 前天,俺在<俺的招聘经验[4]:通过笔试答题能看出啥?>一文,以"求质数"作为例子,介绍了一些考察应聘者的经验.由于本文没有政治敏感内容,顺便就转贴到俺在CSD ...

  7. UML类图—机房收费系统

    UML类图:显示了系统的静态结构,而系统的静态结构构成了系统的概念基础.类图用于对系统中的各种概念进行建模,并描绘他们之间的关系.在类图中,一共包含了一下集中模型元素,分别是:类.接口.依赖关系.关联 ...

  8. Codeforces 980 E. The Number Games

    \(>Codeforces \space 980 E. The Number Games<\) 题目大意 : 有一棵点数为 \(n\) 的数,第 \(i\) 个点的点权是 \(2^i\) ...

  9. uva1632 (区间DP)

    题意:有n个宝藏,在x轴上,每个宝藏在某个时间会消失,问最少吃完所有宝藏的时间是多少,否则输出no solution 分析:区间DP,f[i][j][01]代表i到j区间内的全部吃完,停留在左/右端, ...

  10. 搭建MySQL的主从、半同步、主主复制架构

    复制其最终目的是让一台服务器的数据和另外的服务器的数据保持同步,已达到数据冗余或者服务的负载均衡.一台主服务器可以连接多台从服务器,并且从服务器也可以反过来作为主服务器.主从服务器可以位于不同的网络拓 ...