基於ionic+cordova+angularJs從零開始搭建自己的移動端H5 APP
這裡詳細介紹下如何用ionic+cordova+angularjs搭建自己的移動端app，包括環境搭建，框架使用等，具體專案已放置在github上，可下載下來自行啟動。
下載地址：https://github.com/foreverjiangting/myApp/tree/master/myApp
一：環境搭建
1.配置java的執行環境，包括path變數的路徑，這裡不再詳細講解，請自行百度。
2.下載Android Studio，並配置path變數，以及sdk路徑。這個下載比較麻煩，請自行去官網下載
C:\Program Files (x86)\Android\android-sdk\tools; C:\Program Files (x86)\Android\android-sdk\platform-tools;
3. 安裝node.JS的安裝。下載地址：https://nodejs.org/download/
4. 安裝ionic 和cordova。請參考官網： http://ionicframework.com/getting-started/
5. 開啟cmd，進入命令列，注意是在cmd進入的哦，不是git bash裡面進入。
npm install -g ionic
安裝成功後檢視一下版本，繼續安裝cordova。
npm install -g cordova
6. 開始建立ionic專案，輸入一下命令。
ionic start myApp tabs
進入myApp該專案目錄，輸入 ionic serve，即可以成功的在瀏覽器中進行瀏覽。這個是我自己設計的APP首頁頁面，啟動成功後看到的效果。
7.如何編譯併發布應用？
當你已經順利完成你的應用程式碼部分的時候，你現在所需要的就是將你的應用打包並且釋出了。
第一步：建立一個獨一無二的圖示。建立好你的圖示之後，請以png/psd/AI格式儲存在resource/android/icon.png和resource/android/icon.png。
然後使用如下命令，就可以生成不同尺寸的圖示。
$ ionic resources -icon 第二步：建立啟動頁面圖片。啟動畫面的原始檔至少需要2208px×2208px，建立完成後，儲存為 resource/android/splash.png和resource/android/splash.png。然後使用如下命令就可以生成不同尺寸的啟動畫面圖片： $ ionic resources --splash 看下我建立的啟動圖片：
第三步：編譯Android應用（這裡以安卓應用為例）。
1:配置應用的簽名。使用如下命令來配置你的簽名（keystore）
$ keytool -genkey -v -keystore my_jt.keystore -alias my_jt -keyalg RSA -keysize 2048 -validity 10000注意：請使用你應用的名字來替代my_jt這個命令可以生成一個新檔案，在本示例中為my_jt.keystore。 在應用的整個生命週期中將重複使用同一個keystore，請儲存好它。
2:使用Cordova編譯應用。使用build命令編譯一個應用的釋出版本：
$ cordova build --release android 這個命令會生成一個新的apk檔案。此時還未簽名。
3:簽名應用檔案。現在我們要用之前建立的keystore檔案來簽名生成的未簽名版本的應用。使用如下命令來簽名：
$ jarsigner -verbose -sigalg SHALwithRSA -digestalg SHAL -keystore my_jt.keystore unsigned_name.apk my_jt 注意：這裡請使用keystore生成檔名來替換my_jt示例名稱，同時用真實的應用檔名替換掉unsigned_name.apk。
這個過程需要一點時間，期間會提示輸入keystore的密碼。命令會修改apk檔案並對其進行簽名。OK，需要的環境都已經配置好了，也可以啟動成功，但是以上五個步驟中，不一定都是很順利的，這裡總結一下自己的問題，並給出自己的解決方案。
二：安裝遇到的問題
1.進行android 平臺配置時候報錯。即執行下面命令,這裡的命令是指，將本地的APP打包成Hybrid App時的基於安卓平臺，進行的編譯。
ionic platform add android
這裡會剛開始安裝出問題，顯示，android版本過低，解決辦法，重新下載一個sdk版本。
2.確保你安裝後，ionic的檔案一個不少，如上所示，碰到問題，當時安裝時候，沒有ionic.config.json檔案。解決辦法，自己新建一個ionic.config.json檔案
{
"name": "myApp",
"app_id": ""
}
將以上內容新增進去即可。不過name要換成你自己的專案目錄名稱。
3. 進行安卓打包時，編譯成apk檔案，即執行下面命令時碰到問題。
ionic build android
由於很多東西是從google下載來了，打包會很慢很慢，（等的花兒都謝了）
三：專案規範問題
這裡總結一下導師昨天驗收demo時候，指出的幾個問題。
1：angularjs書寫controller時候，注意要將引數寫進數組裡面。
看下我的寫法是下面這樣的：
.controller('PlaylistsCtrl', function($scope) {
$scope.playlists = [
{ title: 'Reggae', id: 1 },
{ title: 'Chill', id: 2 },
{ title: 'Dubstep', id: 3 },
{ title: 'Indie', id: 4 },
{ title: 'Rap', id: 5 },
{ title: 'Cowbell', id: 6 }
];
})
這種寫法是有問題的，在進行打包時候，會出問題。正確寫法應該是下面這種。將引數和函式寫在數組裡面。
.controller('PlaylistsCtrl',['$scope', function($scope) {
$scope.playlists = [
{ title: 'Reggae', id: 1 },
{ title: 'Chill', id: 2 },
{ title: 'Dubstep', id: 3 },
{ title: 'Indie', id: 4 },
{ title: 'Rap', id: 5 },
{ title: 'Cowbell', id: 6 }
];
}])
2. 我在進行書寫時候，沒有將服務和控制器進行分開，而是混合寫的，而且是單頁面進行路由轉換，導師指出這樣是會存在很多問題的，通常當頁面很多時候，幾百個
甚至幾千個時候，單頁面載入的速度是相當緩慢的，後期需要進行改進。像我下面這種將控制器和服務混合寫是不規範的。
.controller('browseCtrl', ['$scope', '$stateParams','$http','$ionicScrollDelegate','$location','$filter',
function($scope, $stateParams,$http,$ionicScrollDelegate,$location,$filter) {
$scope.requestDate = function() {
$http.get("../data/browse.json").success(function(data) {
console.log("請求全部的資料");
console.log(data);
$scope.data = data;
});
}
}])
四：總結
從開始零搭建到現在這個APP有一定的模型，從功能，到頁面設計，差不多花了四天左右的時間，與後端的聯調也能夠跑通。麼麼噠，接下來的兩週時間，在保證基本功能前提下，設計
各方面需要繼續完善，優化。哈哈，很喜歡這種調調，自己邊設計，邊做。。。還有好些頁面，功能沒寫，繼續。最終完整版APP請看我github裡面的更新(暫未完成版)。
這裡貼下自己主頁和列表頁的程式碼部分：
主頁部分：
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content >
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left" class="set-side-menu">
<ion-content class="set-background">
<div clas="set-menu-login" style="text-align: center;margin-top: 55px;cursor:pointer;" ng-click="login()">
<div class="set-img-login" style="margin-left: 32%;">
</div>
<p style="margin-top:19px;font-size: 17px;">請登入賬號</p>
</div>
<ion-list>
<div class="list set-list-menu" style="line-height: 60px;margin-top: 40px;">
<ion-item menu-close href="#/app/personInfo" >
<i class="icon ion-person" ></i>
<span class="set-menu-icon"> 個人中心</span>
</ion-item>
<ion-item menu-close href="#/app/playlists">
<i class="icon ion-calendar"></i><span class="set-menu-icon">投票首頁</span>
</ion-item>
<ion-item menu-close href="#/app/browse">
<i class="icon ion-pinpoint"></i><span class="set-menu-icon"> 試題資料</span>
</ion-item>
<ion-item menu-close href="#/app/personCenter">
<i class="icon ion-star"></i><span class="set-menu-icon"> 個人收藏</span>
</ion-item>
<ion-item menu-close href="#/app/set">
<i class="icon ion-locked"></i><span class="set-menu-icon"> 個人設定</span>
</ion-item>
</div>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
列表頁部分：
<ion-view view-title="問卷列表">
<ion-content on-scroll="scrollFixed(e)" >
<div class="set-btn-all" >
<button type="button" class="set-all-list l1 " ng-click="requestDate()" >全部 </button>
<button type="button" class="set-all-list l2" ng-click=requestComplete() >已完成 </button>
<button type="button" class="set-all-list l3" ng-click=requestInComplete() >未完成 </button>
<button type="button" class="set-all-list l4" ng-click=requestDoing() >進行中 </button>
</div>
<ion-list>
<ion-item ng-repeat="value in data" href="#/app/timuList/{{value.id}}">
<div class="item item-avatar">
<img ng-src="{{value.url}}">
<h3 style="color: #999;">
<span> {{value.text}} </span>
</h3>
<h3 class="set-wenjuan-list" style="color: #ccc;margin-top: 15px;">
有效期：{{value.timeDate}}
<span class="set-tagComplete">{{value.status}}</span>
<span class="set-tagComplete btn-detail">檢視詳情</span>
</h3>
</div>
</ion-item>
</ion-list>
<div class="set-tips-message">
<p>已經到底了</p>
</div>
<div class="fs_top_btn" ng-click="scrollTop()">
</div>
</ion-content>
<ion-footer-bar align-title="left" class="">
<div class="tabs tabs-icon-left">
<a class="tab-item" href="#/app/playlists ">
<i class="icon ion-home"></i>
首頁
</a>
<a class="tab-item" href="#/app/personCenter">
<i class="icon ion-star"></i>
收藏
</a>
<a class="tab-item" href="#/app/set">
<i class="icon ion-gear-a"></i>
我
</a>
</div>
</ion-footer-bar>
</ion-view>主頁和列表頁已完成，比較頭疼的還是設計，感覺總是達不到自己想要的效果，有比較好的想法親，麻煩給我留言哈！謝謝噠！！！！！！！！！！
作者：婷風
出處：http://www.cnblogs.com/jtjds/p/6056719.html
如果您覺得閱讀本文對您有幫助，請點一下“推薦”按鈕，您的“推薦”將是我最大的寫作動力！歡迎各位轉載，但是未經作者本人同意
轉載文章之後必須在 文章頁面明顯位置給出作者和原文連線否則保留追究法律責任的權利。