我推薦你去下載一個HBuilder，里面自帶mui開發(fā)框架和demo示例。
創(chuàng)新互聯(lián)建站-云計算及IDC服務(wù)提供商，涵蓋公有云、IDC機房租用、電信內(nèi)江機房、等保安全、私有云建設(shè)等企業(yè)級互聯(lián)網(wǎng)基礎(chǔ)服務(wù)，服務(wù)電話：18980820575
只要你直接新建一個移動APP項目，然后選擇mui模板，根據(jù)示例你可以自己開發(fā)自己的APP；
mui里面的功能很接近安卓、蘋果的功能，滑動、重力傳感、測速等功能mui功能已經(jīng)封裝好了，你只要調(diào)用就行了
[img]jquery mobile和bootstrap都是較好的框架
jQuery Mobile是jQuery 在手機上和平板設(shè)備上的版本。jQuery Mobile 不僅會給主流移動平臺帶來jQuery核心庫，而且會發(fā)布一個完整統(tǒng)一的jQuery移動UI框架。支持全球主流的移動平臺。jQuery Mobile開發(fā)團隊說：能開發(fā)這個項目，我們非常興奮。移動Web太需要一個跨瀏覽器的框架，讓開發(fā)人員開發(fā)出真正的移動Web網(wǎng)站。
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發(fā)更加快捷。它由Twitter的設(shè)計師Mark Otto和Jacob Thornton合作開發(fā)，是一個CSS/HTML框架。Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范，它即是由動態(tài)CSS語言Less寫成。Bootstrap一經(jīng)推出后頗受歡迎，一直是GitHub上的熱門開源項目，包括NASA的MSNBC（微軟全國廣播公司）的Breaking News都使用了該項目。 國內(nèi)一些移動開發(fā)者較為熟悉的框架，如WeX5前端開源框架等，也是基于Bootstrap源碼進(jìn)行性能優(yōu)化而來。
優(yōu)缺點如下：
1在用戶體驗和表現(xiàn)上，原生APP勝出。在這個方面，HTML5仍然面臨著不同移動終端設(shè)備本地瀏覽器的功能接入問題，同時在提供用戶展示圖形界面和數(shù)據(jù)展現(xiàn)的豐富性方面還有不足。
2在跨平臺開發(fā)成本上，HTML5勝出。HTML5采用網(wǎng)絡(luò)通用語言，不用考慮終端設(shè)備或者操作系統(tǒng)的不同。目前，W3C(萬維網(wǎng)聯(lián)盟World Wide Web Consortium，簡稱W3C)正在與汽車業(yè)、出版業(yè)、電視業(yè)進(jìn)行討論，將web引入新的設(shè)備平臺中。隨著平臺逐漸豐富，這方面的成本問題將會日益凸顯。
3在更快速的更新和更強的發(fā)布控制方面，HTML5勝出。與HTML5相比，原生APP不具備的一個優(yōu)勢就是開放性。HTML5是基于Web的，這就意味著沒有一家公司可以成為市場的“看門人”，谷歌不行、蘋果不行、亞馬遜不行、三星也不行，沒有看門人的存在，更新的速度就不會提升、應(yīng)用的收入也不會受到削減。不過，在終端設(shè)備出現(xiàn)創(chuàng)新時，HTML5在新功能的支持上仍有些落后。
4在變現(xiàn)能力方面，原生APP勝出。原生應(yīng)用的分發(fā)平臺，如App Store和Google Play，目前是獲得收入的較為成熟的商業(yè)模式;而HTML5應(yīng)用，除了付費下載以外，還沒有形成其他成熟的商業(yè)模式。
5在技術(shù)人才儲備上，HTML5勝出。HTML5、JavaScript和CSS都是Web常用語言;然而，iOS工程師卻是稀有資源，而且很貴……
對于碎片化挑戰(zhàn)而言，HTML5勝出。盡管二者同樣面臨著嚴(yán)重的碎片化問題，不過HTML5先天具備的跨平臺特性，可以在這方面占據(jù)先機。
HTML5開發(fā)app肯定好啊，下面看看吧：為什么html5語言能夠開發(fā)appHtml5語言能夠開發(fā)手機軟件嗎？對于這一點我們能偶很肯定的回答，html5技術(shù)絕對是能夠開發(fā)手機app的，市面上也有很多手機端應(yīng)用使用了這種語言。為什么html5能夠制作app呢？在介紹html5語言時，小編也有說過，html5是一種用于移動設(shè)備的超文本標(biāo)記語言，另外，html5技術(shù)主要應(yīng)用于手機端引擎的交互設(shè)計，使手機軟件app的側(cè)滑菜單和下拉刷新更加的流暢。
App采用html5技術(shù)開發(fā)的效果Html5語言這種技術(shù)開發(fā)出來的手機應(yīng)用軟件有神惡名特殊的效果呢？第一，對于app應(yīng)用開發(fā)者來說，使用這種語言制作移動端應(yīng)用時，app軟件的代碼更加的清晰明了，只需要用一個模板就可以使app頁面得到顯示，不需要重新畫界線、寫邊框。對于使用者來說，htm5 app應(yīng)用的交互現(xiàn)更好，在使用的過程中無
想了解他們之間的區(qū)別，先看一下各自的簡單定義吧。
app:主要是指application（應(yīng)用程序）
HTML是hypertext markup language（超文本標(biāo)記語言）
主要區(qū)別有
1.應(yīng)用環(huán)境：
手機原生app面前比較流行環(huán)境是Android和IOS兩個版本。
HTML5主要是在瀏覽器中進(jìn)行運行和渲染，其實瀏覽器是App的一種。
2.相關(guān)編程語言：
移動APP的編程語言一般是：c#,Java, c,vb 等...
HTML5的編程語言則是：html5,css3,javascript,php/jsp/asp 等...
3.開發(fā)成本和周期：
移動APP相對來說開發(fā)成本比較高，周期也比較長。html主要應(yīng)用于前端web開發(fā)，開發(fā)制作周期短，費用少。
4.兼容性
手機app在不同的系統(tǒng)中需要開發(fā)不同版本（例如前面所說的Android和IOS），而html5可以跨平臺主要有瀏覽器就可以運行。
5.用戶體驗。執(zhí)行效率，顯示效果，可以調(diào)用的系統(tǒng)權(quán)限都是不一樣的。
在用戶體驗和表現(xiàn)這個方面 APP提供用戶展示圖形界面和數(shù)據(jù)展現(xiàn)的豐富性方面要比HTML5好。而且調(diào)用的系統(tǒng)權(quán)限APP相對權(quán)限要高。
總結(jié)：html5和app各有自己優(yōu)勢和不足，需求者應(yīng)該根據(jù)各自的特點來選擇合適的語言。
1.離線緩存為HTML5開發(fā)移動應(yīng)用提供了基礎(chǔ)
HTML5 Web Storage API可以看做是加強版的cookie，不受數(shù)據(jù)大小限制，有更好的彈性以及架構(gòu)，可以將數(shù)據(jù)寫入到本機的ROM中，還可以在關(guān)閉瀏覽器后再次打開時恢復(fù)數(shù)據(jù)，以減少網(wǎng)絡(luò)流量。
同時，這個功能算得上是另一個方向的后臺“操作記錄”，而不占用任何后臺資源，減輕設(shè)備硬件壓力，增加運行流暢性。
在線app支持邊使用邊下載離線緩存，或者不下載離線緩存;而離線app必須是下載完離線
設(shè)計師要知道，什么時候讓用戶下載離線緩存(注意在線和離線app的區(qū)別)。
2.音頻視頻自由嵌入，多媒體形式更為靈活
原生開發(fā)方式對于文字和音視頻混排的多媒體內(nèi)容處理相對麻煩，需要拆分開文字、圖片、音頻、視頻，解析對應(yīng)的URL并分別用不同的方式處理。
HTML5在這個方面完全不受限制，可以完全放在一起進(jìn)行處理。
設(shè)計師要知道，如果新聞類、微博類、社交類應(yīng)用的信息呈現(xiàn)中實現(xiàn)文字與多媒體混排，而不用專門嵌入webview，將是一件多美好的事情，至少現(xiàn)在原生方式實現(xiàn)起來還有困難。
3.地理定位，隨時隨地分享位置
充分發(fā)揮移動設(shè)備對定位上的優(yōu)勢，推動LBS應(yīng)用發(fā)展。
可以綜合使用GPS、wifi、手機等方式讓定位更為精準(zhǔn)、靈活。
地理位置定位，讓定位和導(dǎo)航不再專屬導(dǎo)航軟件，地圖也不用下載非常大的地圖包，可以通過緩存來解決，到哪兒下哪兒，更靈活。
設(shè)計師要知道，現(xiàn)在嵌入LBS功能的應(yīng)用越來越多，這也是移動設(shè)備與臺式PC相比最大的優(yōu)勢之一，HTML5能把這個優(yōu)勢再度擴大化，好好想想怎么在你設(shè)計的應(yīng)用里用上吧!
4.Canvas繪圖，提升移動平臺的繪圖能力
使用Canvas API可以簡單繪制熱點圖收集用戶體驗資料
支持圖片的移動、旋轉(zhuǎn)、縮放等常規(guī)編輯
Canvas – 2D的繪圖功能支持
Canvas 3D – 3D的繪圖功能支持
SVG – 向量圖支援
設(shè)計師要知道，圖片的移動、旋轉(zhuǎn)、縮放?那都太基礎(chǔ)了，自己畫都是小case，至于怎么用，好好想想吧!
5.專為移動平臺定制的表單元素
瀏覽器中出現(xiàn)的html5表單元素與對應(yīng)的鍵盤：
只需要簡單的聲明 input type=”email” 即可完成對不同樣式鍵盤的調(diào)用，簡捷方便。
設(shè)計師要知道，用的時候記得告訴研發(fā)同事一聲!
6.豐富的交互方式支持
提升互動能力：拖拽、撤銷歷史操作、文本選擇等
Transition – 組件的移動效果
Transform – 組件的變形效果
Animation – 將移動和變形加入動畫支持
設(shè)計師要知道，HTML5提供的交互方式是非常豐富的，至于用不用得上，那是你自己的事兒嘍!
7.HTML5使用上的優(yōu)勢
更低的開發(fā)及維護(hù)成本;
使頁面變得更小，減少了用戶不必要的支出;而且，性能更好使耗電量更低;
方便升級，打開即可使用最新版本，免去重新下載升級包的麻煩，使用過程中就直接更新了離線緩存。
設(shè)計師要知道，用戶想要什么，HTML5能提供給用戶什么。
8.CSS3 視覺設(shè)計師的輔助利器
CSS3支持了字體的嵌入、版面的排版，以及最令人印象深刻的動畫功能。
Selector – 更有彈性的選擇器
Webfonts – 嵌入式字體
Layout – 多樣化的排版選擇
Stlying radius gradient shadow – 圓角、漸變、陰影
Border background – 邊框的背景支持
使用CSS3來完成部分視覺工作，載入速度快，節(jié)省代碼及圖片，也為用戶節(jié)約了帶寬。
設(shè)計師要知道，一個界面里幾十張素材圖的方式已經(jīng)太out啦，趕快讓CSS3幫你偷懶。
9.實時通訊
以往網(wǎng)站由于HTTP協(xié)議以及瀏覽器的設(shè)計，實時的互動性相當(dāng)?shù)氖芟?，只能使用一些技巧來「仿真」實時的通訊效果，但HTML5提供了完善的實時通訊支持。
設(shè)計師要知道，應(yīng)用中嵌入實時通信、信息內(nèi)容進(jìn)行實時提醒，HTML5可以幫你實現(xiàn)。
10.檔案以及硬件支持
不知道大家有沒有發(fā)現(xiàn)，在Gmail等新的網(wǎng)頁程序當(dāng)中，已經(jīng)可以透過拖拉的方式將檔案作為郵件附件?這就是HTML5檔案的功能中的Drag’n Drop和File API。
設(shè)計師要知道，移動應(yīng)用中對于數(shù)據(jù)傳輸?shù)男枨笤絹碓酱?，傳統(tǒng)的路徑選擇方式太過于繁瑣，快來試試HTML5的拖拽上傳功能吧!
11.語意化
語意化的網(wǎng)絡(luò)是可以讓計算機能夠更加理解網(wǎng)頁的內(nèi)容，對于像是搜索引擎的優(yōu)化(SEO)或是推薦系統(tǒng)可以有很大的幫助。
設(shè)計師要知道，HTML5能讓搜索更快速、更準(zhǔn)確。
12.雙平臺融合的app開發(fā)方式，提高工作效率
依照目前iPhone/Android 迅速提升市占率的情勢來看，未來如果想要在先進(jìn)的智慧型手機上撰寫應(yīng)用程式，要不是選擇使用Objective-C + CocoaTouch Framework 撰寫iPhone/iPad 應(yīng)用程式，就是選擇Java + Android Framework 撰寫Android 應(yīng)用程式，如果想要同時支援兩種平臺，勢必要維護(hù)兩套程式碼，對于剛起步的小服務(wù)而言也算是個小有負(fù)擔(dān)的維運成本。
使用HTML5, CSS3 來撰寫Web-based 的應(yīng)用程式，若要同時支援iPhone 及Android，幾乎只需要維護(hù)一份程式碼(少部份要因應(yīng)clients 作修改)，而且未來若有其它行動裝置擁有支援HTML5 的瀏覽器，那同樣的WebApp 直接就多了一個支援平臺。
Google 的系列服務(wù)使用了不少HTML5 中的cache、storage 及database 規(guī)格來做到離線存取程式的效果。因為比起桌面應(yīng)用程式，行動裝置的網(wǎng)路連線更不穩(wěn)定，而且有時在移動中并無網(wǎng)路可以使用，透過這些技術(shù)才能讓使用者即使在 無網(wǎng)路環(huán)境下繼續(xù)使用你的webapp。這說明html5主要服務(wù)對象還是給予web的應(yīng)用，并不會對全部app開發(fā)造成威脅，這樣有利于不同類型應(yīng)用使 用不同的開發(fā)方式，靈活性更強。
重慶分公司
重慶分公司
