1. 程式人生 > >Ionic簡單接觸:Windows下Ionic Android開發環境搭建

Ionic簡單接觸:Windows下Ionic Android開發環境搭建

(一)Ionic簡單介紹:

   首先,Ionic是什麼。

   ionic地址: http://ionicframework.com

        Ionic是一款基於PhoneGap及AngularJS開發Hybrid/Web APP的前端框架,簡單來說就是可以將你的Web應用打包釋出成IOS/Android APP,並且提供了PhoneGap之外很多強大的服務和新的特性。

        在開始之前我假設你已經瞭解瞭如下概念。

                JavaJDK 

                ApacheAnt

                AndroidSDK

                NodeJS

        #以上名詞這裡就不贅述,如果有不清楚的可以自行查閱#

(二)安裝步驟:

        以下內容參考官方教程得出。

        1、下載JDK並配置好Java執行環境

        2、下載Apache Ant 並將其bin目錄路徑新增進Path路徑

        下載完成後解壓該檔案至某個安全的目錄下,然後將改資料夾內的bin資料夾路徑新增至系統Path環境變數中,如存放在C盤 ProgramFiles目錄下則Path中新增如下值 C:\ProgramFiles\apache-ant-1.9.4\bin;  (新增方法和java配置path變數是一樣的,注意以 ; 隔開每個環境變數的值)

        3、下載Android SDK 並配置好SDK執行環境

        下載地址:  這裡可以只下載Android SDK 不需要一併下載 Android Studio。下載完成並安裝然後向系統Path環境變數中新增兩個值。分別是 Android SDK中tools目錄的路徑和platform-tools的路徑。例如:

ANDROID_HOME

                C:\ProgramFiles (x86)\Android\android-sdk\tools;

                C:\ProgramFiles (x86)\Android\android-sdk\platform-tools;

        在這裡我發現Android SDK安裝目錄中並沒有 “ platform-tools”這個資料夾,於是詢問隔壁Android開發的小夥伴,他說是ADT中才有,然後給我發了他那邊環境中的這個資料夾,可正常使用。

        實際上正確的解決方案應該是:

        執行tools目錄下的android.bat檔案,然後出現如下介面,勾選Android SDK Platform-tools 然後安裝。

        注意:這裡我下載的純淨版SDK之前並沒有任何Android系統在內,所以同 Platform-tools 一樣需要在這裡勾選需要的版本然後安裝。這裡至少需要有一個系統,否則無法建立虛擬機器。當然,用真機除錯的話可以不依賴。

        4、下載NodeJS for Windows並安裝

        Windows下安裝NodeJS環境很簡單,在NodeJS官網下載正確版本後安裝即可。

        注意要下的是下圖中紅色框所標註的檔案。

        5、利用NodeJS中提供的nmp來安裝Ionic和Cordova

        完成以上幾步需要配置的環境就搭建完成了,接下來就只需要在控制檯輸入簡單的幾行命令就可以安裝Ionic和Cordova啦。

        進入cmd視窗,輸入如下指令

           $     npm install -g cordova

        按下回車系統將自動安裝Cordova;

        安裝完後輸入

npm install -g ionic

        安裝Ionic

        #完成以上所有步驟,就可以開始愉快地利用Ionic快速開發AndroidAPP啦#

(三)建立一個Android專案並呼叫虛擬機器執行:

        1、建立APP 

        在控制檯輸入

ionic start myapp

        這裡的 myapp是你的APP的名字

        2、進入建立的APP目錄

cd myapp

        3、選擇配置Android環境

ionic platform add android

        4、打包生成APP

ionic build android

        5、執行APP(需要先新建虛擬機器/連線手機,新建方法:開啟Android SDK安裝目錄下的AVD Manager.exe選擇新建)

ionic run android

   Phonegap執行速度

1. android環境:

a) 512記憶體手機可以放棄phoengap 

b) 1G 雙核手機  執行流暢  感覺速度稍微比原生慢

c) 2G  4核+手機執行流暢 看不出和原生差別

d) 部分手機相容可能會出現問題 需要調整css(原生開發也會有次問題)

2. ios環境:

a) iphone4+執行流暢   

b) iphone5+ 看不出和原生差別