用于HTML5開發(fā)的7大移動開發(fā)框架，你用過幾個？

著HTML5開發(fā)的火熱，如今國內(nèi)各行業(yè)都開始進入HTML5領(lǐng)域，搶占紅利，造就了職場新貴，HTML5開發(fā)成了一輪企業(yè)熱招崗位。初學(xué)HTML5你并不需要任何的原生應(yīng)用編程經(jīng)驗，你只需要一些HTML、CSS和JavaScript的知識。不可否認HTML5將會越來越好，因為移動端的硬件也會越來越強，其實你手機上的很多應(yīng)用已經(jīng)悄悄的使用混合式開發(fā)了，這也許就是HTML5的魅力所在吧。

目前已經(jīng)有很多的框架可以幫助你開發(fā)跨平臺的移動應(yīng)用，在這篇文章中，千鋒武漢HTML5培訓(xùn)的老師只介紹最牛的7個HTML5移動開發(fā)框架。

1、IONIC

IONIC是目前最有潛力的一款HTML5手機應(yīng)用開發(fā)框架。通過SASS構(gòu)建應(yīng)用程序，它提供了很多UI組件來幫助開發(fā)者開發(fā)強大的應(yīng)用。它使用JavaScript MVVM框架和 AngularJS來增強應(yīng)用。提供數(shù)據(jù)的雙向綁定，使用它成為Web和移動開發(fā)者的共同選擇。即將發(fā)布的AngularJS 2.0將會專注于移動開發(fā)，相信IONIC一定會取得不錯的成就。

IONIC的開發(fā)團隊將盡快開發(fā)出一種通過IONIC creator提供開發(fā)者快速創(chuàng)建IONIC應(yīng)用的方式。我們將很快就會看到一個支持拖拉功能的可視化開發(fā)工具，幾分鐘內(nèi)開發(fā)一個app將成為可能。

2、Mobile Angular UI

Mobile Angular UI是使用bootstrap 3和AngularJS的響應(yīng)式移動開發(fā)HTML5框架。

Mobile Angular UI的關(guān)鍵字有：

Bootstrap 3

AngularJS

Bootstrap 3 Mobile組件，比如switches, overlays和sidebars，這些都是bootstrap中沒有的。

AngularJS modules，比如 angular-route, angular-touch 和 angular-animate

響應(yīng)式媒體查詢是將bootstrap作為單獨的文件，你只需要包含你所需要的東西。Mobile Angular UIu并不包含任何jQuery依賴，你需要做的只是通過一些AngularJS指令創(chuàng)建友好的用戶體驗。

詳細了解可以看一看the Mobile Angular UI demo page，上面有Mobile Angular UI的實踐，如果你想了解的更深入一些，我建議你讀一讀 getting started with Mobile Angular UI。

3、Intel XDK

Intel XDK 是Inter開發(fā)的一款跨平臺開發(fā)工具，我們可以很容易的通過Intel XDK開發(fā)應(yīng)用，你需要做的只是下載他們的應(yīng)用開發(fā)工具，有Linux、Windows和Mac版，它還提供了很多個開發(fā)框架，比如Twitter bootstrap， jQuery Mobile和Topcoat。

4、AppceleratorTitanium

Appcelerator’s Titanium不同于其它框架的是，它是一個開源的框架。

Titanium是混合式移動應(yīng)用開發(fā)的一站式解決方案，你只需要下載Titanium studio就可以解決所有的事情，Titanium SDK包含了很多手機平臺的APIs和后端云服務(wù)。

Titanium使用 Alloy，Alloy是一個快速開發(fā)的手機應(yīng)用MVC框架，模塊式開發(fā)可以大大減小開發(fā)時間，提高代碼復(fù)用。

Titanium studio 還提供了一些code模板。

5、Sencha Touch

Sencha Touch同樣也是HTML5手機應(yīng)用跨平臺開發(fā)框架，運行iOS/Android/Blackberry。它已經(jīng)誕生很多年了，現(xiàn)在已經(jīng)成為很常用的混合式編程開發(fā)框架。

Sencha Touch可以讓你的Web App看起來像Native App。美麗的用戶界面組件和豐富的數(shù)據(jù)管理，全部基于最新的HTML5和CSS3的 WEB標準，全面兼容Android和Apple iOS設(shè)備。

下面是千鋒武漢HTML5培訓(xùn)的老師總結(jié)出的幾點特性：

基于最新的WEB標準——HTML5，CSS3，JavaScript。整個庫在壓縮和gzip后大約80KB，通過禁用一些組件還會使它更小。

支持世界上最好的設(shè)備。Beta版兼容Android和iOS，Android上的開發(fā)人員還可以使用一些專為Android定制的主題。

