Ionic環境配置及android打包

時間 2019-11-20

標籤 ionic 環境配置 android 打包欄目 Android 简体版

原文原文鏈接

環境搭建步驟：css

一、安裝node.js 這是爲了使用npm來安裝ant，cordova，ionichtml

驗證是否安裝好node.js的方法是在命令提示符中輸入「node -v」若出現版本號，證實安裝成功。java

nodejs 中文網站 http://nodejs.cn/ 下載安裝就能夠了安裝步驟能夠參考 http://www.runoob.com/nodejs/nodejs-install-setup.htmlnode

二、下載jdk，並配置java環境（網上教程不少）
驗證是否安裝好的方法是在命令提示符中輸入「javac」
若出現以下內容，證實安裝成功。 android

三、安裝ant,並配置相應的環境（網上搜教程）ios

驗證是否安裝好ant的方法是在命令提示符中輸入「ant -v」git

若出現版本號，證實安裝成功。angularjs

四、安裝cordova github

安裝不成功經過以下方式： npm install -g cnpm --registry=https://registry.npm.taobao.org
執行成功後，輸入 cnpm install -g cordova 安裝web

驗證是否安裝好cordova的方法是在命令提示符中輸入「cordova -v」

若出現版本號，證實安裝成功。

五、安裝express

cmd 輸入：npm install express 等待一會便可

六、安裝android sdk 配置環境變量 cmd->adb

七、安裝Ionic

驗證是否安裝好ionic的方法是在命令提示符中輸入「ionic -v」

若出現版本號，證實安裝成功。

建立Ionic項目

Ionic官網提供了三個項目模板blank、tabs和sideMenu ，參閱：http://ionicframework.com/getting-started/
咱們使用blank空模板建立一個咱們的應用，而且完成一個簡單的tabs導航的小應用，打開PowerShell cd到開發目錄，執行：

ionic start myIonic blank

其中myIonic爲咱們的項目名稱
執行過程它會從github下載項目源碼，請等待。。。
執行完畢後你到開發目錄下查看會發現多了一個名爲myIonic的文件夾，這個文件夾就是Ionic項目的所在目錄了。
目錄下有如下文件：

由於Ionic是基於angularjs框架開發的，因此在使用Ionic以前須要對angularjs有必定的瞭解。
在開發初期的調試咱們通常會使用瀏覽器做爲咱們的調試工具，Ionic提供了一個serve命令爲咱們的應用建立web站點可

ionic serve

執行完畢後Ionic會自動幫咱們打開咱們的默認瀏覽器並跳轉到咱們的應用頁面，瀏覽器打開頁面時Ionic已經給咱們開啓了livereload模式，開啓以後咱們編輯www下的文件後保存時Ionic會經過websocket通知瀏覽器刷新頁面，咱們就不用每次修改完畢手動刷新頁面了，又極大的提升了咱們的工做效率。

PS. 開啓livereload後Ionic會默認監聽www下面的文件，若是須要自定義的話請編輯ionic.project的watchPatterns來設置須要監聽的範圍

{  
  "name": "myIonic",  
  "app_id": "",  
  "watchPatterns": [  
        "www/js/*",  
        "www/js/*/*",  
        "www/*.html",  
        "www/templates/*.html",  
        "www/css/*.css"  
   ]  
}

　　www/index.html做爲咱們的程序入口文件，首先編輯這個文件，在body標籤中加入

<ion-nav-bar class="bar-positive">  
  <ion-nav-back-button>  
  </ion-nav-back-button>  
</ion-nav-bar>  
<ion-nav-view></ion-nav-view>

　　這段標籤對於對Ionic不熟悉的人來講可能有點陌生，Ionic針對移動端自定義了一套樣式庫，而且使用Angular的指令封裝了各個模塊，ion-nav-bar是導航頁面頭部、ion-nav-view是導航內容頁面。inde.html入口頁面咱們已經寫完了，接下來咱們新建兩個咱們本身的頁面。咱們在www目錄下新建一個templates文件夾，存放咱們的頁面並新建頁面：tabs.html 做爲咱們tab應用的主頁面：

