ionic V3.10 新建空白項目中文件的簡單介紹

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平臺複製代碼

最後的目錄以下：

1. node_modules 不用多說，依賴包存放的地方
2. 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，惋惜的是他在此項目開發不久被安排至其餘的項目了。也要感謝項目時間緊張過程當中臨時救火的奧迪哥。