初識IONIC2

IONIC2及以上版本基礎結構分析

背景介紹

ionic用於開發混合手機應用,一套代碼可以同時編譯生成對應的Android和IOS版本,有效節省了開發成本。比較適用於那些開發週期短,需要較短時間內進行上線的產品。但同時也會存在一些其他的問題,比如說效率和兼容性無法得到保證。

這裏我主要介紹的是IONIC2及以上的版本,因爲第二個版本開始與之前的版本有了極大的改變,整個目錄結構和編碼方式都有很大差異。有興趣的可以先了解下Angular2,它是IONIC2的實現基礎。

IONIC結構分析

作爲程序猿,學習一門新技術總是要先從官網擼起,效果纔是最好的,IONIC
(這裏自動忽略了安裝環境等前戲步驟,畢竟這些隨便百度下都有的)。

1.生成IONIC項目

ionic start [項目名]

這裏寫圖片描述

對,你沒有看錯,生成一個完整的項目就是這麼簡單,這裏還爲開發者準備了各種版本,保證滿足大部分人的需求。

這裏寫圖片描述

2.運行項目

打開項目目錄: cd [項目名]
瀏覽器運行項目:ionic serve
這裏寫圖片描述

這裏我選擇的是blank模式,就只有一個空白的界面。直接使用瀏覽器進行調試,在我看來是最方便的。可以很直觀的看到修改結果,不過如果你需要使用到手機的一些固件那就只能添加平臺運行在手機上,而且還需要添加對應的插件,這個之後會再提。

3.觀察項目結構

終於來到本篇的重點了,當然我本身是Android出身,如果有什麼講的錯誤的地方,也希望各位提出來,互相交流。
整體結構如下圖:
這裏寫圖片描述

我對一些比較重要的文件的理解

app.module.ts

這裏寫圖片描述

app.component.ts

這裏寫圖片描述

各個page
這裏寫圖片描述

以上是我最近對IONIC的一些使用體會,希望可以給其他人提供一些參考。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章