您好,登錄后才能下訂單哦!
說(shuō)明:本文說(shuō)明了在windows平臺(tái)下安裝Ionic-android開(kāi)發(fā)環(huán)境的安裝過(guò)程。
1. 首先要安裝node環(huán)境,Ionic的安裝和后續(xù)的許多前端工具的安裝都依賴(lài)于node的包管理器npm。
nodeJs環(huán)境的安裝很簡(jiǎn)單,去官網(wǎng)下載最新版的NodeJs直接安裝即可。 Node官網(wǎng): https://nodejs.org/
百度云地址:http://pan.baidu.com/s/1jGAEQVW
node環(huán)境變量在安裝過(guò)程中會(huì)自動(dòng)配置,安裝完成后在cmd中輸入 npm -v 回車(chē)。如果出現(xiàn)版本號(hào)說(shuō)明安裝成功。
node安裝參考:http://jingyan.baidu.com/article/b0b63dbfca599a4a483070a5.html
2. 安裝jdk并且配置環(huán)境變量,如果已經(jīng)安裝了jdk則跳過(guò)這步。
jdk下載地址:http://www.oracle.com/technetwork/java/javase/downloads/index.html
安裝完成以后配置環(huán)境變量:
JAVA_HOME:
JDK的安裝路徑,這個(gè)環(huán)境變量本身不存在,需要?jiǎng)?chuàng)建,創(chuàng)建完則可以利用%JAVA_HOME%作為統(tǒng)一引用路徑,其值為:jdk在你電腦上的安裝路徑。
PATH:
PATH屬性已存在,可直接編輯。作用是用于配置路徑,簡(jiǎn)化命令的輸入,其值為:%JAVA_HOME%\bin。
CLASSPATH:
用于編譯時(shí)JAVA類(lèi)的路徑,注意這里設(shè)置的是兩個(gè)值,(.;)表示的是JVM先搜索當(dāng)前目錄。其值為:.;%JAVA_HOME%\lib\tools.jar。
配置完畢后,通過(guò)cmd運(yùn)行以下命令:java -version,javac 如果出現(xiàn)返回信息,則設(shè)置成功。
3. 安裝Android SDK.
下載地址: http://developer.android.com/sdk/index.html 這個(gè)地址被墻了。需要FQ使用。
百度云地址: http://pan.baidu.com/s/1sj7cL8T
這里可以只下載Android SDK 不需要一并下載 Android Studio。下載完成并安裝然后向系統(tǒng)Path環(huán)境變量中添加兩個(gè)值。分別是 Android SDK中tools目錄的路徑和platform-tools的路徑。例如:
C:\Program Files (x86)\Android\android-sdk\tools;
C:\Program Files (x86)\Android\android-sdk\platform-tools;
如果發(fā)現(xiàn)Android SDK安裝目錄中并沒(méi)有 “ platform-tools”這個(gè)文件夾,應(yīng)該運(yùn)行tools目錄下的android.bat文件,然后出現(xiàn)如下界面,勾選Android SDK Platform-tools 然后安裝。
環(huán)境變量配置完成以后在cmd中輸入 android并且回車(chē)。如果出現(xiàn)android sdk manager則說(shuō)明安裝成功。
4. 安裝 Apache ant.
ant下載地址: http://ant.apache.org/bindownload.cgi
百度云地址:http://pan.baidu.com/s/1eQxpN8m
環(huán)境變量:
Windows下ANT用到的環(huán)境變量主要有2個(gè): ANT_HOME 和 PATH。
eg:
1. 設(shè)置ANT_HOME指向ant的安裝目錄。
設(shè)置方法:ANT_HOME = D:\apache_ant_1.7.0
2. 設(shè)置bin和lib目錄到PATH變量中。將%ANT_HOME%\bin; %ANT_HOME%\lib添加到環(huán)境變量的path中。
設(shè)置方法:PATH = %ANT_HOME%\bin; %ANT_HOME%\lib
%ANT_HOME%可以用真實(shí)的路徑代替。
安裝完成以后在cmd中輸入 ant -version 驗(yàn)證是否安裝成功。
5. 安裝ionic和demo項(xiàng)目下載。
1.使用npm下載ionic npm install -g ionic 2.選擇一個(gè)ionic模板項(xiàng)目下載到本地。中間會(huì)有一些問(wèn)詢(xún),比如是否使用sass.app的命名等。 md myApp cd myApp //創(chuàng)建一個(gè)文件夾并且進(jìn)入。 ionic start myApp tabs 3.給項(xiàng)目添加android平臺(tái)。 ionic platform android 4.在模擬器中運(yùn)行項(xiàng)目 ionic emulate android 說(shuō)明: 運(yùn)行emulate/run命令的時(shí)候會(huì)在platforms目錄下生成apk. 在執(zhí)行platform和emulate命令的過(guò)程中如果出現(xiàn)報(bào)錯(cuò)大多是因?yàn)閍ndroid環(huán)境沒(méi)有安裝完全導(dǎo)致的。請(qǐng)?jiān)赾md中輸入android打開(kāi)android SDK manager檢查相關(guān)的包是否已經(jīng)安裝完全。 一般來(lái)說(shuō),tool和emulator都是必須要安裝的.然后選擇某一版本的android API進(jìn)行安裝。
參考:
6. 經(jīng)過(guò)上述步驟我們實(shí)際上已經(jīng)安裝成功了ionic的開(kāi)發(fā)環(huán)境。我們也可以使用yeoman來(lái)構(gòu)建別人搭建好的ionic項(xiàng)目框架。
1. 安裝yeoman npm install -g yo 2. 安裝gulp
npm install --global gulp //全局安裝, 安裝CLI npm install --save-dev gulp //cmd進(jìn)入項(xiàng)目文件位置后安裝。
3. 安裝yeoman ionic-gulp生成器 npm install -g -generator-ionic-gulp
4. 進(jìn)入項(xiàng)目文件夾,運(yùn)行生成器
yo ionic-gulp 或者直接yo,然后安裝提示一步一步運(yùn)行生成器也可以。 如果執(zhí)行了步驟3以后,運(yùn)行yo,在run a generator的選項(xiàng)中找不到 ionic-gulp生成器。那就在項(xiàng)目目錄里面局部安裝生成器
npm install -generator-ionic-gulp 5. 安裝完畢以后在cmd中輸入 gulp 即可以啟動(dòng)gulpfile.js中定義的缺省任務(wù)。 --將js文件壓縮混淆合并,在index.html中注入引用,在瀏覽器中啟動(dòng)項(xiàng)目,并且打開(kāi)watch任務(wù)監(jiān)聽(tīng)文件變化。 6. 如果想安裝其他類(lèi)庫(kù)或者框架,使用bower進(jìn)行安裝。 安裝方式類(lèi)似于npm。
7. ionic-gulp生成的項(xiàng)目目錄說(shuō)明:
.tmp:gulpfile.js中build參數(shù)為false的時(shí)候,運(yùn)行g(shù)ulp缺省任務(wù)會(huì)把a(bǔ)pp文件夾下的資源合并混淆并創(chuàng)建在.tmp目錄中。
app:開(kāi)發(fā)目錄。
相關(guān)引用只在index.html入口文件中聲明一次。templates中存放html片段。
bower_componets:使用bower安裝的包目錄。
node_modules:使用npm安裝的包目錄。
platforms:Cordova相關(guān)的目錄,里面包含每次運(yùn)行g(shù)ulp或者ionic命令進(jìn)行打包形成的apk.
www: gulpfile.js文件中build中參數(shù)為true的時(shí)候,app文件夾下資源會(huì)合并混淆創(chuàng)建www目錄。也就是壓縮打包形成apk的文件目錄。
vendor.json: 聲明應(yīng)該引入的外部資源的鏈接。
在app/index.html中對(duì)應(yīng):
gulpfile.js: 定義gulp任務(wù)
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。