?1. 什么是ionic

Ionic既是一個(gè)CSS框架也是一個(gè)Javascript UI庫(kù)。許多組件需要Javascript才能產(chǎn)生神奇的效果，盡管通常組件不需要編碼，通過(guò)框架擴(kuò)展可以很容易地使用，比如我們的AngularIonic擴(kuò)展。

Ionic遵循視圖控制模式，通俗的理解和 Cocoa 觸摸框架相似。在視圖控制模式中，我們將界面的不同部分分為子視圖或包含其他視圖的子視圖控制器。然后視圖控制器“驅(qū)動(dòng)”內(nèi)部視圖來(lái)提供交互和UI功能。一個(gè)很好的例子就是標(biāo)簽欄（Tab Bar）視圖控制器處理點(diǎn)擊標(biāo)簽欄在一系列可視化面板間切換。Ionic 是目前最有潛力的一款 HTML5 手機(jī)應(yīng)用開(kāi)發(fā)框架。通過(guò) SASS 構(gòu)建應(yīng)用程序，它 提供了很多 UI 組件來(lái)幫助開(kāi)發(fā)者開(kāi)發(fā)強(qiáng)大的應(yīng)用。 它使用 JavaScript MVVM 框架和 AngularJS 來(lái)增強(qiáng)應(yīng)用。提供數(shù)據(jù)的雙向綁定，使用它成為 Web 和移動(dòng)開(kāi)發(fā)者的共同選擇。

閑話少敘，直接開(kāi)始我們的學(xué)習(xí)之路

2. 開(kāi)發(fā)環(huán)境的配置

2.1. Java環(huán)境

AndroidADT需要，通過(guò)網(wǎng)絡(luò)下載最新的javaJDK，并且配置環(huán)境變量。(環(huán)境變量的配置在網(wǎng)上有很多教程，這里就不跟大家一一贅述，可以自行百度，也可以查看這個(gè)網(wǎng)址)

http://jingyan.baidu.com/article/f96699bb8b38e0894e3c1bef.html

2.2. C++環(huán)境

Node需要

需要安裝最新vs，我這里的話安裝的是vs2016，切記要把C++環(huán)境勾選上，安裝過(guò)程異常痛苦，請(qǐng)耐心等候;

2.3. Android ADT環(huán)境

打包Android應(yīng)用的時(shí)候需要

下載并且配置好AndroidADT環(huán)境

下載ADT：http://www.androiddevtools.cn

點(diǎn)擊installer_r24.3.4-windows進(jìn)行安裝，其他文件只需要解壓縮后，放置結(jié)構(gòu)如下圖即可。Android項(xiàng)目結(jié)構(gòu)

配置到全局變量ANDROID_HOME  中

http://jingyan.baidu.com/article/22a299b51c59d69e19376af8.html

2.4. Node環(huán)境

這個(gè)比較簡(jiǎn)單，直接百度node，然后下一步，下一步，就可以了，node會(huì)自動(dòng)幫你配置好環(huán)境

2.5. Git環(huán)境

直接百度，跟上面一樣

http://jingyan.baidu.com/article/9f7e7ec0b17cac6f2815548d.html

那么到目前為止，環(huán)境配置我們已經(jīng)搞定了，不過(guò)如果說(shuō)真的會(huì)這么簡(jiǎn)單的話，那就說(shuō)明運(yùn)氣真的好，其實(shí)我們?cè)诎惭b的過(guò)程中也會(huì)遇到一些問(wèn)題，那么下面的就是關(guān)于出現(xiàn)問(wèn)題的一些總結(jié)和解決辦法

3. 問(wèn)題總結(jié):

1) 在運(yùn)行ionic build android的時(shí)候報(bào)錯(cuò)[Error:ANDROID_HOME is not set and “android” command not in your PATH. 這個(gè)時(shí)候要這樣設(shè)置：

ANDROID_HOME：C:\environment\adt-bundle-windows-x86-20130917\sdk

path中寫(xiě)：%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools

2) 問(wèn)題如圖所示：

這個(gè)是問(wèn)題是在環(huán)境變量配置的PATH中要添加上C:\Windows\System32

那么其實(shí)這里只是簡(jiǎn)單給大家指出了兩個(gè)問(wèn)題，那么在實(shí)際操作操作中大家可能會(huì)遇到各種各樣的問(wèn)題，那么這時(shí)候大家可以通過(guò)百度或者google去搜索，我相信大家最后肯定能把問(wèn)題解決好的。

4. 結(jié)語(yǔ):簡(jiǎn)單介紹了ionic環(huán)境的配置，只是H5混合開(kāi)發(fā)的第一步，那么今天我們先給大家分享到這里，在下周我們?cè)俳又蠹艺f(shuō)，如何快速的創(chuàng)建一個(gè)新的H5應(yīng)用，并且把它打包成apk文件;