Ionic
Ionic是一個新的、可以使用HTML5構(gòu)建混合移動應(yīng)用的用戶界面框架,它自稱為是“本地與HTML5的結(jié)合”。該框架提供了很多基本的移動用戶界面范例,例如像列表(lists)、標(biāo)簽頁欄(tabbars)和觸發(fā)開關(guān)(toggleswitches)這樣的簡單條目。它還提供了更加復(fù)雜的可視化布局示例,例如在下面顯示內(nèi)容的滑出式菜單。
Ionic宣稱他們極度強調(diào)性能,并且通過限制DOM交互、完全移除jQuery以及使用像translate(z)這種特定的硬件加速的CSS濾鏡觸發(fā)移動設(shè)備上GPU——與由動力不足的移動瀏覽器提供的交互相比這種方式提供了硬件加速的交互——等方式使速度最大化。
Ionic同時它是基于 AngularJs的。
AngularJs
AngularJS是建立在這樣的信念上的:即聲明式編程應(yīng)該用于構(gòu)建用戶界面以及編寫軟件構(gòu)建,而指令式編程非常適合來表示業(yè)務(wù)邏輯??蚣懿捎貌U展了傳統(tǒng)HTML,通過雙向的數(shù)據(jù)綁定來適應(yīng)動態(tài)內(nèi)容,雙向的數(shù)據(jù)綁定允許模型和視圖之間的自動同步。因此,AngularJS使得對DOM的操作不再重要并提升了可測試性。
Cordova
Cordova就是一個中間件,讓我們把WebAPP打包成HybridAPP,并且它提供了非常多的插件,方便我們使用原生APP的功能。
Cordova是一款開放源代碼的App開發(fā)框架,旨在讓開發(fā)者使用HTML、Javascript、CSS等WebAPIs開發(fā)跨平臺的移動平臺應(yīng)用程序,其原名稱之為PhoneGap,Adobe收購Nitobi公司后,PhoneGap商標(biāo)保留,代碼貢獻(xiàn)給了Apache基金會,而Apache將其命名為ApacheCallback,其后發(fā)布新版本時,定名為ApacheCordova。
Cordova是一個行動設(shè)備的API接口集,利用JavaScript存取這些接口可以調(diào)用諸如攝影機、羅盤等硬件系統(tǒng)資源。配合上一些基于HTML5、CSS3技術(shù)的UI框架,如jQueryMobile、DojoMobile或SenchaTouch,開發(fā)者得以快速地開發(fā)跨平臺App而不需要編寫任何的原生代碼。
注意到因為Cordova本身仍是一個原生程式,為App打包時依然需要用到這些系統(tǒng)平臺的SDK。
本文我們在win7中搭建 AngularJS+Ionic+Cordova 開發(fā)環(huán)境,包括所涉及的Node.js、Cordova CLI、JDK及Android SDK等。
關(guān)于Android開發(fā)環(huán)境的搭建,以及Cordova的安裝教程:http://www.cnblogs.com/webapi/p/5519468.html
這一篇,我們來使用 AngularJS+Ionic+Cordova 快速地做出我們第一個HybridAPP,開始吧!
安裝Ionic
安裝Cordova
創(chuàng)建APP測試是否安裝成功
開始步驟網(wǎng)站上有: http://ionicframework.com/getting-started/
官網(wǎng)css組件: http://ionicframework.com/docs/components/#header
官網(wǎng) http://ionicframework.com/
國內(nèi) http://www.ionic.wang/
命令行安裝ionic
$ npm install -g cordova ionic
$ ionic start myApp tabs
$ cd myApp$ ionic platform add android$ ionic build androi$ ionic emulate android
$ ionic serve
我們選擇localhost,并把瀏覽器調(diào)成mobile模式;
然后我們進(jìn)入編輯器修改項目文件夾www中的代碼,看到,瀏覽器已經(jīng)可以跟著我們的保存實時刷新,非常好用?。?!