增強的觸摸事件。在touchstart、touchend等標準事件基礎(chǔ)上，增加了一組自定義事件數(shù)據(jù)集成，如tap、swipe、pinch、rotate等。

數(shù)據(jù)集成。提供了強大的數(shù)據(jù)包，通過Ajax、JSONp、YQL等方式綁定到組件模板，寫入本地離線存儲。

6、Kendo UI

Telerik’s Kendo UI 是一個強大的框架用于快速HTML5 UI開發(fā)。基于最新的HTML5、CSS3和JavaScript標準。

Kendo UI包含了開發(fā)現(xiàn)代JavaScript開發(fā)所需要的所有一切，包括：強大的數(shù)據(jù)源，通用的拖拉(Drag-and-Drop)功能，模板，和UI控件。

7、PhoneGap

PhoneGap 恐怕是最老的一個框架了，相信很多人都已經(jīng)聽說過甚至使用過它，但是PhoneGap是基于開源的 Cordova 商業(yè)版本。

第一段PhoneGap代碼是在2008年8月的iPhoneDevCamp上寫成的。創(chuàng)建它的一個主要動力是基于一個幾乎每一個單獨的iPhone開發(fā)新手都要面對的簡單事實：Objective-C是一個對Web開發(fā)人員來說非常陌生的環(huán)境，并且Web開發(fā)人員的數(shù)量遠遠多于Objective-C開發(fā)人員的數(shù)量。

問題是，是否有人可以開發(fā)一個框架，讓W(xué)eb開發(fā)人員可以利用他們所有的HTML、CSS和JavaScript知識，而且仍舊可以同iPhone的重要本地應(yīng)用程序(如攝像頭和通訊錄)交互呢？

就在那一年，PhoneGap獲了獎并開始支持Android平臺，對人數(shù)不斷增長的移動開發(fā)人員變得越來越有用，這些人員需要在更多的平臺上獲得代碼支持。

大家可以到PhoneGap documentation官方文檔開始對PhoneGap的學(xué)習(xí)。

總結(jié)

在這篇文章中，千鋒武漢HTML5培訓(xùn)的老師跟大家討論了一些HTML5的移動開發(fā)框架，HTML5正式發(fā)布之后，很多開發(fā)者對HTML5又重燃了希望，相信這是個美好的時代，相信它會給我們帶來更多的驚喜。

動端web開發(fā)框架、類庫和UI組件簡介，有需要的收藏一波。

react-native

一個基于React的創(chuàng)建原生APP的框架

html5-boilerplate

一個用來構(gòu)建快速、強大、可適配的webapp的前端模板

ionic

領(lǐng)先的HTML5移動開發(fā)框架和SDK，利用你所熟知的web技術(shù)構(gòu)建難以置信的移動應(yīng)用，是AngularJS最好的朋友。

weui

由微信官方設(shè)計團隊為微信Web開發(fā)量身打造的框架，包含移動web應(yīng)用開發(fā)中有用的組件和模塊

hammer.js

實現(xiàn)多點觸控的javascript庫

weex

阿里推出的跨平臺的移動端開發(fā)框架，具有輕量級、可擴展和高性能的特點

fastclick

一個消除移動端瀏覽器上的點擊事件的300ms的延遲

zepto

Zepto.jsisaminimalistJavaScriptlibraryformodernbrowsers,withajQuery-compatibleAPI

vux

基于Vue和Weui的移動端框架

wepy

騰訊團隊推出的小程序組件化開發(fā)框架

NativeScript

NativeScript是一個利用JavaScript等WEB技術(shù)創(chuàng)建原生APP的框架

Framework7

功能強大的創(chuàng)建iOS&AndroidAPP的HTML框架

mui

最接近原生APP體驗的高性能框架

ratchet

用簡單的HTML,CSS,和JavaScript組件創(chuàng)建移動應(yīng)用

react-native-elements

ReactNativeUI組件庫

mint-ui

基于vue.js的移動端UI框架

amazeui

移動端優(yōu)先的開源HTML5跨屏前端框架，俗稱妹子UI

jquery-mobile

jQuery移動開發(fā)框架

Mars

騰訊移動Web前端知識庫

interact.js

JavaScriptdraganddrop,resizingandmulti-touchgestureswithinertiaandsnappingformodernbrowsers(andalsoIE8+)

vant

有贊開發(fā)的基于Vue.js2.0的UI組件庫

OnsenUI

用來構(gòu)建混合移動端APP的HTML5UI框架

muse-ui

基于Vue2.0和MaterialDesigin的UI組件庫

SUI-Mobile

SUIMobile(MSUI)是由阿里巴巴國際UED前端出品的一個手機端的UI庫，輕量精美。更多信息請參考官網(wǎng)

