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企业应用。
Getting Started with Ionic
安装ionic
安装nodejsnodejs近年来非常热门,安装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
添加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模拟器上启动应用,如下图,界面是扁平风格的,很漂亮吧