標籤：android style blog http java 使用
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下安裝antbrew updatebrew install antmac osx 下，開啟.bash_profile檔案
cd ~open .bash_profile設定相關的Path，mac os x下增加類似下面的內容
export JAVA_HOME=`/usr/libexec/java_home -v 1.8`# androidexport 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目錄
自動產生了一堆目錄和檔案，其中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-metroionic platform add androidionic build androidionic run android如果要在虛擬機器中測試，可以改用
ionic emulate android
ionic支援多種移動平台，如果希望建立ios可以將"android"改成"ios" 下面是android裝置上真機運行介面如下：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
