原文地址：http://www.hcoder.net/tutorials/info_79.html
MUI為何誕生
1.性能和體驗的差距，一直是mobile app開發者放棄HTML5的首要原因。
2.瀏覽器天生的切頁白屏、不忍直視的轉頁動畫、浮動元素的抖動、無法流暢下拉刷新、側滑抽屜卡頓等問題，這些都讓HTML5開發者倍感挫敗，尤其拿到Android低端機運行，摔手機的心都有；
另一方面，瀏覽器默認控件樣式又少又丑，制作一個漂亮的控件非常麻煩，也有一些制作簡單的ui框架但性能低下。mui框架有效的解決了這些問題，這是一個可以方便開發出高性能App的框架，也是目前最接近原生App效果的框架。
MUI的定位是：最接近原生體驗的移動App的UI框架
基於mui的定位，產生了mui的幾個特點，輕、小、只涉及UI、只為移動App而生、界面風格原生化。
所以請大家注意，mui有所為有所不為：
1、mui不是jq，不封裝dom操作
與ui無關的mui不做，你願意用jq或zepto就自己用，並不沖突。
但我們並不建議在移動App里引入jq或zepto這些框架，原因如下：
為了性能，層層封裝的框架，尤其是遍歷循環dom時，影響效率，尤其在低端Android手機上，我們費死勁了才把性能以毫秒為單位一點點提升，搞這個的dom框架進來就讓很多努力又付諸東流。
原生JS挺簡單，為何需要jq？
jq的成功當時是因為ie6、7、8、9、10、chrome、ff這些瀏覽器不兼容，讓開發者崩潰，而且pc上瀏覽器性能好，跨平台兼容也不影響性能。但jq根本就不是為手機設計的。
手機上只有webkit瀏覽器（忽略wp，反正mui不支持wp），根本就不需要jq這種封裝框架來操作dom。
而且HBuilder提供了代碼塊來簡化開發，敲dg、dq，直接生成document.getElementById("")、document.querySelectorAll("")，非常快捷方便，而且執行性能非常高，而且沒有瀏覽器兼容問題。
發現很多開發者只會jq，反正想繼續在App里使用jq沒有問題。但也建議大家多學學js本身。
2、mui、HTML5+、5+Runtime的關系說明
mui是一個前端框架，HTML5+是一套HTML5能力擴展規范，HTML5+ Runtime是實現HTML5+規范的強化瀏覽器引擎。
有點類似於bootstrap、w3c和chrome os的關系。
HTML5+規范隸屬於http://www.html5plus.org，定義了HTML5規范中沒有但開發者做App需要的擴展規范。
DCloud的5+ Runtime完整的實現了HTML5+規范。同時5+ Runtime還實現了Native.js，一種通過js調用幾十萬原生API的技術。
為了提升體驗，mui勢必會調用一些5+Rutime的增強能力，主要是plus.webview和plus.nativeUI。
但mui不是要替代HTML5Plus，以后也無計划替代把所有5+的webview api都包一層。
開始體驗MUI
1、安裝新版HBUilder
下載地址: http://www.dcloud.io/
2、新建app項目
3、真機調試及運行
不管是iOS還是Android，不管是模擬器還是真機，都可以與HBuilder連接進行真機運行。
以往開發App，需要改一個界面，然后打包，然后安裝到手機上，然后進入那個界面，看看改對了沒。沒有的話循環這套動作，非常低效。
有了真機運行，改了代碼后保存，手機立即看到效果，如果在手機上運行時發生錯誤，那么日志和錯誤信息也都可以反饋到HBuilder控制台。
有些開發者喜歡alert大法，但事實上在HBuilder的js里敲clog，用打日志來調程序更好。
4、文件結構介紹
|_ css 樣式表文件夾
|_ fonts 字體文件夾
|_ js JavaScript腳本文件夾
|_ index.html 入口文件
基礎布局
一、頭部
核心css mui-bar mui-bar-nav
<header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">hello</h1> </header>
二、主體部分
核心css mui-content
<div class="mui-content"> 主體部分.... </div>
完整代碼演示
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <script src="js/mui.min.js"></script> <link href="css/mui.min.css" rel="stylesheet"/> <script type="text/javascript" charset="utf-8"> mui.init(); </script> </head> <body> <div> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">hello</h1> </header> <div class="mui-content"> 內容部分.... </div> </body> </html>
