自從 iOS 開發(fā)和 Android 開發(fā)誕生以來，使用一套代碼部署到兩個平臺抛猖，就成為很多開發(fā)者奮斗的目標(biāo)。然而前幾年由于各種因素路克，這種想法并為成為現(xiàn)實(shí)樟结，起碼沒有一個普遍被開發(fā)者接受的解決方案。隨著這幾年移動平臺硬件性能的快速提升精算，加之HTML5瓢宦、CSS3、ES6的出現(xiàn)和流行灰羽，出現(xiàn)了一些比較優(yōu)秀的以前端技術(shù)為基礎(chǔ)的混合開發(fā)框架驮履，ionic便是其中之一。
一
學(xué)習(xí)一門技術(shù)廉嚼，最好的方式就是去官網(wǎng)擼官方文檔玫镐。ionic 官網(wǎng) 對自己的介紹如下：
The top open source framework for building amazing mobile apps.
Ionic is the beautiful, free and open source mobile SDK for developing native and progressive web apps with ease.
官方給自己定位很清楚，開源免費(fèi)的移動平臺開發(fā)框架怠噪。不過這個自封的「頂級」恐似，會不會給人一種欽定的感覺？話說回來傍念，ionic 作為一個純粹基于前端技術(shù)的框架矫夷，寫寫頁面和邏輯還行，一旦涉及到有關(guān) Native 的一些操作憋槐，基本就只能沉默以對了双藕。這時候便輪到 Cordova 華麗出場了。
二
Cordova 與 ionic 一樣阳仔，也是一個開源的移動開發(fā)框架忧陪，不過屬于 Apache 旗下的開源項(xiàng)目。它的出現(xiàn)，使得開發(fā)者可以僅僅使用前端技術(shù)開發(fā)跨平臺的移動項(xiàng)目嘶摊。說到這你可能要問了延蟹，既然也是基于前端技術(shù)的混合開發(fā)框架，那它跟 ionic 有毛區(qū)別更卒？
區(qū)別就在于等孵，Cordova 完成了混合開發(fā)最重要的一環(huán)：打通了前端與 Native 層的各種交互。通過 Cordova 的各種 插件蹂空，你可以像原生開發(fā)一樣俯萌，調(diào)用各種系統(tǒng)功能，比如打電話上枕、拍照咐熙、訪問揚(yáng)聲器、定位辨萍、甚至使用 TouchID 等本來原生代碼才可以調(diào)用的功能棋恼。而 ionic 做的工作，就是把本來需要用前端代碼寫的原生控件和方法锈玉，做了一個還不錯的風(fēng)格統(tǒng)一和邏輯封裝爪飘。也即是說，Cordova 完成了與 Native 層的交互和通信拉背，ionic 完成了移動端頁面的布局和互動师崎。不得不說，前端的小伙伴們真是太有福了椅棺，只管拿過來寫就行了犁罩。下圖是 Cordova 的架構(gòu)。
三
通過前面鋪墊的內(nèi)容两疚，我們終于可以真正進(jìn)入到 ionic 的開發(fā)中來床估。首先，我們需要在 Mac 上安裝 ionic诱渤，在終端輸入如下命令：
npm install -g cordova ionic
其中丐巫，npm 全拼為 Node Package Manager，是 Node.js 的包管理工具勺美，主要功能是管理 Node 各種包的安裝鞋吉、更新、卸載励烦、升級等功能。所以執(zhí)行這行命令之前我們需要先在 Node.js 官網(wǎng) 下載最新穩(wěn)定版（推薦）的安裝包泼诱，安裝到電腦上之后坛掠，就可以在終端執(zhí)行上面的命令了。 -g 這個參數(shù)的意思是 globally，全局安裝屉栓。Cordova舷蒲、ionic 是需要安裝的包。
另外友多，現(xiàn)在最新的 ionic 版本是2.x牲平，跟1.x區(qū)別還是挺大的，所以一定要注意自己安裝的版本域滥。做完這些之后纵柿，我們就完成了開發(fā) ionic 所需要做的準(zhǔn)備工作。正所謂上手一門語言最快的的方法就是寫個 Hello World启绰，下面我們就來做一個 ionic 的 Hello World昂儒！
四
打開終端，輸入
ionic start --v2 HelloWorld sidemenu
上面的命令為我們自動創(chuàng)建了一個 SideMenu 模板的應(yīng)用框架委可，我們在此基礎(chǔ)上進(jìn)行開發(fā)即可渊跋。創(chuàng)建完成之后，cd 到 HelloWorld 文件夾目錄下着倾，運(yùn)行 ionic serve拾酝，如果運(yùn)行成功，終端會自動為我們打開瀏覽器運(yùn)行剛才創(chuàng)建的程序卡者。運(yùn)行效果如下圖所示:
從外觀上看蒿囤，整體風(fēng)格與一代差距還是挺大的，總的來說是變得相對來說更加美觀了一些虎眨。想當(dāng)初我第一次看到運(yùn)行在瀏覽器上的 ionic 應(yīng)用蟋软，心想這什么玩意，這也能叫 APP 嗽桩？盡管 V2 版本還是有很多不盡如人意的地方岳守，但已經(jīng)可以看見明顯在進(jìn)步了。從實(shí)現(xiàn)方式上來說碌冶，ionic V2 版本將 AngularJS V1 替換成了 AngularJS V2 版本湿痢，差別還是挺大的。
五
ionic 的構(gòu)成總的來說分為三個部分：UI Components扑庞、API譬重、Ionic Native.
UI Components 是 ionic 官方出的高仿原生控件的 UI 組件庫，V1 版本名稱叫做 CSS Components罐氨，只是名稱變了臀规。API 是 JavaScript API，使用 JS 封裝了很多在 iOS 開發(fā)中常用的方法栅隐。 Ionic Native 顧名思義是訪問 Native 層時所需要的一些插件塔嬉。
至此玩徊，ionic 差不多就入門了，想要進(jìn)一步深入學(xué)習(xí)的話就去官方網(wǎng)站看文檔吧谨究。國內(nèi)雖然有所謂的 ionic 中文網(wǎng)之類的論壇恩袱，但是翻譯質(zhì)量十分堪憂，而且經(jīng)常滯后胶哲，不如不看畔塔。說到這里就要贊一下 ionic 官網(wǎng)文檔做得非常全面而且詳細(xì)，各種開發(fā)輔助手到擒來鸯屿，對開發(fā)者可以說是肥腸友好了澈吨。
這次先寫這么多，以后會接著更新 ionic 其他方面的內(nèi)容碾盟。
