1. 程式人生 > >Ionic從零單排(一)——Ionic開發環境搭建

Ionic從零單排(一)——Ionic開發環境搭建

        Ionic是一個用來開發混合手機應用的開源框架,其基於Angular語法,學習Ionic之前,應該瞭解HTML、CSS、 JavaScript、Angular的基本語法。

        Ionic開發依賴於Node.js

        安裝完成後使用cmd(win+R 輸入cmd 進入)測試下是否安裝成功。在cmd下輸入 node -v ,出現版本號即為安裝成功。因為Nodejs已經集成了npm,所以npm也一起安裝好了。同樣可以cmd輸入 npm -v 檢視npm是否安裝成功。

        

        現在,我們可以安裝cordovaionic了,cmd 輸入命令:

  npm install -g cordova ionic-g cordova ionic

               

        -g 的意思是全域性安裝,這樣我們就能在任一目錄使用cordova和ionic的命令了。

        注:網上有資料說資源被牆,需要VPN翻牆才能安裝,博主這裡沒有翻牆就安裝成功了,所以大家可以先試試,如果安裝失敗再翻牆。

        安裝完成後cmd輸入 cordova -v 和ionic -v 檢視是否安裝成功。

        

        注:所需的其他開發環境JDK、Git、Android SDK

        至此,環境搭建完成,下面我們建立一個ionic程式進行下測試。

        我們建立一個tabs ionic程式

<span style="color:#000000">  ionic start HelloWorld tabs</span>

        其中HelloWorld是專案名。

        

        專案建立過程中會從github下載原始碼,需要我們等一會。

        建立完成後我們到開發目錄下看一下,會出現一個HelloWorld的資料夾,這就是我們的專案目錄,目錄中有如下檔案。

        

        這裡的目錄結構我們以後再說,現在為剛建立的程式新增安卓平臺

        首先進入專案目錄

,cmd執行命令

<span style="color:#000000">  cd helloworld</span>

        然後為剛建立的程式新增安卓平臺

<span style="color:#000000">  ionic platform add android</span>

        

        build應用程式,在專案目錄執行:

<span style="color:#000000">  ionic build android</span>

        

        靜靜的等下載完成。

        注:如果在第一次build時卡在了下載gradle.zip,可以採取去相對應的網站將相對應的gradle.zip下載下來。比如上圖中在 https://services.gradle.org/distributions/gradle-2.14.1-all.zip 下載gradle包,我們先去該網站下載gradle-2.14.1-all.zip包,然後放到C:\Users\Administrator\.gradle\wrapper\dists\gradle-2.14.1-all\4cj8p00t3e5ni9e8iofg8ghvk7 目錄下,解不解壓都可,然後在cmd執行 ionic build android 命令。

        

        第一次build時會有很多下載,等所有下載都完成,就可以進行編譯了。

        

        這樣我們就編譯成功了,在該目錄下會生成一個apk程式,我們就可以在安卓模擬器上執行剛才的程式了。

<span style="color:#000000">  ionic emulate android</span>

        我們也可以直接真機測試

<span style="color:#000000">  ionic run android</span>

        

        效果如圖