ionic和cordova初探--從安裝到運行首個app

好多人說ionic好用，一直要推薦我用，我就不信了，來安裝玩一下試試效果。實踐出真知！安裝過程各種坑，工具太多了，太麻煩了，差點放棄（還好堅持下來呢）。

1.安裝node

許多前端工具的安裝都依賴于node的包管理器npm，Node官網： https://nodejs.org/ 安裝完成后在cmd中輸入npm -v回車。 查看版本號如圖：

查看版本號

2.安卓環境

• JDK下載地址：http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
• JDK需要配置兩個環境變量：（如果已配置就無需再配置）

PATH：%JAVA_HOME%\bin
CLASSPATH：.;%JAVA_HOME%\lib\tools.jar （一定不要忘了前面的點）

配置完成后，cmd中輸入java -version 查看版本號。

3.安裝安卓的SDK

• 打開Android Studio，File --> Settings --> 搜索sdk,找到對應的sdk進行安裝即可。
• 需要在Path環境變量中添加兩個值。分別是 Android SDK中tools目錄的路徑和platform-tools的路徑。 例如：

D:\android-sdk\tools;
D:\android-sdk\platform-tools;

4. 安裝ionic和cordova

• 安裝命令

命令行輸入 `npm install -g cordova ionic`

安裝示意圖：

安裝示意圖

如果安裝不了，可以試試國內鏡像安裝，首先安裝cnpm，執行npm install -g cnpm --registry=https://registry.npm.taobao.org命令安裝。然后執行命令cnpm install -g cordova ionic安裝ionic和cordova

• 查看是否安裝成功：

查看ionic版本 `ionic -v`
查看cordova版本 `cordova -v`

查看ionic版本

查看cordova版本

• ionic 和 cordova默認安裝在C:\Users\hello（此目錄為本機名）\AppData\Roaming\npm\目錄。 注意AppData是隱藏文件，需要在文件夾選項里面把隱藏文件顯示才可以看到（具體的怎么顯示隱藏文件夾百度）。

本地安裝路徑如圖所示：

ionic 和 cordova默認安裝路徑

• 修改PATH環境變量，在末尾加上C:\Users\hello（此目錄為本機名）\AppData\Roaming\npm\;

5. 使用ionic命令行創建新項目

• 打開cmd執行'ionic start'

• 然后輸入一個項目名，回車

• 然后按下tab鍵選擇一個默認的模板，按回車。比如我這里選擇的是blank模板。

• 然后看到有一行提示? Integrate your new app with Cordova to target native iOS and Android? (y/N)意思是是否要把 iOS 和Android集成到剛剛用Cordova 創建的app中 ，我這里選擇y 表示確定。然后就會自動安裝缺失的或者更新某些工具版本。
• 然后就會看到一個提示? Install the free Ionic Pro SDK and connect your app?我這里選擇的y，表示確認。
• 然后需要輸入郵箱登陸。

然后是輸入密碼

后面還有步驟，太麻煩了，我這里就不列舉了，我已經放棄使用ionic創建安卓項目了，可以直接看下文。

6. 使用cordova創建安卓項目（建議直接跳過第5步，使用第6步）

如果是要支持ios平臺，可以輸入cordova platforms add ios。

如果是要支持web網頁，可以輸入cordova platforms add browser。

如果不知道有哪些平臺可以選擇，可以使用命令cordova platforms list查看已經安裝的平臺和可以支持的平臺。

• 1.在瀏覽器打開，進入工程根目錄，輸入cordova run browser，然后瀏覽器自動訪問http://localhost:8000/
• 2.在安卓上編譯Cordova APP

1.輸入`cordova requirements`命令檢查是否滿足構建平臺的要求。如有報錯請按錯誤提示去安裝相應的工具。
2.執行`cordova build android`命令， 編譯安卓項目
3.執行`cordova run android`命令，就會自動打開模擬器，在模擬器運行安卓項目了，如果執行`cordova run`,默認是在瀏覽器運行。
默認是debug版本，打包出來的apk在 你創建的項目根目錄\platforms\android\app\build\outputs\apk\debug目錄下。
默認啟動頁是`www/index.html`這個頁面。邏輯編寫在`www/js這個目錄里。`

示意圖如下：

運行在瀏覽器

運行在安卓模擬器