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

Posted 2020-09-14 clnchanpin

         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涛声依然-全端技术博客