<ion-tabs class="tabs-icon-top tabs-positive">  
  
  <ion-tab title="Home" icon="ion-home" href="#/tab/home">  
    <ion-nav-view name="home-tab"></ion-nav-view>  
  </ion-tab>  
  <ion-tab title="About" icon="ion-ios-information" href="#/tab/about">  
    <ion-nav-view name="about-tab"></ion-nav-view>  
  </ion-tab>  
  
</ion-tabs>

ion-tab爲tab應用的底部菜單項 title是菜單按鈕顯示的文字，icon是菜單按鈕圖標，href是點擊菜單的跳轉地址，子元素ion-nav-view是點擊菜單後子頁面顯示的位置，ion-nav-view屬性name爲該tab的名稱，後面添加子頁面會詳細描述。

而後在app.js中加入該頁面的路由

// Ionic Starter App  
  
// angular.module is a global place for creating, registering and retrieving Angular modules  
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)  
// the 2nd parameter is an array of 'requires'  
angular.module('starter', ['ionic']).config(function ($stateProvider, $urlRouterProvider) {  
  $stateProvider  
    .state('tabs', {  
      url: "/tab",  
      abstract: true,  
      templateUrl: "templates/tabs.html",  
    })  
    .state('tabs.home', {  
      url: "/home",  
      views: {  
        'home-tab': {  
          templateUrl: "templates/home.html"  
        }  
      }  
    })  
    .state('tabs.facts', {  
      url: "/facts",  
      views: {  
        'home-tab': {  
          templateUrl: "templates/facts.html"  
        }  
      }  
    })  
    .state('tabs.about', {  
      url: "/about",  
      views: {  
        'about-tab': {  
          templateUrl: "templates/about.html"  
        }  
      }  
    })  
  $urlRouterProvider.otherwise("/tab/home");  
})  
  
.run(function($ionicPlatform) {  
  $ionicPlatform.ready(function() {  
    if(window.cordova && window.cordova.plugins.Keyboard) {  
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard  
      // for form inputs)  
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);  
  
      // Don't remove this line unless you know what you are doing. It stops the viewport  
      // from snapping when text inputs are focused. Ionic handles this internally for  
      // a much nicer keyboard experience.  
      cordova.plugins.Keyboard.disableScroll(true);  
    }  
    if(window.StatusBar) {  
      StatusBar.styleDefault();  
    }  
  });  
})

哈，咱們tab應用的大概樣子已經出來了，可是如今點擊下面的菜單並無什麼反應，接下來咱們就要開始添加咱們的子頁面了，在templates文件夾中新建：home.html、facts.html、about.html

home.html 首頁

<ion-view view-title="Home">  
    <ion-content class="padding">  
      <p>  
        <a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a>  
      </p>  
    </ion-content>  
</ion-view>

facts.html

<ion-view view-title="Facts">  
    <ion-content class="padding">  
      <p>  
        <a class="button icon icon-right ion-chevron-right" href="#/tab/home">Home</a>  
      </p>  
    </ion-content>  
</ion-view>

about.html

<ion-view view-title="About">  
    <ion-content class="padding">  
      <p>  
        About Us  
      </p>  
    </ion-content>  
</ion-view>

ion-view是咱們子頁面的內容，屬性view-title能夠設置頁面頭部的標題名稱，添加好文件後咱們須要在app.js中加入各個頁面的路由，而且須要對以前的tabs路由作一個調整。

你們發現tabs路由增長了一個abstract字段，該字段在angular中的解釋是抽象頁面，不能獨立做爲頁面展現只能做爲其餘頁面父頁面，當加載子頁面以前加載父頁面。
其餘子頁面的路由和tabs路由的配置有所不一樣名稱命名是父路由.子路由的形式，而且增長了一個views字典，字段的key值對應着咱們前面所說的tabs.html中ion-nav-view的name屬性，表示該路由跳轉的頁面屬於某個tab的子頁面，同時修改咱們的otherwise默認頁爲/tab/home。
保存以後瀏覽器自動刷新，咱們來看一下效果。

