十分鐘使用ionic Framework開發一個跨平台行動裝置 App

標籤：結構   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和ionicnpm install -g cordova ionic
在Mac中，須要加上sudo：


sudo npm install -g cordova ionic
建立應用

ionic官網為開發人員提供了多個開發模板，如預設的Tab模板（頁面基於類似的Tab組織，使用了ionTab指令），Sidemenu模板等

建立基於Tab模板的應用

ionic start myApp1

控制台輸出

 ionic start myApp1Running start task...Creating Ionic app in folder /Users/zhangxitao/myApp1 based on tabs projectDOWNLOADING: https://github.com/driftyco/ionic-app-base/archive/master.zipDOWNLOADING: https://github.com/driftyco/ionic-starter-tabs/archive/master.zipInitializing cordova project.Fetching plugin "org.apache.cordova.device" via plugin registryFetching plugin "org.apache.cordova.console" via plugin registryFetching 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 iosRunning platform task...Adding platform iosCreating ios project...Installing "com.ionic.keyboard" for iosInstalling "org.apache.cordova.console" for iosInstalling "org.apache.cordova.device" for ios

在模擬器上執行一下建立的應用吧

$ ionic run iosRunning run task...Running app on platform iosRunning 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開發一個跨平台行動裝置 App