基於ionic+cordova+angularJs從零開始搭建本身的移動端H5 APP

時間 2019-11-11

標籤基於 ionic+cordova+angularjs ionic cordova angularjs 開始搭建本身移動 h5 app 欄目 Cordova 简体版

原文原文鏈接

這裏詳細介紹下如何用ionic+cordova+angularjs搭建本身的移動端app，包括環境搭建，框架使用等，具體項目已放置在github上，可下載下來自行啓動。javascript

下載地址：https://github.com/foreverjiangting/myApp/tree/master/myApphtml

一：環境搭建java

1.配置java的運行環境，包括path變量的路徑，這裏再也不詳細講解，請自行百度。node

2.下載Android Studio，並配置path變量，以及sdk路徑。這個下載比較麻煩，請自行去官網下載android

C:\Program Files (x86)\Android\android-sdk\tools;
C:\Program Files (x86)\Android\android-sdk\platform-tools;

3. 安裝node.JS的安裝。下載地址：https://nodejs.org/download/git

4. 安裝ionic 和cordova。請參考官網： http://ionicframework.com/getting-started/
angularjs

5. 打開cmd，進入命令行，注意是在cmd進入的哦，不是git bash裏面進入。github

npm install -g ionic

　　安裝成功後查看一下版本，繼續安裝cordova。npm

npm install -g cordova

6. 開始建立ionic項目，輸入一下命令。json

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_jtmy_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" id="set-btn-all">
				    <button  type="button"  class="set-all-list l1 "  ng-click="requestDate()" id="btn1">所有 </button> 
				    <button  type="button"  class="set-all-list l2"  ng-click=requestComplete() id="btn2">已完成 </button>     
				    <button  type="button"  class="set-all-list l3"  ng-click=requestInComplete() id="btn3">未完成 </button>
				    <button  type="button"  class="set-all-list l4"  ng-click=requestDoing() id="btn4">進行中 </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

若是您以爲閱讀本文對您有幫助，請點一下「推薦」按鈕，您的「推薦」將是我最大的寫做動力！歡迎各位轉載，可是未經做者本人贊成

轉載文章以後必須在文章頁面明顯位置給出做者和原文鏈接不然保留追究法律責任的權利。