本文出自 我的 github
Ionic 概述
Ionic 官網(wǎng)：http://www.ionicframework.com/
Ionic 是一個(gè)強(qiáng)大的 HTML5 SDK，它使用 HTML、CSS、Javascript 等 web 技術(shù)幫助你快速構(gòu)建原生風(fēng)格的移動(dòng)應(yīng)用
Ionic 目前能支持 iOS 和 Android
與 Cordova 的關(guān)系
Ionic 是基于 Cordova 的，在 Cordova 上能用的一切同樣可以在 Ionic 上使用
Ionic 在 Cordova 基礎(chǔ)上增加了 Ionic UI、AngularJS、一個(gè)強(qiáng)大的 CLI 工具和一些云端服務(wù)等
安裝 Ionic
Ionic 的開發(fā)環(huán)境離不開下列組件：
- Node.js
- Cordova & Ionic CLI
- Java SDK
- Android SDK
安裝 Node.js
前往 Node.js 官網(wǎng)下載 Node.js 安裝包直接安裝，建議下載 LTS 版本，筆者安裝的是 v4.4.5 LTS
安裝的過程中默認(rèn)勾選的“Add to PATH”選項(xiàng)不要取消
安裝完成后打開終端，輸入“node -v”命令，能正常現(xiàn)實(shí)版本號(hào)說明安裝成功
安裝 cnpm (可選)
npm 是 Node.js 的包管理器，由于我大天朝網(wǎng)絡(luò)環(huán)境的原因，在使用 npm 的時(shí)候經(jīng)常無法安裝包或者下載很慢
于是我們需要一個(gè) npm 的中國(guó)鏡像，cnpm 是淘寶的 npm 鏡像，10分鐘同步一次
以管理員身份打開終端，輸入“npm i cnpm -g”命令，等待安裝完成
安裝完成后，輸入“cnpm -v”命令，能正常顯示版本號(hào)說明安裝成功
安裝 Cordova & Ionic CLI
以管理員身份打開終端，輸入“npm i cordova ionic -g”命令，等待安裝完成
如果安裝了 cnpm，可以使用“cnpm i cordova ionic -g”命令
安裝完成后，輸入“cordova -v”命令和“ionic -v”命令，能正常現(xiàn)實(shí)版本號(hào)說明安裝成功
安裝 Java SDK (jdk)
前往 Oracle 官網(wǎng)下載最新的 jdk 安裝，我下載的是 jdk 8u91 windows x86 的版本
由于很多依賴 Java 的項(xiàng)目都不支持64位的 jdk，所以建議大家下載安裝 x86 版本
安裝過程中可以只安裝 jdk，不安裝 jre 和源代碼
為 jdk 設(shè)置系統(tǒng)環(huán)境變量
打開系統(tǒng)屬性，在“高級(jí)”選項(xiàng)卡中找到環(huán)境變量，單擊打開“環(huán)境變量”設(shè)置窗口
在“系統(tǒng)變量”列表中新建一個(gè)系統(tǒng)變量“JAVA_HOME”，值為剛才安裝的 jdk 的路徑
在“系統(tǒng)變量”列表中找到“Path”變量，雙擊打開“編輯系統(tǒng)變量”窗口
將 jdk 的 bin 路徑添加至“變量值”末尾并保存
安裝完成后打開終端，輸入“java -version”命令，能正?，F(xiàn)實(shí)版本號(hào)說明安裝成功
安裝 Android SDK
前往 Android 官網(wǎng) 下載最新的 Android SDK 安裝，目前最新的版本是 r24.4.1，我下載的是 zip 版本
下載完后解壓到“C:\Program Files(x86)\Android\”目錄下
為 Android SDK 設(shè)置系統(tǒng)環(huán)境變量
在“系統(tǒng)變量”列表中新建一個(gè)系統(tǒng)變量“ADT_HOME”，值為剛才安裝的 Android SDK 的路徑
在“系統(tǒng)變量”列表中找到“Path”變量，雙擊打開“編輯系統(tǒng)變量”窗口
將 Android SDK 的 tools 和 platform-tools 路徑添加至“變量值”末尾并保存
設(shè)置完成后打開終端，輸入“android”命令，能打開 Android SDK Manager 窗口說明安裝成功
使用 Android SDK Manager 安裝所需組件
Android SDK 各版本的 SDK Platform 和 Tools 并沒有內(nèi)置在 Android SDK 中，所有我們要通過 Android SDK Manager 來安裝
打開 Android SDK Manager 后，選擇要安裝的組件
由于我一般是用真實(shí) Android 設(shè)備來開發(fā)，所以我只選擇了 Android SDK Tools、Android SDK Platform-tools、Android SDK Build-tools、Android Support Repository、Google USB Driver，以及Android API 19-24 的 SDK Platform
如果要使用 Android 內(nèi)置的虛擬機(jī)來運(yùn)行 App 的話，還需要下載對(duì)應(yīng)版本的 System Image，這里我們不再贅述
點(diǎn)擊 Install 按鈕，等待安裝完成
到此，Ionic 開發(fā)環(huán)境已安裝完畢！
測(cè)試環(huán)境
安裝完開發(fā)環(huán)境后，我們通過一個(gè) Demo 來測(cè)試一下環(huán)境
打開終端，創(chuàng)建一個(gè)項(xiàng)目
等待創(chuàng)建完成，添加 android platform
添加完成后，將 Android 手機(jī)通過 USB 線連接至電腦，然后在手機(jī)上運(yùn)行項(xiàng)目
運(yùn)行成功！
手機(jī)上的運(yùn)行截圖
測(cè)試結(jié)果表明環(huán)境安裝成功！
可能存在的問題
- 找不到 Android 設(shè)備
筆者用的是一臺(tái)三星S4的測(cè)試機(jī)，在測(cè)試中遇到過找不到 Android 設(shè)備的問題，然后打開電腦上的豌豆莢，重新連接手機(jī)至電腦并授權(quán)電腦進(jìn)行 USB 調(diào)試，最終問題得到解決
結(jié)語(yǔ)
本文寫給 Ionic 入門開發(fā)者，有開發(fā)經(jīng)驗(yàn)者可以略過
如在安裝過程中遇到問題，請(qǐng)?jiān)谖恼孪路搅粞?，我在收到留言后?huì)及時(shí)答復(fù)您
