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是否安裝成功。
現在,我們可以安裝cordova和ionic了,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的資料夾,這就是我們的專案目錄,目錄中有如下檔案。
這裡的目錄結構我們以後再說,現在為剛建立的程式新增安卓平臺。
首先進入專案目錄
<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>
效果如圖