【開發(fā)指南】(六)Ionic3從目錄結構理解開發(fā)

為新人添加此文支救。

ionic3一個完整項目,一般會有以下文件夾:

image.png

對比目前其它流行的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添加配置即可裳仆。

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末腕让,一起剝皮案震驚了整個濱河市歧斟,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌静袖,老刑警劉巖液南,帶你破解...
    沈念sama閱讀 212,718評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件勾徽,死亡現(xiàn)場離奇詭異统扳,居然都是意外死亡,警方通過查閱死者的電腦和手機咒钟,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,683評論 3 385
  • 文/潘曉璐 我一進店門吹由,熙熙樓的掌柜王于貴愁眉苦臉地迎上來朱嘴,“玉大人粗合,你說我怎么就攤上這事∥谖簦” “怎么了?”我有些...
    開封第一講書人閱讀 158,207評論 0 348
  • 文/不壞的土叔 我叫張陵磕道,是天一觀的道長供屉。 經(jīng)常有香客問我,道長伶丐,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,755評論 1 284
  • 正文 為了忘掉前任疯特,我火速辦了婚禮,結果婚禮上漓雅,老公的妹妹穿的比我還像新娘录别。我一直安慰自己故硅,他們只是感情好,可當我...
    茶點故事閱讀 65,862評論 6 386
  • 文/花漫 我一把揭開白布吃衅。 她就那樣靜靜地躺著往踢,像睡著了一般徘层。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上趣效,一...
    開封第一講書人閱讀 50,050評論 1 291
  • 那天瘦癌,我揣著相機與錄音跷敬,去河邊找鬼。 笑死西傀,一個胖子當著我的面吹牛斤寇,可吹牛的內(nèi)容都是我干的拥褂。 我是一名探鬼主播,決...
    沈念sama閱讀 39,136評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼饺鹃,長吁一口氣:“原來是場噩夢啊……” “哼莫秆!你這毒婦竟也來了?” 一聲冷哼從身側響起镊屎,我...
    開封第一講書人閱讀 37,882評論 0 268
  • 序言:老撾萬榮一對情侶失蹤惹挟,失蹤者是張志新(化名)和其女友劉穎杯道,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體党巾,經(jīng)...
    沈念sama閱讀 44,330評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡萎庭,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,651評論 2 327
  • 正文 我和宋清朗相戀三年齿拂,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片署海。...
    茶點故事閱讀 38,789評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡吗购,死狀恐怖砸狞,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情刀森,我是刑警寧澤踱启,帶...
    沈念sama閱讀 34,477評論 4 333
  • 正文 年R本政府宣布研底,位于F島的核電站,受9級特大地震影響榜晦,放射性物質(zhì)發(fā)生泄漏冠蒋。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,135評論 3 317
  • 文/蒙蒙 一抖剿、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧识窿,春花似錦、人聲如沸腕扶。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,864評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽脓恕。三九已至,卻和暖如春窿侈,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背史简。 一陣腳步聲響...
    開封第一講書人閱讀 32,099評論 1 267
  • 我被黑心中介騙來泰國打工乃秀, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留圆兵,地道東北人跺讯。 一個月前我還...
    沈念sama閱讀 46,598評論 2 362
  • 正文 我出身青樓殉农,卻偏偏與公主長得像,于是被迫代替她去往敵國和親超凳。 傳聞我的和親對象是個殘疾皇子愈污,可洞房花燭夜當晚...
    茶點故事閱讀 43,697評論 2 351

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,860評論 25 707
  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具(例如配置管理暂雹,服務發(fā)現(xiàn),斷路器创夜,智...
    卡卡羅2017閱讀 134,638評論 18 139
  • Spring Boot 參考指南 介紹 轉載自:https://www.gitbook.com/book/qbgb...
    毛宇鵬閱讀 46,778評論 6 342