使用Ionic構建Hybrid App
Qunee有一個 上海地鐵圖的例子，有客戶希望轉成mobile app，考察過android的webview，以及PhoneGap等多種Hybrid App方案后，最后選擇使用ionic，準確的說是ionic + PhoneGap + Qunee ionic是一種基于HTML5創建Hybrid應用的前端框架，借助phoneGap + angularJS實現一套跨平臺，輕量的移動UI方案，本文將介紹借助ionic實現移動版Qunee上海地圖的示例
背景知識
安裝ionic所需軟件環境 - java, android sdk等
ionic實際上是集大成者，借助了多種技術，自身是一套UI框架，結合PhoneGap實現跨平臺移動APP，需要先安裝好依賴的程序，比如nodejs, java, ADT, ant, xcode等，并設置好java_home, 添加android sdk tool到環境變量
mac os x下安裝ant
brew update
brew install ant
mac osx 下，打開.bash_profile文件
cd ~
open .bash_profile
設置相關的Path，mac os x下增加類似下面的內容
export JAVA_HOME=`/usr/libexec/java_home -v 1.8`
# android
export PATH=${PATH}:/Users/macbook/WorkSpace/android-sdk-macosx/platform-tools:/Users/macbook/WorkSpace/android-sdk-macosx/tools
安裝ionic和cordova
需要首先安裝好nodejs，然后通過npm來安裝
npm install -g cordova ionic
更多請參考官方文檔+google http://ionicframework.com/getting-started/
創建ionic項目q-metro
使用下面的命令創建一個新的項目
ionic start q-metro
實際上新項目是tabs示例，可以在瀏覽器中訪問 如下效果
ionic項目結構
www目錄
index.html結構
首先看index.html，是主頁面，里面引入了angularjs， cordova等js支持，此外還有app.js, controllers.js, services.js三個文件，這三個文件構建了app的應用邏輯，app是主程序，包含一些設置和啟動腳本，services是數據支持部分，也就是model部分，用于提供數據的增刪改查操作，controllers用于控制，包含業務邏輯控制代碼，因為本文目的是使用qunee創建移動版的地鐵圖，更多業務操作留給讀者自己研究，所以js結構上并不涉及到設計模式的所有層面，我們將創建一個簡單的引導直接在app.js中實現數據呈現
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
引入qunee開發包
<script src="lib/qunee/qunee-min.js"></script>
修改index.html
<body ng-app="app" ng-controller="Metro" animation="slide-left-right-ios7">
<ion-header-bar class="bar-dark">
<h1 class="title">{{title}}</h1>
</ion-header-bar>
<ion-content scroll="false">
<div id="canvas" style="width: 100%; height: 100%;"></div>
</ion-content>
</body>
編輯腳本
去掉controllers.js和services.js，編輯app.js如下，其中加載地鐵圖的代碼可參考 基于HTML5技術繪制上海地鐵圖
angular.module('app', ['ionic'])
.controller('Metro', function($scope) {
$scope.title = "上海地鐵圖";
loadGraph();
});
function loadGraph(){
...//加載地鐵圖
}
編譯測試與發布
先在桌面環境下測試，Chrome運行正常，然后編譯成各種移動平臺版本，這里以android版本為例
cd q-metro
ionic platform add android
ionic build android
ionic run android
如果要在虛擬機中測試，可以改用
ionic emulate android
ionic支持多種移動平臺，如果希望創建ios可以將"android"改成"ios" 下面是android設備上真機運行界面如下：
ionic學習之建立一個ionic項目
安裝ionic：$npm install -g cordova ionic
更改命令所在位置到你容易找到的目錄：cd directoryName
例如：cd practice終端輸入命令新建一個工程：$ ionic start myApp blank(生成名字為myApp的空項目)
或$ ionic start myApptabs(生成名字為myApp的帶有選項卡的項目)
或$ ionic start myApp sidemenu(生成名字為myApp的帶有側邊菜單的項目)
這里根據自己的項目需要，選擇任意一個命令即可快速建立一個ionic framework項目。為這個項目配置iOS和android平臺，在webstrom上的terminal終端中執行：
$ionic platform add iOS
$ionic platform add android運行項目：如果想在電腦瀏覽器上看效果，可以執行：ionic serve
如果電腦已經安裝了iOS或androidmo'ni模擬器可以執行以下命令看手機上的效果：
在iOS上建立并測試該項目：
$ionic build iOS
$ionic emulate iOS即可在電腦上模擬iOS手機運行這個app,
這兩個命令也可以用ionic run iOS代替，效果一樣。
在android上建立并測試該項目：
$ionic build android
$ionic emulate android
或者同樣用一句ionic run android代替上面兩行命令。
執行以上命令后就可以在瀏覽器或模擬器上看到app的效果了~-
ionic框架會自動生成以下文件：
可以看到下邊包含了很多文件：
ionic項目自動生成的文件：hooks:自定義的cordova的腳本命令來執行一些特別指令
platfroms:包含添加的ios和android平臺
plugins：項目所用到的插件
scss：scss代碼，發布時會輸出到你的www/css/
www：最主要的文件，是我們所建立的應用，包括css，image，js，lib,templates,index.html
bower.json：bower配置文件
config.xml：Ionic的配置文件，可以配置app的id，名稱、描述起始頁等
gulpfile.js：gulp構建工具的執行文件
ionic.project：Ionic的項目文件
package.json ：npm配置文件
其余為webstrom中自己生成的文件：bowerrrc：bower配置文件
gitignore：git配置文件
editorconfig：統一代碼的工具
