Windows+Android+Cordova+ionic環境搭建

一、ANT安裝

Apache Ant,是一個將軟體編譯、測試、部署等步驟聯絡在一起加以自動化的一個工具,大多用於Java環境中的軟體開發。
下載地址:http://ant.apache.org/bindownload.cgi

解壓,並放在非中文的目錄下。(我的目錄:E:/Program Files/Java/apache-ant-1.9.4)
配置環境變數:
變數名:ANT_HOME 值:既ANT的放置目錄(如:E:/Program Files/Java/apache-ant-1.9.4)

變數名:path值:%ANT_HOME%/bin;(注意用前面的變數名要用英語的 ; 隔開,下文不再重複提醒)

dos命令視窗測試

ant -version
ant -h

二、Android SDK 安裝

Android Studio下載
Android Studio會自行安裝SDK,如需要更新其它版本的SDK,請自行“科學上網”解決問題。
配置環境變數:
變數名:ANDROID_SDK_HOME 值:SDK目錄(E:/Android/Sdk)

變數名:path值:%ANDROID_SDK_HOME%/platform-tools;%ANDROID_SDK_HOME%/tools;

DOS命令視窗測試

android -h
adb version
android list avd

三、NODE.JS安裝

下載地址:https://nodejs.org/
按PC平臺下載相應的安裝包,直接雙擊安裝既可,環境變數都會自行配置,不用手動操作。

DOS測試命令

npm -v

四、GIT安裝(程式碼版本庫管理軟體)

下載地址:http://git-scm.com/download/
下載相應PC平臺的安裝包,直接雙擊安裝既可。

DOS測試命令

git --version

五、Cordova + ionic 安裝

DOS命令安裝,耐心等待,不成功的請多次嘗試。

npm install -g cordova ionic //安裝

npm update cordova/ionic -g //更新,此程式碼不用執行,如果當Cordova有更新版本時使用。

如果因為網路原因，安裝失敗。可以嘗試使用taobao映象（http://npm.taobao.org）

npm config set registry " https://registry.npm.taobao.org "
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g cordova
cnpm install -g ionic
<br>注意：需要修改環境變數，
從
C:\Documents and Settings\user\Application Data\npm
改為
C:\Documents and Settings\user\Application Data\npm\bin

安裝路徑:

C:/Documents and Settings/RenSanNing/Application Data/npm/node_modules/cordova[ionic]

建立Cordova專案:

//在任意非中文目錄下建立專案目錄:如E:/cordova
//按住SHIFT+滑鼠右鍵,點“在此處開啟命令視窗”

cordova create myapp com.yourname.myapp MyApp

//myapp為目錄名;com.yourname,myapp為專案路徑;MyApp為專案名
//此時就會有 E:/cordova/myqpp

cd myapp //進入到專案目錄

//新增平臺:
cordova platform add ios
cordova platform add android

//移除平臺:
cordova platform rm android

//編譯平臺:
cordova build android
[實為:]
cordova prepare android
cordova compile android

//檢視平臺:
cordova platfrom list

//新增外掛:(更多外掛:http://plugins.cordova.io/)
cordova plugin add org.apache.cordova.device //裝置API
cordova plugin add org.apache.cordova.network-information //網路(事件)
cordova plugin add org.apache.cordova.battery-status //電池(事件)
cordova plugin add org.apache.cordova.device-motion //加速器
cordova plugin add org.apache.cordova.device-orientation //羅盤
cordova plugin add org.apache.cordova.geolocation //定位
cordova plugin add org.apache.cordova.camera //攝像頭
cordova plugin add org.apache.cordova.media-capture //媒體檔案處理
cordova plugin add org.apache.cordova.media //媒體檔案處理
cordova plugin add org.apache.cordova.file //檔案訪問
cordova plugin add org.apache.cordova.file-transfer //檔案傳輸
cordova plugin add org.apache.cordova.dialogs //對話方塊
cordova plugin add org.apache.cordova.vibration //震動
cordova plugin add org.apache.cordova.contacts //聯絡人
cordova plugin add org.apache.cordova.globalization //全球化
cordova plugin add org.apache.cordova.splashscreen //閃屏
cordova plugin add org.apache.cordova.inappbrowser //開啟新的瀏覽器視窗
cordova plugin add org.apache.cordova.console //除錯控制檯

//檢視已安裝:
cordova plugin ls

//刪除外掛:
cordova plugin rm org.apache.cordova.console

//更新Cordova:
npm update -g cordova

//更新平臺專案:
cordova platform update android

//Cordova幫助:
cordova help

建立 ionic 專案:

//建立空白模板
ionic start myapp blank

//建立tabs模板
ionic start myapp tabs

//建立sidemenu模板
ionic start myapp sidemenu

其他的一些操作只要將上面Cordova 替換成 ionic 就能執行相同的操作。
瀏覽器除錯:

//進入專案根目錄執行
ionic serve

//出現在如下提示,選擇以什麼地址顯示1、IP;2、localhost;這裡按個人意願隨意選擇
Multiple addresses available.
Please select which address to use by entering its number from the list below:
1) 192.168.0.103
2) localhost
Std in before prompt
Address Selection:

選擇完後,就會自動用預設瀏覽器開啟除錯頁面

附上cordova的API:http://cordova.apache.org/docs/en/3.0.0/index.html
外掛:http://plugins.cordova.io