ant-design-mobile

一個可配置的移動端UI框架

TouchSwipe-Jquery-Plugin

TouchSwipeisajqueryplugintobeusedwithjQueryontouchinputdevicessuchasiPad,iPhoneetc.

jquery-weui

創(chuàng)建微信混合app的UI庫

jquery-ui-touch-punch

AduckpunchforaddingtoucheventstojQueryUI

device.js

Device.jsmakesiteasytowriteconditionalCSS_and/or_JavaScriptbasedondeviceoperatingsystem(iOS,Android,Blackberry,Windows,FirefoxOS,MeeGo),orientation(Portraitvs.Landscape),andtype(Tabletvs.Mobile).

react-native-ui-kitten

可定制和可重用的react-native組件包

iview-weapp

一套高質(zhì)量的微信小程序UI組件庫

vonic

基于Vue.js和ionic組件的SPAUI框架

brick

UIWebComponentsforModernWebApps

app

App.js是一個用來創(chuàng)建移動webapp的輕量級JavaScriptUI框架，可以表現(xiàn)得像原生APP而又不犧牲性能和優(yōu)雅

Lungo.js

一個給開發(fā)者提供的設(shè)計、構(gòu)建、分享跨設(shè)備應(yīng)用的框架

AlloyFinger

騰訊Web前端團隊推出的輕量級的多點觸控手勢庫

FooTable

jQueryplugintomakeHTMLtablesresponsive

vue-ydui

一個基于Vue2.x的移動端組件庫

wechat-h5-boilerplate

為騰訊微信優(yōu)化的H5動效模板，幫助你快速構(gòu)建全屏滾動型H5頁面

slip

通過滑動和拖動手勢操作列表的UI庫

mobi.css

一個關(guān)注于移動端的輕量級的、靈活的css框架，

vue-touch

Vue.js的Hammer.js包裝器

QuoJS

針對移動設(shè)備的微型JavaScript庫

pressure

:point_down::boom:JavaScriptlibraryforhandlingbothForceTouchand3DTouchontheweb

junior

一個創(chuàng)建類似原生APP的html5應(yīng)用的前端框架

vum

為手機webapp打造的基于Vue.js構(gòu)建的UI框架

mobiscroll

ThecustomizablemobileUIlibraryfortouchdeviceslikesmartphonesandtablets

zingtouch

一個JavaScript觸摸手勢檢測庫

montage

montagejs是一個優(yōu)雅的、開源的HTML5框架。它提供了模塊化組件，雙向數(shù)據(jù)綁定，以及更多功能

pushy

Pushyisaresponsiveoff-canvasnavigationmenuusingCSStransforms&transitions

GMU

基于zepto的ui組件庫，適用于移動端

flex.css

flex.cssis是一個聲明式的布局框架，能夠兼容多個MVVM框架和瀏覽器

mobilebone

單頁切換骨架。適用于移動webAPP,Hybrid混合APP,Phonegap開發(fā),無兼容要求單頁PC應(yīng)用等

jquery.pep.js

Pep,alightweightpluginforkineticdragonmobile/desktop

Cloudajs

CloudaFramework-一個針對移動WebApp的實時JavaScriptRIA框架

Jo(0.5.0)是一個輕量級的(~16K)創(chuàng)建HTML5應(yīng)用的外殼。可以和PhoneGap,Chrome,Safari,Opera,FireFox,iOS,Android,BlackBerry10,Tizen,&WindowsPhone8+一起工作

touchui

高質(zhì)量移動端UI框架

iosselect

一個簡潔好看的模仿ios的webapp下拉菜單

mand-mobile

面向金融場景的Vue移動端UI組件庫，豐富、靈活、實用，快速搭建優(yōu)質(zhì)的金融類產(chǎn)品

tabris-js

tabris.js-用JavaScript開發(fā)原生應(yīng)用

aui

移動端UI快速布局解決方案（APICloudUI框架）

vue-carbon

基于vue開發(fā)的materialdesignui庫

cordova-plugin-ibeacon

AniBeaconpluginforPhonegap/Cordova3.xandupwards.SupportsbothiOSandAndroid(contributionsarewelcome)

touch.code.baidu.com

TouchOfficalSite

bindingx

阿里團隊推出的weex和ReactNative上富交互問題的一種解決方案

jQuery-Touch-Events

AcollectionofmobileeventpluginsforjQuery.

TinyNav.js

Responsivenavigationpluginthatweighsjust443bytes

Jingle

JingleUI是一個基于html5、css3開發(fā)輕量級的移動webapp框架，提供一些基本交互方式，幫助您更方便的開發(fā)移動應(yīng)用。

light7

一個輕量級的易用的移動端UI框架

framework7-vue

