系列文章

實(shí)戰(zhàn)使用Axure設(shè)計(jì)App,使用WebStorm開(kāi)發(fā)(1) – 用Axure描述需求 

實(shí)戰(zhàn)使用Axure設(shè)計(jì)App,使用WebStorm開(kāi)發(fā)(2) – 創(chuàng)建 Ionic 項(xiàng)目  

實(shí)戰(zhàn)使用Axure設(shè)計(jì)App,使用WebStorm開(kāi)發(fā)(3) – 構(gòu)建頁(yè)面架構(gòu) 

實(shí)戰(zhàn)使用Axure設(shè)計(jì)App,使用WebStorm開(kāi)發(fā)(4) – 實(shí)現(xiàn)頁(yè)面UI

實(shí)戰(zhàn)使用Axure設(shè)計(jì)App,使用WebStorm開(kāi)發(fā)(5) – 實(shí)現(xiàn)頁(yè)面功能

實(shí)戰(zhàn)使用Axure設(shè)計(jì)App,使用WebStorm開(kāi)發(fā)(6) – 邁向后端

Ionic是什么? Ionic是目前最有潛力的一款 HTML5 手機(jī)應(yīng)用開(kāi)發(fā)框架。通過(guò) SASS 構(gòu)建應(yīng)用程序，它提供了很多 UI 組件來(lái)幫助開(kāi)發(fā)者開(kāi)發(fā)強(qiáng)大的應(yīng)用。 它使用 JavaScript MVVM 框架和 AngularJS 來(lái)增強(qiáng)應(yīng)用。提供數(shù)據(jù)的雙向綁定，使用它成為 Web 和移動(dòng)開(kāi)發(fā)者的共同選擇。

Ionic 在發(fā)布了1.0版本以后，被越來(lái)越多的關(guān)注和支持，社區(qū)也十分的活躍。本文將繼續(xù)上篇，使用Ionic 框架來(lái)開(kāi)發(fā)應(yīng)用。  

1. 首先安裝NodeJs：https://nodejs.org/ 在NodeJs 網(wǎng)站上找到自己平臺(tái)的安裝包，執(zhí)行安裝即可。


2. 安裝 Ionic：http://www.ionicframework.com/getting-started/ 執(zhí)行命令。

在Mac下安裝的時(shí)候，可能會(huì)出現(xiàn)沒(méi)有權(quán)限的問(wèn)題。提升權(quán)限執(zhí)行 sudo 即可：

Ionic 有三種默認(rèn)項(xiàng)目模板：
i). blank –> 空工程模板，
ii). tabs -> 分頁(yè)Tabs工程模板
iii). sidemenu -> 左邊菜單工程模板




3. 使用 ionic start DeliveryApp blank 創(chuàng)建這個(gè) App應(yīng)用，DeliveryApp 是咱們這個(gè)實(shí)例的項(xiàng)目名稱。

4. 運(yùn)行 ionic serve 看一下在網(wǎng)頁(yè)中的模擬效果。 

5. 給這個(gè)應(yīng)用添加發(fā)布平臺(tái)，這里添加了 android 平臺(tái)和 ios 平臺(tái)。

到這里 ionic 就搭建完成了。 下一步下載 WebStorm，使用WebStorm作為開(kāi)發(fā)的IDE吧。

6. WebStorm 開(kāi)發(fā)環(huán)境

WebStorm下載地址：https://www.jetbrains.com/webstorm/ 下載并安裝 WebStorm 安裝完成后，使用 WebStorm 打開(kāi)文件夾 DeliverApp。


截止到現(xiàn)在基于 ionic 的工程搭建好了，開(kāi)發(fā)需要使用的 WebStorm 弄好了。下篇我們可以開(kāi)始按照 Axure 里的需求開(kāi)發(fā)每個(gè)頁(yè)面了。（本文最終完成的工程代碼會(huì)放在 github上）