十分钟使用ionic Framework开发一个跨平台移动应用
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模拟器上启动应用。例如以下图,界面是扁平风格的,非常美丽吧
转载请注明转自 offbye涛声依然-全端技术博客
十分钟使用ionic Framework开发一个跨平台移动应用的更多相关文章
- 拥抱.NET Core,如何开发一个跨平台类库 (1)
在此前的文章中详细介绍了使用.NET Core的基本知识,如果还没有看,可以先去了解“拥抱.NET Core,学习.NET Core的基础知识补遗”,以便接下来的阅读. 在本文将介绍如何配置类库项目支 ...
- 使用electron+vue开发一个跨平台todolist(便签)桌面应用
# 1 最近一直在使用electron开发桌面应用,对于一个web开发者来说,html+javascript+css的开发体验让我非常舒服.之前我一直简单的以为electron只是张网页加个壳,和那些 ...
- 如何用 Electron + WebRTC 开发一个跨平台的视频会议应用
在搭建在线教育.医疗.视频会议等场景时,很多中小型公司常常面临 PC 客户端和 Web 端二选一的抉择.Electron 技术的出现解决了这一难题,只需前端开发就能完成一个跨平台的 PC 端应用.本文 ...
- 使用ionic framework创建一个简单的APP
ionic是一个以cordova为基础的html5前端框架,功能强大,能够快速做出与原生开发相似的应用. 一,安装和配置 1,安装(前提:cordova环境配置完成) npm install -g i ...
- 2) 十分钟学会android--建立第一个APP,执行Android程序
通过上一节课创建了一个Android的Hello World项目,项目默认包含一系列源文件,它让我们可以立即运行应用程序. 如何运行Android应用取决于两件事情:是否有一个Android设备和是否 ...
- 十分钟上手-搭建vue开发环境(新手教程)
想写一些关于vue的文章已经很久了,因为这个框架已经火了很久,在公司里用的框架都比较老旧,但怎么也得跟上前端发展变化的潮流,这不,开始使用vue开发项目了,一遍开发一边踩坑中,今天要记录的是五分钟搭建 ...
- 4) 十分钟学会android--建立第一个APP,启动另一个Activity
在完成上一课(建立简单的用户界面)后,我们已经拥有了显示一个activity(一个界面)的app(应用),该activity包含了一个文本字段和一个按钮.在这节课中,我们将添加一些新的代码到MyAct ...
- 1) 十分钟学会android--建立第一个APP,创建android项目
一个Android项目包含了所有构成Android应用的源代码文件. 本小节介绍如何使用Android Studio或者是SDK Tools中的命令行来创建一个新的项目. Note:在此之前,我们应该 ...
- 三:Ionic Framework开发Android应用
第一步:添加Android平台 ionic cordova platform add android 第二步:编译Android应用 中间等待的过程有点长,需要耐心等待,生成的apk此时可以复制至平板 ...
随机推荐
- Nodejs Bot学习
关于示例部分可以参考<BotFramework Nodejs示例><BotBuilder Nodejs示例查看> Bot Framework Nodejs SDK包括几种与用户 ...
- 7/31 CSU-ACM2018暑期训练7-贪心
比赛链接 A-CSU - 1588 现在有n堆果子,第i堆有ai个果子.现在要把这些果子合并成一堆,每次合并的代价是两堆果子的总果子数.求合并所有果子的最小代价. Input 第一行包含一个整数T(T ...
- HRBUST 1313 火影忍者之~静音
优先队列. 每次将$n$个人压入优先队列,取出$5$个,最后排序. #include<cstdio> #include<cstring> #include<cmath&g ...
- CodeForces 723F st-Spanning Tree
$dfs$,构造. 类似于$k$度限制生成树的想法,可以将$s$和$t$先从图中删去,将剩下的部分求连通块,每个连通块内部很容易构造生成树,每个连通块缩成一个点来处理. 连通块分三种: $1$.只与$ ...
- 0822JDBC--Java连接数据库
JDBC定义: JDBC全称: Java DataBase Connectivity 独立于特定数据管理系统, 通用的sql数据库存取和操作的公共接口, 是一种面向接口编程 JDB ...
- 循序渐进PYTHON3(十三) --2-- DJANGO之FORM表单(自动生成HTML标签和自定制提示信息)
在上一次的代码上做出进一步修改,使之能在页面上显示自定制的报错信息,并且使用form自动创建标签的功能. views.py from django.shortcuts import render,Ht ...
- 洛谷——P2388 阶乘之乘
P2388 阶乘之乘 题目背景 不告诉你…… 题目描述 求出1!*2!*3!*4!*……*n!的末尾有几个零 输入输出格式 输入格式: n(n<=10^8) 输出格式: 有几个零 输入输出样例 ...
- 【高斯消元】CDOJ1783 曜酱的线性代数课堂(一)
高斯消元求逆矩阵板子. #include<cstdio> #include<cmath> #include<algorithm> #include<cstri ...
- 【数论】【莫比乌斯反演】【线性筛】bzoj2005 [Noi2010]能量采集
http://blog.csdn.net/Clove_unique/article/details/51089272 Key:1.连接平面上某个整点(a,b)到原点的线段上有gcd(a,b)个整点. ...
- 20162318 2016-2017-2《Java程序设计》课堂实践项目
20162318 2016-2017-2<Java程序设计>课堂实践项目 String类的使用 在String类中有一种split的方法.它可以把字符串分割为好几个小的字符串. 实践内容: ...