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. Nodejs Bot学习

    关于示例部分可以参考<BotFramework Nodejs示例><BotBuilder Nodejs示例查看> Bot Framework Nodejs SDK包括几种与用户 ...

  2. 7/31 CSU-ACM2018暑期训练7-贪心

    比赛链接 A-CSU - 1588 现在有n堆果子,第i堆有ai个果子.现在要把这些果子合并成一堆,每次合并的代价是两堆果子的总果子数.求合并所有果子的最小代价. Input 第一行包含一个整数T(T ...

  3. HRBUST 1313 火影忍者之~静音

    优先队列. 每次将$n$个人压入优先队列,取出$5$个,最后排序. #include<cstdio> #include<cstring> #include<cmath&g ...

  4. CodeForces 723F st-Spanning Tree

    $dfs$,构造. 类似于$k$度限制生成树的想法,可以将$s$和$t$先从图中删去,将剩下的部分求连通块,每个连通块内部很容易构造生成树,每个连通块缩成一个点来处理. 连通块分三种: $1$.只与$ ...

  5. 0822JDBC--Java连接数据库

    JDBC定义:    JDBC全称: Java DataBase Connectivity     独立于特定数据管理系统, 通用的sql数据库存取和操作的公共接口, 是一种面向接口编程    JDB ...

  6. 循序渐进PYTHON3(十三) --2-- DJANGO之FORM表单(自动生成HTML标签和自定制提示信息)

    在上一次的代码上做出进一步修改,使之能在页面上显示自定制的报错信息,并且使用form自动创建标签的功能. views.py from django.shortcuts import render,Ht ...

  7. 洛谷——P2388 阶乘之乘

    P2388 阶乘之乘 题目背景 不告诉你…… 题目描述 求出1!*2!*3!*4!*……*n!的末尾有几个零 输入输出格式 输入格式: n(n<=10^8) 输出格式: 有几个零 输入输出样例 ...

  8. 【高斯消元】CDOJ1783 曜酱的线性代数课堂(一)

    高斯消元求逆矩阵板子. #include<cstdio> #include<cmath> #include<algorithm> #include<cstri ...

  9. 【数论】【莫比乌斯反演】【线性筛】bzoj2005 [Noi2010]能量采集

    http://blog.csdn.net/Clove_unique/article/details/51089272 Key:1.连接平面上某个整点(a,b)到原点的线段上有gcd(a,b)个整点. ...

  10. 20162318 2016-2017-2《Java程序设计》课堂实践项目

    20162318 2016-2017-2<Java程序设计>课堂实践项目 String类的使用 在String类中有一种split的方法.它可以把字符串分割为好几个小的字符串. 实践内容: ...