十分钟使用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命令初始化cordova工程,接着添加了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的文档,在此基础上做自己的应用吧!

十分钟使用ionic Framework开发一个跨平台移动应用,,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。