為新人添加此文支救。
ionic3一個完整項目,一般會有以下文件夾:
對比目前其它流行的js框架各墨,個人覺得其分工明確、清晰好理解,我覺得就算一開始頭腦一遍空白的新手恃轩,對他講解過一次后都能有個大致印象结洼。
首先叉跛,我們主要的工作目錄是src目錄,開發(fā)的90%以上的工作量都集中在這個目錄上筷厘,在里面就是用angular2或以上的技術去書寫html模版鸣峭、樣式和腳本(有面向對象開發(fā)經(jīng)驗的很容易上手)酥艳,開發(fā)完成后通過ionic的命令行生成為原始的靜態(tài)html頁面,并存放在www目錄(見上圖所示)充石,也就是說www在開發(fā)過程中是不需要理的更扁,可以任意刪除赫冬。
當我們想部署網(wǎng)頁時溃列,只需把www目錄拷貝到網(wǎng)站服務器上即可;當我們想打包app時听隐,命令行執(zhí)行打包指令會生成一個調(diào)用瀏覽器插件的原生項目补鼻,同時把www目錄拷貝到項目中雅任,瀏覽器插件的入口網(wǎng)頁指向www的index.html,從而在app中實現(xiàn)本地瀏覽網(wǎng)頁的效果沪么,其中頁面和腳本等因為是本地的就不需要網(wǎng)上加載硼婿,在數(shù)據(jù)加載過程中就已經(jīng)可以看到頁面禽车,等數(shù)據(jù)加載完成自動局部刷新頁面即可,這就是ionic的運行機理殉摔,也是混合式應用的其中一種常見套路州胳。
然而逸月,如果只是本地網(wǎng)頁這么簡單的話,它和在線網(wǎng)頁的沒啥區(qū)別碗硬,只是速度會快些而已瓤湘,但作為混合式應用,調(diào)用原生功能是最基本的要求岭粤。在一些需要原生的需求目的惜索,或者基于性能要求的目的剃浇,ionic提供了很方便調(diào)用原生(利用Cordova)的使用接口,包含配置和擴展虎囚,那就是第一張圖里其它目錄的角色(黑色粗體為重要項):
hooks:cordova的命令鉤子角塑,用于編譯和打包淘讥;
node_modules:js庫——node管理的依賴包(通過命令npm install 包名或路徑
安裝);
platforms:ios蒲列、android等可選平臺生成的原生項目(通過命令ionic cordova platform add 平臺名稱
后生成窒朋,本來支持wp的蝗岖,但看最新命令顯示貌似已經(jīng)移除了,見如下):
StreamdeMacBook-Pro:appetite woodstream$ ionic cordova platform ls
> cordova platform ls
Installed platforms:
ios 4.4.0
Available platforms:
android ~6.2.2
blackberry10 ~3.8.0 (deprecated)
browser ~4.1.0
osx ~4.0.1
webos ~3.7.0
plugins:已安裝的cordova插件(通過ionic cordova plugins ls
查看抵赢,通過ionic cordova plugins add/remove 插件名或路徑
來添加/刪除)欺劳;
resources :android铅鲤、ios等平臺圖標、啟動屏資源邢享,在此目錄下的資源通過下述命令會把資源按分辨率生成到原生項目目錄中鹏往,省卻自己逐個調(diào)整分辨率及拷貝的繁瑣工作:
ionic cordova resources
或只針對單個平臺的:
ionic cordova resources 平臺名
命令可選參數(shù)為:
--force, -f 強制重建資源驼仪;
--icon, -i 創(chuàng)建圖標資源;
--splash, -s 創(chuàng)建啟動屏绪爸;
src:開發(fā)工作目錄湾碎;
www:編譯后生成的靜態(tài)網(wǎng)頁文件奠货,可直接拿去網(wǎng)上部署發(fā)布;
config.xml: 原生項目配置文件。
package.json: node安裝模塊時的依據(jù)文件柔滔,在里面配置的內(nèi)容,在執(zhí)行npm install
命令后會生成到node_modules目錄睛廊。
tsconfig.json: TypeScript項目的根目錄形真,指定用來編譯這個項目的根文件和編譯選項超全。
tslint.json:格式化和校驗typescript咆霜。
那怎么理解這些文件呢嘶朱?因為要和原生打交道,假如有android疏遏、ios兩個平臺脉课,修改點原生內(nèi)容就要去兩份原生代碼里面去改好财异?還是把它們抽出來作為配置項,直接改配置項戳寸,就自動覆蓋到原生代碼中去好视事?那自然是后者好點庆揩,所以基于配置的概念在ionic中無處不在跌穗,而上述的所有目錄及文件,我們幾乎只需動config.xml蚌吸、package.json锈拨、src
羹唠。
上述說的是ionic3的開發(fā)結構及其理解奕枢,現(xiàn)在要說的是最重要的文件夾src——angular2及以上的開發(fā)結構理解佩微,主要為八項:
app:入口文件夾;
app
-app.component.ts:入口頁的業(yè)務邏輯哺眯;
-app.html:入口頁的html模板谷浅;
-app.module.ts:入口模塊配置;
-app.scss:入口頁的樣式(全局樣式)撼玄;
-main.ts:啟動模塊入口;
assets:樣式墩邀、圖片、字體眉睹、腳本等靜態(tài)文件荔茬;
pages :開發(fā)頁面辣往,含html、ts站削、css坊萝;
theme :主題文件夾许起,里面可以放置多個主題文件十偶,方便切換主題园细;
components:自定義組件(公用、可復用模塊)猛频;
directives:自定義指令(注入到組件上為組件添加功能)狮崩;
pipes:自定義管道(用于格式化顯示數(shù)據(jù))鹿寻;
providers:自定義服務(工具類睦柴、業(yè)務處理類等等)毡熏;
可以看到,每個目錄有其職責痢法,其中它們都是可選的狱窘,基礎項目為了方便你開始開發(fā)财搁,除了components、directives尖奔、pipes幻馁、providers外都默認會為你創(chuàng)建,而這4個沒創(chuàng)建是因為有些人就不需要用到仗嗦,讓你自己按需選擇自行創(chuàng)建膘滨。另外它們的名字也是可變的稀拐,只是基于約定大于配置的概念,而且利用ionic-cli命令行生成文件德撬,如ionic g pipe date
會生成到上述默認文件夾名稱中铲咨,所以建議保持一致蜓洪。
而壓縮打包混淆等都是ionic框架內(nèi)部處理了,所以我們只需專注于頁面的實現(xiàn)隆檀,那最最簡單的開發(fā)步驟就是摇天,在pages里面新建一個頁面恐仑,寫好邏輯,然后在app.module.ts添加配置即可裳仆。