本例是在win10系統(tǒng)下搭建的一個android應(yīng)用實例

1.首先安裝node.js

下載適合你電腦的版本，過程自行百度

2.使用node.js集成的包管理工具npm

安裝ionic和cordova
在命令行里輸入
npm install -g cordova ionic

下載過程由于國內(nèi)墻的問題可能失敗,可以使用淘寶國內(nèi)的鏡像

npm install -g cnpm --registry=https://registry.npm.taobao.org
下載完后運行命令

cnpm install -g cordova
cnpm install -g ionic

Paste_Image.png

3.創(chuàng)建應(yīng)用

使用使用ionic官方提供的現(xiàn)成的應(yīng)用程序模板，或一個空白的項目創(chuàng)建一個ionic應(yīng)用：

ionic start myApp tabs

4.運行或調(diào)試app

瀏覽器，安卓模擬器和真機(jī)三種方式

1. 直接在瀏覽器運行
   在項目主目錄打開命令窗口，執(zhí)行ionic serve,首次執(zhí)行，會讓你選擇服務(wù)器地址，一般選擇localhost，此時你的app就會顯示在瀏覽器中，按f12，打開手機(jī)模式，就可以運行你的app了，有一點：瀏覽器是熱部署的方式，當(dāng)你修改完代碼，點擊保存后，瀏覽器就會重新啟動服務(wù)，獲取最新的代碼，你的修改立刻就會展現(xiàn)出來。
2. 使用安卓模擬器運行
   在項目主目錄打開命令行窗口，執(zhí)行下列命令

ionic platform add android  （添加android平臺）
ionic build android         （生成android的apk文件）
ionic emulate android       （在模擬器或者真機(jī)上運行）

生成apk文件和運行以后，這兩步可以合并成ionic run android一個命令，當(dāng)修改程序代碼后，執(zhí)行這一個命令查看即可。

Paste_Image.png

3. 使用手機(jī)運行
   在使用模擬器運行ionic_app步驟中執(zhí)行完那幾行創(chuàng)建運行代碼后，使用數(shù)據(jù)線連接電腦，打開USB調(diào)試模式，修改連接方式為“媒體設(shè)備（MTP）”模式

執(zhí)行ionic run android命令

Paste_Image.png

但是運行在Android真機(jī)上，會出現(xiàn)標(biāo)簽欄置于頂部的問題。將下面的代碼復(fù)制粘貼到app.js的config配置下，標(biāo)簽欄就會出現(xiàn)在底部了

$ionicConfigProvider.platform.ios.tabs.style('standard');
$ionicConfigProvider.platform.ios.tabs.position('bottom');
$ionicConfigProvider.platform.android.tabs.style('standard');
$ionicConfigProvider.platform.android.tabs.position('standard');
$ionicConfigProvider.platform.ios.navBar.alignTitle('center');
$ionicConfigProvider.platform.android.navBar.alignTitle('left');
$ionicConfigProvider.platform.android.navBar.alignTitle('left');
$ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');
$ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back');
$ionicConfigProvider.platform.ios.views.transition('ios');
$ionicConfigProvider.platform.android.views.transition('android');