Ionic HTML5移動框架發布Alpha預覽版

2021-09-17 07:57:26 字數 1422 閱讀 3966

ionic是乙個新的、可以使用html5構建混合移動應用的使用者介面框架,它自稱為是「本地與html5的結合」。該框架提供了很多基本的移動使用者介面範例,例如像列表(lists)、標籤頁欄(tab bars)和觸發開關(toggle switches)這樣的簡單條目。它還提供了更加複雜的視覺化布局示例,例如在下面顯示內容的滑出式選單。

\ ionic宣稱他們極度強調效能,並且通過限制dom互動、完全移除jquery以及使用像translate(z)這種特定的硬體加速的css濾鏡觸發移動裝置上gpu——與由動力不足的移動瀏覽器提供的互動相比這種方式提供了硬體加速的互動——等方式使速度最大化。

\ 專注於效能也意味著ionic僅支援ios6及更高版本和android 4.1及更高版本。「在過去一年左右的時間裡,裝置更新換代的速度更快,但是html5框架依然非常保守」,drifty(ionic背後的公司)的cto max lynch說。「對於ionic,我們非常具有侵略性地做出了僅支援新裝置的決定,同時會為觸控手勢、動畫和本地樣式的ui元素新增大量支援」。

\\ 該框架基於流行的來自於google的angularjs框架實現,ionic利用angularjs提**用結構,而ionic本身則關注使用者介面。這意味著所有的檢視、應用路由和控制器都是由angularjs處理的。ionic為它自己的元件提供了一組指令,因此開發者能夠使用angular建立自定義html元素的能力定義ionic ui元件。例如,可以使用「list」指令建立乙個帶有慣性滾動條的ionic移動列表。

\

\\u0026lt;list\u0026gt;\\u0026lt;item ng-repeat=\"item in items\" item=\"item\"\u0026gt;\u0026lt;/item\u0026gt;\\u0026lt;/list\u0026gt;
\

ionic對觸控、檢視間動畫、消毒html以實現安全輸入和xhr呼叫的支援也依賴於angular。

\ ionic提到他們計畫在將來支援其他的框架,例如emberjs和knockout。

\\ 對於該版本的響應包括與試圖使用html5構建本地應用相關的常見爭論,同時還有一些人對該框架不支援android 4.1之前的版本表示擔憂。使用者valentinec這樣寫道:

\ 「雖然我同意支援ios6及以上版本的決定,但是我相信android平台的公升級路線還不是很明確。我現在工作的這個專案就使用中國設計的手機,由於產品之間的差異,很多手機都使用了舊版本的android。希望你們會重新考慮這個決定」。

\\ 當前版本的ionic是乙個alpha版本。作為乙個npm類庫你可以通過命令列安裝它,它會使用ionic種子為你生成需要的專案,專案內容包括使用ionic和angularjs構建乙個應用所需要的所有內容:\

ionic是乙個開源專案,它基於mit許可提供。

\檢視英文原文:ionic html5 mobile framework alpha preview

html5移動應用框架

ratchet 專門針對移動裝置優化的css框架,bootstrap的一員,提供了一些常見控制項的呼叫,比如按鈕 iphone上的segmented control,開關鍵,列表檢視。onsen ui 和ionic很類似,也是最好配合angular js使用,官方寫了幾個不錯的patterns,可以...

移動端h5框架自適應 移動h5自適應布局

轉 問題一,解析度resolution適配 不同螢幕寬度,html元素寬高比和字型大小,元素之間的距離自適應,使用rem單位。問題二,單位英吋畫素數ppi適配 使用rem單位,文字會發虛。段落文字,使用px單位,用media query或js來適配。標題文字可以直接使用rem單位。問題三,裝置畫素比...

WeX5跨端移動開發開源框架

2 高效精緻的ui元件體系,完全基於主流標準和技術 wex5的ui元件體系是完全基於html5 css3 js,非常乾淨標準。wex5的ui元件技術完全是開放主流,基於jquery和bootstrap技術,經wex5高度優化,在移動上的表現很好,接近原生.wex5 的ui基於模組化開發,採用增強的r...