Windows 下 Ionic 開發環境搭建

Ionic 介紹

首先，Ionic 是什麼。

Ionic 是一款基於 Cordova 及 Angular 開發 Hybrid/Web APP 的前端框架，相似的其餘框架有：Intel XDK等。

簡單來講就是能夠將你的 Web 應用打包發佈成 IOS/Android APP，而且提供了 Cordova 以外不少強大的服務和新的特性。

聽起來仍是很誘人的，事實上這也是目前最火的一種 Hybrid APP 開發方式。

接下來介紹如何在 Windows 下搭建 Ionic 開發環境。

在開始以前我假設你已經瞭解了以下概念：

• Java JDK
• Apache Ant
• Android SDK
• NodeJS

以上名詞這裏就不贅述，若是有不清楚的能夠自行查閱

安裝步驟

Ionic 官方教程：http://learn.ionicframework.com/videos/windows-android/

如下內容參考官方教程得出：

下載 JDK 並配置好 Java 運行環境

下載地址：http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html（請注意選擇您電腦的對應版本）

Java 環境變量的配置：參看：http://zhidao.baidu.com/question/1366931535221381339.html

下載 Apache Ant 並將其 bin 目錄路徑添加進 Path 路徑

下載地址：http://mirror.tcpdiag.net/apache//ant/binaries/apache-ant-1.9.4-bin.zip

下載完成後解壓該文件至某個安全的目錄下，而後將改文件夾內的bin文件夾路徑添加至系統 Path 環境變量中，如存放在 C 盤 Program Files 目錄下則 Path 中添加以下值 C:\Program Files\apache-ant-1.9.4\bin;（添加方法和 java 配置 path 變量是同樣的，注意以;隔開每一個環境變量的值）

下載 Android SDK 並配置好 SDK 運行環境

下載地址：http://developer.android.com/sdk/index.html

這裏能夠只下載 Android SDK 不須要一併下載 Android Studio。

下載完成並安裝而後向系統Path環境變量中添加兩個值。分別是 Android SDK 中 tools 目錄的路徑和 platform-tools 的路徑。例如：

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

在這裏我發現 Android SDK 安裝目錄中並無platform-tools這個文件夾，運行 tools 目錄下的 android.bat 文件，而後在出現的界面中勾選 Android SDK Platform-tools 而後安裝。

注意：這裏我下載的純淨版 SDK 以前並無任何 Android 系統在內，因此同 Platform-tools 同樣須要在這裏勾選須要的版本而後安裝。這裏至少須要有一個系統，不然沒法建立虛擬機。固然，用真機調試的話能夠不依賴。

配置 Gradle

下載地址：http://services.gradle.org/distributions/

下載相應版本的 gradle（對應 cordova-android），而後解壓放置在某個目錄下，而後向系統 Path 環境變量中添加：

• D:\Program Files\gradle\gradle-3.3\bin

下載 Nodejs for Windows 並安裝

下載地址：https://nodejs.org/download/

Windows 下安裝 Nodejs 環境很簡單，在 Nodejs 官網下載正確版本後安裝便可。

nmp 安裝 Ionic 和 Cordova

完成以上幾步須要配置的環境就搭建完成了，接下來就只須要在控制檯輸入簡單的幾行命令就能夠安裝 Ionic 和 Cordova 啦。

進入 cmd 窗口，輸入以下指令：

npm install -g cordova ionic

完成以上全部步驟，就能夠開始利用 Ionic 快速開發 Android APP 啦

建立並運行 ionic app

建立 APP

進入 cmd 窗口，輸入以下指令：

ionic start myapp

這裏的 myapp 是你的 APP 的名字

進入建立的 APP 目錄

cd myapp

選擇配置 Android 環境

ionic platform add android

打包生成 APP

ionic build android

運行 APP

須要先新建虛擬機或者鏈接手機。

• 新建虛擬機：打開 Android SDK 安裝目錄下的 AVD Manager.exe 選擇新建
• 鏈接手機：直接經過數據線鏈接真實設備

ionic run android

到這一步系統就會打開虛擬機或者在真實設備運行簡單的示例 APP 了。

其它

--prod 的做用

在編譯命令的最後加上 --prod 會讓 app 的啓動速度加快，但構建速度會變慢。

ionic build android --release --prod

不管是 debug 版本仍是 release 版本都適用。

APP 簽名

生成簽名文件

生成簽名文件須要用到 keytool.exe (位於 jdk1.6.0_24\jre\bin 目錄下)，使用產生的 key 對 apk 簽名用到的是 jarsigner.exe (位於 jdk1.6.0_24\bin 目錄下)，把上兩個軟件所在的目錄添加到環境變量path後，便可使用生成簽名文件的命令：

keytool -genkey -v -keystore demo.jks -alias demo -keyalg RSA -keysize 2048 -validity 10000

• -genkey：產生密鑰

• -keystore: 簽名文件名稱（這裏是 demo.jks，demo 能夠自定義，jks 是 Android studio 生成的簽名文件的後綴）

• -alias：簽名文件的別名（這裏是 demo，可自定義）

• -keyalg：使用 RSA 算法對簽名加密（默認 RSA ）

• -validity 有效期限（這裏是 10000 天，可自定義）

以上命令在 cmd 運行以下：

自動簽名

在工程目錄 /platforms/android 目錄新建名爲 release-signing.properties 的文件，文件內容以下：

storeFile=demo.jks
keyAlias=demo
storePassword=輸入的密鑰庫口令
keyPassword=輸入的密鑰口令

這樣，使用 ionic build android --release編譯便可，在 /platforms/android/build/outputs/apk 下就會生成已簽名的安裝包 android-release.apk

在 windows 下 storeFile 文件路徑應使用 Unix 下的目錄分隔符 / 。

瞭解更多可進入 Ionic 官網： http://ionicframework.com/ 進行拓展閱讀。