码迷,mamicode.com
首页 > 移动开发 > 详细

十分钟使用ionic Framework开发一个跨平台移动应用

时间:2017-04-28 15:56:03      阅读:355      评论:0      收藏:0      [点我收藏+]

标签:结构   target   details   sso   http   mac   代码   tin   css3   

         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开发一个跨平台移动应用

标签:结构   target   details   sso   http   mac   代码   tin   css3   

原文地址:http://www.cnblogs.com/clnchanpin/p/6781300.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!