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

妖狐艹你老母 2022-08-23 11:51 195阅读 0赞

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。 ##

![SouthEast][]

## 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模拟器上启动应用，如下图，界面是扁平风格的，很漂亮吧

![SouthEast 1][]

下面做什么，看ionic的文档，在此基础上做自己的应用吧！

转载请注明转自 [offbye涛声依旧-全端技术博客][offbye_-]

[SouthEast]: /images/20220823/affbebc1cc8b4d20a3b24ea65283e213.png
[SouthEast 1]: /images/20220823/88799c91ad6e4dd09899c7483cfd426d.png
[offbye_-]: http://blog.csdn.net/offbye/article/details/38223769