目錄
ionic是一個功能相當強大的webAPP開發框架，它配備了很多開箱即用的精美UI組件和API插件。由於它用到了很多輔助工具，比如打包APP的cordova，Android SDK，打包css的node-sass等，這些可能還會用到別的東西和自身版本問題，所以對於初學者，配置的話會感到棘手，下面我就講解一下我在我的移動硬盤上的win10搭建開發環境和配置的過程。（2018年12月1日）
一、環境
首先，必需要有的是，node.js-v11，一個win10管理員賬戶，會添加環境變量等基本操作，安裝軟件的時候應該默認安裝在C盤的特定用戶的AppData文件夾或program files等文件夾（選在非C盤時它的主體還是在C盤的，而且不利於多賬戶系統的使用），最好下載可以爲所有系統用戶安裝的版本（像vscode就有user和system版本），還有因爲Android 是谷歌的，所以最好有VPN翻翻牆，推薦一個便宜的https://portal.shadowsocks.nu/，要是這個被牆了，就用啓點加速器，百度搜就能搜到，30元一個月不限量。
接下來打開命令提示符，安裝ionic，cordova，如下：
npm install -g ionic
npm install -g cordova
如果npm出現下不了或太慢，一直卡在downloading，大概是被牆了，應該先npm install -g nrm,，nrm ls，nrm use taobao，切換淘寶鏡像，當然用VPN也可以的。
等待完成，ionic -v ,cordova -version,檢查一下是否成功，要是不對，你可能需要將npm全局包路徑添加到系統path中，路徑一般是C:\User\<-你的賬戶名->\AppData\Roaming\npm，裏面有同名的Windows腳本命令，這時候也應該在用戶環境變量新建NODE_PATH變量指向裏面的node_modules文件夾。
再安裝jdk（Java環境），進去在downloads區域選一下Accept License Agreement選項就自由下載安裝包了，Windows的大約200MB。
再安裝Android SDK，注意這個的安裝路徑裏不能有中文，空格（所以應該修改下安裝路徑，或新建），完成後添加系統環境變量ANDROID_HOME爲安裝路徑，順便添加里面的platform-tools文件夾的路徑到系統path變量裏（後面要用）。打開Android SDK Manager，選取需要的構建工具build toolds（28.0,27.0），Aandroid API（25,26）和platforms，點擊右下角install packages即可，以後項目提示需要再來加就好了。這個可能要下很久，體積大，要是失敗很有可能是你要開VPN的時候了。
再安裝Android Studio，這個安裝好後給它設置一下剛纔Android SDK的路徑就好了。（Android SDK Location）
這個時候，如果在你的項目文件夾裏，打開命令提示符（cd到它，或放個cmd快捷方式，或在vscode的terminal界面），輸入命令：
ionic start MyApp blank --type=angular
我們就可以在當前文件夾新建應該名爲MyApp，使用ionic自帶模板blank，使用最新angular（~7.0）環境的項目了，需要注意的是如果type=ionic angular，那就是~5.0，若是ionic1，就是angularjs（很老的版本），我們當然應該用最新的。可是這時npm i時會報錯node-sass，這是因爲我們還沒安裝python 2.7和c++環境，編譯scss需要的。
安裝python 2.7，不要錯裝了3.0的（他們可以共存，把python2的exe文件名後面加的2就行），這個時候非常重要的一件事就是-->npm config set python <-python2的安裝路徑/python.exe->，要手動告訴npm python2的可執行程序的位置，不然它還找不到。
接下來安裝c++環境，這個就是安裝vs 2017社區版，選好c++相關的環境，就行了。
至此，環境完全搭建好了，在項目文件夾裏：
ionic cordova build android --prod
就可以打出一個已經簽名的App，可以裝在手機上了。如果->--release是需要手動簽名的，不能直接裝。
另外，新建一個頁面：
ionic g page newpagename
新建一個組件：
ionic g component cname
在src/app目錄裏就可以編輯頁面了。
執行以下命令就可以查看頁面和簡單調試：
ionic serve --lab
二、調試
-->ionic serve 在不需要API的時候非常方便，需要API的時候需要在手機上調試，除了alert（），JSON.stringify() 等頁面顯示，還有可以連接USB查看控制檯。這裏有兩個方法：
方法一：
ionic cordova run android -l -c
這個可以打出調試包，但需要通過Android SDK安裝HAXM（安卓模擬器），同時需要高性能顯卡和兼容的Windows（移動版不行），先跳過。
方法二：
首先，下載谷歌瀏覽器，應用寶（沒錯，它會自動安裝驅動），開啓手機USB調試：
開啓方法：例如我的小米max2 MIUI10.1，-->設置-->我的設備-->全部參數-->MIUI版本，點它七下，就可以在-->更多設置-->開發者選項，開啓‘開發者選項’，‘USB調試’，‘USB調試（安全設置）’。接下來打開APP，連接USB，這裏最好在命令提示符：-->adb devices，查看有沒有連上，如果是無效的命令，那麼就是你前面沒有將Android SDK目錄的platform-tools文件夾添加到path，重新開啓cmd，如果有手機列表，就是連上了，就可以打開谷歌瀏覽器，訪問鏈接chrome://inspect/#devices，稍等，找到我們的APP，點擊inspect，就可以調試了。
這裏其實是獲取Android的webview（手機系統內置的瀏覽器內核，原生APP裏打開鏈接全靠它）控制檯，如果你的其他APP使用了內置網頁，都可以調試它。
三、配置
關於我們的APP還有一個重要的文件就是config.xml文件，在項目根目錄。
1、APP的名字<name>標籤裏的文字
2、APP的packageName，在手機裏標識一個不同的APP，緩存目錄名就是它了。
3、APP的啓動畫面，圖標，通過<platform>裏的icon標籤，splash標籤配置，當然ionic提供了其他快捷方法。
4、APP的權限配置，首先在widget標籤添加屬性xmlns:android="schemas.android.com/apk/res/android"，這是安卓的命名空間，若不添加就配置權限會造成重名，產生merge錯誤，再在platform裏添加：
<config-file parent="/*" target="AndroidManifest.xml">
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS" />
。。。。
</config-file>
填你需要的權限就可以了，需要注意的是，有些權限需要你自己在此配置，否則就算用戶手動開啓也是沒用的。
比如我們可能需要使用用戶手機存儲裏的一張圖片作爲img標籤的src屬性，得到它的路徑是原生URI（像這樣：file:///storage/emulated/0/piece.jpg），先要轉換爲webview內置服務器上了URL，（安裝webview插件）,this.webView.convertFileSrc(FILE_URI)，得到這樣的URL（http://localhost/_file_/storage/emulated/0/piece.jpg）,切換鏈接，這個時候若不配置或申請權限，用戶再怎麼操作也是不能顯示出圖片的。
四、其它
1 、推薦使用vscode或webstorm這樣的高級編輯器，可以糾正你百分之九十的錯誤，還可以提示一個對象裏所有可用的方法和屬性，瞭解一個包最好去看看它的index.d.ts文件，裏面有它提供給你的所有方法，及其參數類型，返回類型，註釋說明。
2、ionic官網文檔和cordova官網講的很詳細，基本都配有例子，如果你的英文水平不高的話，可以使用谷歌瀏覽器自帶的翻譯網頁的功能進行閱讀。一步一步來，相信不久就可以開發出好用的APP了。
3、不妨添加本人QQ格蘭德1147940842，一起交流、合作。