GitHub地址：github.com/JerryMissTo… ，歡迎關注
最近在使用 ionic 做一個專案，也對其做了些研究，希望記錄下來對初學者有幫助。這篇文章主要是描述新建一個空白 ionic 專案後，其目錄下各檔案的作用。簡單介紹自己再做專案的時候一些心得體會，並提供相關連結供需要的讀者進一步去探究。
platform：
ionic: V3.10.3
cordova: V7.0.1
前言
個人認為 ionic 可以簡單的解釋成 Angualr+Cordova 基礎上的UI框架，提供各種精美易用的UI元件，使用Angular 開發，藉助Cordova 打包成可以執行在不同平臺上的App，當然也可以只使用www資料夾下的webApp。
最後打包出來的Android App其實就是一個WebView，載入本地的www資料夾中的網頁。網頁中可以呼叫 Native 功能就是通過 Cordova 這個橋樑。更詳細的原理參見：ionic 實戰系列，只看前半部分就好。
正式內容
準備工作，新建專案並新增平臺支援，依次執行下面的命令：
ionic start demo tabs //新建一個tabs模板工程
ionic cordova platform add android //新增android平臺
ionic cordova platform add ios //新增ios平臺複製程式碼最後的目錄如下：
node_modules不用多說，依賴包存放的地方platforms裡面放的是打包後不同平臺的工程目錄，如下：
有 Android 或者ios 開發經驗的小夥伴一下子就可以看出來這是典型的 Android 和 ios 專案的目錄結構。
3.plugins 裡面是Cordova 外掛，通過使用不同的外掛可以呼叫不同的Native功能，比如拍照，錄音等。見下圖：
具體的外掛可以到ionic的官網上去找，地址是：ionicframework.com/docs/native… ，幾乎涵蓋了所有的Native功能，甚至還有Alipay呢。
4.resources 裡面放置的是圖示和Splash的圖片，可以讓UE的同事按照不同的平臺要求給你切好，最後到config.xml中去設定。
5.src 就是我們寫程式碼的地方啦，著重說一下 manifest.json 這個 PWA 新增至主螢幕的配置檔案，具體參見：developer.mozilla.org/zh-CN/docs/… 。Android 手機的使用者用瀏覽器開啟百度主頁，然後點選新增書籤，可能會出現新增到桌面的選項，視機型而定，就可以看到這個效果了。 service-worker.js檔案是用來做持久離線儲存的，也是PWA涉及的技術的一種。具體參見：lavas.baidu.com/doc/offline… 。Progressive Web App（PWA）是谷歌力推的提升WebApp體驗的新方法，感興趣的可以去研究下。
6.www資料夾裡面的就是我們打包出來網頁的內容，最終的APP就是個瀏覽器載入www檔案裡面的index.html網頁。假如你的App不涉及任何原生功能的話，打包出來的www下內容可以直接當做webApp使用，使用者通過自己手機的瀏覽器訪問。
7.config.xml 其實是Cordova的配置檔案，裡面是對打包出來的APP的配置，比如說包名，版本號，橫屏設定等，建議打包成APP之前一定要仔細閱讀裡面的內容， 設定適合自己產品的引數。具體參見：cordova.apache.org/docs/en/lat… 。
8.package.json裡面是管理你本地安裝的npm包用的。
9.package-lock.json 是執行npm install時自動生成的，記錄當前狀態下安裝的各個npm package的實際狀態和版本號，當在一個新機器上安裝此專案時，只要有這個檔案，可以保證安裝的和之前的一樣。
10.README.md這個檔案很多人可能會忽視，個人建議裡面寫上專案如何測試，如何打包，如何釋出等資訊，後來的維護者看到此文件就可以很快上手工作啦。一個完善的文件是一個成功專案的基礎
11.tsconfig.json 這個是typescript專案編譯的配置檔案，ionic是基於Angular的，Angular是使用是typescript語言的。具體可以參見：www.tslang.cn/docs/handbo…
12.tslint.json是typescript程式碼識別和匹配的配置檔案，類似jslint。
心得總結
確定專案使用ionic後，在需求確定的前期階段，我們就開始看官方文件。對著官方文件，學習準備的步驟如下：
- 安裝好開發環境，學會使用
ionic cli，並使用其建立空白專案，並跑一遍。 - 大體看一下
UI Components,API Reference,Native Plugins中的內容，建議一定要看下Troubleshooting，裡面有一些常見問題及解答。根據前期的需求，著重看一下可能用到的元件和外掛。 - 研究打包方式，我們最後是生成
Android和iOS兩個平臺上的安裝包，這個是Cordova的內容。 - 規定管理約束，內容大體如下：
- 提交程式碼管理：每次提交都要寫清楚具體做了什麼
- 命名規範管理：按照Angular的規範來
- 版本迭代管理：約定下版本號的命名規則
- Bug fix 管理：修復Bug要寫清楚修復Bug內容，新增JIRA號
- 研究空白專案中每個檔案的作用
需求出來後就可以討論專案的結構，如何分配業務模組，預估時間等。
在開發的過程中，遇到問題可以Google或者上Stack Overflow，或者上官方論壇，你遇到的問題都會有解答的。
在此感謝專案初期和我一起調研的Lee，可惜的是他在此專案開發不久被安排至其他的專案了。也要感謝專案時間緊張過程中臨時救火的奧迪哥。