本文主要是以Ionic2官網(wǎng)的文章基礎(chǔ)锚国，總結(jié)出自己的學(xué)習(xí)感悟
Ionic2框架及其各部分
Ionic2
Ionic 2 專注于以標(biāo)準(zhǔn)的 HTML 瘦赫、 CSS 和 JavaScript 來構(gòu)建移動站點姆怪，并可以通過 Cordova 打包成移動 App屯换，只需編寫一次代碼廷区，就可以分別部署到 iOS 嬉挡、Android 等多種移動平臺上。這項技術(shù)已經(jīng)幫助很多開發(fā)者創(chuàng)建了很多漂亮的 App∨缁В現(xiàn)在 Ionic 2 已經(jīng)發(fā)布了第二代版本唾那，使移動開發(fā)更容易、更有效率褪尝。--Ionic2 gitbook
其實本質(zhì)來說Ionic2其實就是伴隨angular產(chǎn)出的前端UI框架,它集成了cordova使它的一些組件可以是用原生的能力(說白了就是在cordova的組件上又自己封裝了一層,讓自己的native組件能夠使用更多平臺的能力比如各個平臺的藍牙功能闹获、wife、指紋恼五、手機信息昌罩、相機等功能),總體來說還是一款非常優(yōu)秀的框架哭懈、可以說特別開發(fā)混合APP最快的框架之一(為什么說是最快的呢灾馒，后面會給大家介紹它開發(fā)頁面快在什么地方)。在后續(xù)的版本Ionic3已經(jīng)推出,體積更小并且使用了AOT預(yù)編譯+懶加載遣总、同時也支持的服務(wù)端渲染睬罗。Ionic3和2版本的差別不是很大,基本是沿著2版本衍生的。所以我們學(xué)習(xí)了2版本的基本3版本也差不多沒問題了旭斥。
angular
Ionic2框架所用的angular版本是4.x的版本,現(xiàn)在流行的web框架有三家的:vue容达、react、angular,vue相對這三大流行的框架中是最輕量級的web前端框架,目前由尤雨溪大神及其團隊在維護垂券。react相遇來說已經(jīng)成熟了,但是react官方團隊只維護react框架其他的并沒有過多的維護,一些重要的庫還是由第三方維護花盐。angular的版本變化比較大,angular2之后配有Typescripts簡直爽的不行了,開發(fā)速度提升非常大,減少了開發(fā)中一些不必要的錯誤,同時angular也引入了react思想-->虛擬DOM羡滑。
Ionic2-UI框架
加入了bootstrop的柵格系統(tǒng)和流式布局,寫好了一套布局組件,基于這套組件可以快速簡單的布局出一個高性能頁面,剩下的和其他的UI框架差不多的一些UI組件：Alert、Buttons算芯、loading等等柒昏。
上圖是一個簡單的Ionic2框架的輪廓圖,下面就帶著大家一點一點學(xué)習(xí)這幾個模塊。當(dāng)然學(xué)習(xí)這門框架首先需要搭建環(huán)境熙揍、下面帶領(lǐng)大家學(xué)習(xí)如何搭建環(huán)境
環(huán)境搭建
安裝node.js
到node.js官網(wǎng)下載node.js安裝包直接安裝,請選擇安裝6.x版本的 如果安裝低版本的nodejs編譯的時候會報錯职祷。如果想要學(xué)習(xí)Ionic3的話安裝6.9版本及其以上的。
安裝 JDk &&android-SDK
這兩個的安裝我在這里就不多敘述了,網(wǎng)上關(guān)于安裝這兩個的東西太多了届囚。有趣的是cordova的編譯版本還在JDk1.6有梆。
安裝Ionic2&&cordova
npm install -g cordova@6.5.0 ionic@2.2.2
說明一下為什么要控制一下版本,如果不控制版本的話會直接升級到ionic3上去,我們暫時看ionic2畢竟ionic官方版本出的太快文檔跟不上版本
初始化項目
在命令行后面加-v2 或者-v1分別代表著Ionic2和Ionic1項目
初始化空白項目
ionic start myApp blank
初始化帶有tabs頁面空白的項目
ionic start myApp tabs
初始化帶有側(cè)邊欄的項目
ionic start myApp sidemenu
我選擇第二個命令創(chuàng)建項目
運行項目
cd myApp
ionic serve
開啟Ionic服務(wù),開啟打包處理。處理完畢后Ionic自動開啟瀏覽器訪問localhost:8100,此時便可以看到Ionic2項目
真機測試
android
首先連接手機,安卓手機的話找到開發(fā)者選項 選擇 開啟開發(fā)者選項 再選擇下面的 USB調(diào)試 當(dāng)彈出是否容許USB調(diào)試選擇確定即可
到項目根目錄下
ionic run android
ios
到項目根目錄下
ionic build ios
打開Xcode 選擇連接的ios設(shè)備 run 即可打包到ios手機
分析一下目錄
.
├── config.xml @1
├── hooks
│ └── README.md @2
├── ionic.config.json @3
├── package.json @4
├── platforms
│ ├── ios @5
│ └── platforms.json
├── plugins @6
├── resources @7
├── src
│ ├── app
│ │ ├── app.component.ts
│ │ ├── app.html
│ │ ├── app.module.ts @8
│ │ ├── app.scss
│ │ └── main.ts @9
│ ├── assets
│ │ └── icon
│ │ └── favicon.ico
│ ├── index.html
│ ├── manifest.json
│ ├── pages
│ │ ├── about
│ │ │ ├── about.html
│ │ │ ├── about.scss
│ │ │ └── about.ts
│ │ ├── contact
│ │ │ ├── contact.html
│ │ │ ├── contact.scss
│ │ │ └── contact.ts
│ │ ├── home
│ │ │ ├── home.html
│ │ │ ├── home.scss
│ │ │ └── home.ts
│ │ └── tabs
│ │ ├── tabs.html
│ │ └── tabs.ts
│ ├── service-worker.js
│ └── theme
│ └── variables.scss
├── tsconfig.json @11
├── tslint.json @12
└── www
對比上面的tree后面的@表示解釋編號
- config.xml ionic項目的配置文件包括:項目的名字意系、介紹泥耀、作者、與遠端通信權(quán)限昔字、不同平臺的圖標(biāo)適配爆袍、引入的插件等的配置。
- 說明作郭。
- 這個文件表示ionic項目使用的版本是多少陨囊、是否啟用typescripts。
- ionic項目的包管理文件夹攒。
- 新建項目默認加入ios平臺蜘醋，其他的平臺需要用命令行加入。
- 插件文件（這個后續(xù)再講咏尝。
- 圖片文件夾压语。
- angular的跟模塊文件
- 入口編譯的ts文件
- 主頁
- 編譯ts文件的配置文件
- ts文件靜態(tài)語法檢查的配置文件
總結(jié)
基本的介紹就到這里了,后面的文章我將會介紹ionic、angular编检、cordova胎食、ionic官方native組件的使用、cordova原生組件的封裝等允懂。