基于Framework7和Vue構(gòu)建iOS和Android應(yīng)用

ydui

一只注重審美，且性能高效的移動端&微信UI

slip.js

移動端跟隨手指滑動組件，零依賴。

wepayui

微信支付場景化組件，wepayui源碼

BlendUI

BlendUI是Clouda+中的重要組成部分，他能讓webapp的用戶界面體驗和交互能和Native媲美

toucher

面向移動端的手勢類庫

touchjs

一個移動端手勢檢測庫

thumbs.js

Addtouchsupporttoyourbrowserwiththumbs.js-asmall,transparent,andsyntax-lesslibrary.

JMUI

移動Web開發(fā)UI組件庫

面向Mobile的極致JavaScript庫

react-ui

為React打造的一套ionic風(fēng)格的可復(fù)用UI組件庫

Zoomage.js

Zoomage.js-一個通過手勢縮放圖片的庫

touchSlider

TouchSliderjQueryPlugin

TML5從入門到精通，兄弟連京修隨堂筆記（一）HTML的框架結(jié)構(gòu)，每日都有新內(nèi)容，訂閱走一波

一個瀏覽器窗體可以通過幾個頁面的組合來顯示。我們可以使用框架來完成(frames)這項工作。(框架可以把HTML文檔分為多個頁面)。也就是將一個瀏覽器文檔窗口分隔成多個窗口，每個窗口都可以顯示一個獨立的網(wǎng)頁文件。

框架頁使用了表格的方式組合，可以分為數(shù)行與數(shù)列。

框架的優(yōu)點

重載頁面時不需要重載整個頁面，只需要重載頁面中的一個框架頁(減少了數(shù)據(jù)的傳輸，增加了網(wǎng)頁下載速度)。

方便制作導(dǎo)航欄。

框架的缺點

會產(chǎn)生很多頁面，不容易管理。

不容易打印。

瀏覽器的后退按鈕無效。

代碼復(fù)雜,無法被一些搜索引擎索引到。

多數(shù)小型的移動設(shè)備（PDA 手機）無法完全顯示框架。

多框架的頁面會增加服務(wù)器的http請求。

由于上面諸多缺點，因此不符合標準網(wǎng)頁設(shè)計的理念.已被標準網(wǎng)頁設(shè)計拋棄

HTML框架標簽

<frameset>標簽 -- 代替body標簽定義了框架頁,并且定義了框架將分為多少行與多少列。常用屬性如下:

cols -- 定義了框架含有多少列與列的大小(每個值使用逗號分隔),取值為象素px或者百分比%

rows -- 定義了框架含有多少行與行的大小(每個值使用逗號分隔),取值為象素px或者百分比%

border -- 定義frame定義的框架頁的邊框(單位像素),使用css實現(xiàn)

frameborder -- 定義框架頁是否邊框(此屬性應(yīng)寫在frame標簽內(nèi)部,不應(yīng)在此出現(xiàn))

framespacing -- 定義框架頁之間間隔的距離,使用css實現(xiàn)

<noframes>標簽

可為那些不支持框架的瀏覽器顯示文本，和<body>組合使用

<iframe>標簽

創(chuàng)建一個包含另外一個文檔的內(nèi)聯(lián)框架，iframe標簽內(nèi)的內(nèi)容可以做為瀏覽器不支持iframe標簽時顯示。

frame標簽 -- 定義frameset標簽中每個框架頁的內(nèi)容

frame標簽是單獨出現(xiàn)的，<frame />

常用屬性:

frameborder -- 定義了內(nèi)容頁的邊框,取值為(1|0),缺省值為1

1 -- 在每個頁面之間都顯示邊框

0 -- 不顯示邊框

name -- 在一個框架頁鏈接到另一框架頁時使用(另一個框架頁可以使用target定義鏈接頁)

noresize -- 定義了瀏覽者是否可以通過拖拽改變框架頁尺寸,取值為(noresize)

scrolling -- 定義是否有滾動條,取值為(yes|no|auto),缺省值為auto

yes -- 顯示滾動條

no -- 不顯示滾動條

auto -- 當(dāng)需要時再顯示滾動條

src -- 定義了內(nèi)容頁URL

border – 設(shè)置邊框粗細

HTML框架示例

<head>

<title>使用框架定義后臺管理平臺模型</title>

</head>

</frameset>

<body><p>您的瀏覽器不支持框架，請升級瀏覽器</p></body>

</noframes>

</frameset>

</html>

在線咨詢

上一篇：HTML URL編碼
下一篇：html開發(fā)筆記08- 字體樣式與顏色（標簽的屬性）

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

用于HTML5開發(fā)的7大移動開發(fā)框架，你用過幾個？

您的項目需求