好了，咱們來點點看吧，頁面切換Ionic已經幫咱們實現了相似原生app的切換動畫效果，是否是有一點原生app的感受了？下面章節咱們會實如今移動端的部署

部署到手機和cordova插件的使用

一個簡單的Web應用咱們已經開發完成了，接下來咱們就要作一些部署到移動端以前的準備了。
Ionic支持兩個平臺ios、android，默認的Ionic項目並無添加這兩個平臺，咱們須要手動添加，cd到開發目錄下執行命令：

ionic platform add android   
ionic platform add ios

通常項目都須要兩個平臺同時部署，因此咱們就添加兩個，執行完畢以後執行命令查看你已經添加的平臺列表：

ionic platform list

結果：

Installed platforms: android 4.0.0, ios 3.8.0  
Available platforms: amazon-fireos, blackberry10, browser, firefoxos, windows, windows8, wp8

接下來的部署咱們分開講述：

Android
Android部署分真機和虛擬機，其實方法相似，在部署以前須要安裝JDK、Android SDK到開發環境中，配置好JDK的JAVA_HOME和Android SDK的ANDROID_HOME到環境變量中去，並把Android SDK安裝目錄添加到Path中。

配置好以後打開PowerShell輸入命令返回正確：

adb version

接下來就簡單了，把手機鏈接到電腦，並開啓usb調試模式，執行命令：

ionic run android

Ionic開始編譯項目生成apk並遠程安裝到手機上後自動打開應用，是否是很簡單？

調試

咱們在前面已經說過，在開發前期咱們通常會在web中調試，而Ionic爲咱們提供了很是方面的web調試環境，只須要執行ionic serve就能夠實現lievereload，而在部署到移動端後也能夠開啓livereload的，咱們只須要修改下咱們run命令參數：

ionic run android --livereload -c -s

這是android的調試模式，不管在虛擬機上仍是在手機上均可以實現livereload，不用每次開發完成編譯再部署！-c是開啓客戶端日誌輸出，-s是開啓服務器端日誌輸出。

android打包

能使用Ionic來開發app的極可能對Ios和android的app打包發佈流程不是很熟悉，我這裏簡單說明下：
Android
Android的打包比較簡單執行命令：

ionic build android -release

找到www/platform目錄下生成的apk包，此時的apk還不能被安裝到手機上，還須要一步簽名操做，你們能夠參考：
http://www.cnblogs.com/qianxudetianxia/archive/2011/04/09/2010468.html

建立key，須要用到keytool.exe (位於jdk1.6.0_24\jre\bin目錄下)，使用產生的key對apk簽名用到的是jarsigner.exe (位於jdk1.6.0_24\bin目錄下)，把上兩個軟件所在的目錄添加到環境變量path後，打開cmd輸入

 
         D:\>keytool -genkey -alias demo.keystore -keyalg RSA -validity 40000 -keystore demo.keystore 
        
         /*說明：-genkey 產生密鑰 
        
         -alias demo.keystore 別名 demo.keystore 
        
         -keyalg RSA 使用RSA算法對簽名加密 
        
         -validity 40000 有效期限4000天 
        
         -keystore demo.keystore */ 
        
         D:\>jarsigner -verbose -keystore demo.keystore -signedjar demo_signed.apk demo.apk demo.keystore 
        
         /*說明：-verbose 輸出簽名的詳細信息 
        
         -keystore  demo.keystore 密鑰庫位置 
        
         -signedjar demor_signed.apk demo.apk demo.keystore 正式簽名，三個參數中依次爲簽名後產生的文件demo_signed，要簽名的文件demo.apk和密鑰庫demo.keystore.*/

　　注意事項：android工程的bin目錄下的demo.apk默認是已經使用debug用戶簽名的，因此不能使用上述步驟對此文件再次簽名。正確步驟應該是:在工程點擊右鍵->Anroid Tools-Export Unsigned Application Package導出的apk採用上述步驟簽名。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。