幾款流行的HTML5 UI 框架比較

dotnetcms.org工作室發表於2018-06-19
HTMLUI框架

手機HTML5開發，大部分都使用現有的框架，這裡簡單比較幾個流行的UI 框架。作者（啟明星工作室 http://www.dotnetcms.org） 比較一下幾款流行的HTML5框架，個人意見，僅供參考。

（1）MUI 

網址： http://dev.dcloud.net.cn/mui/

優點：MUI是數字dclound推出的一款流行框架，個人感覺,這是目前最好的一個H5 UI框架，使用簡單，操作方便。

缺點：MUI為了達到原生效果，重新定義了Form表單裡input，select，textarea所有的樣式，這給使用者自定義樣式帶來的不便。

例如下圖左圖是MUI裡，直接使用<select>標籤，是沒有下拉箭頭的，這會讓使用者迷惑。

右圖，我們可以在HTML程式碼裡，重新定義select讓其顯示。

select {
    -webkit-appearance: menulist !important;
}

 其實，我在用bootstrap時，到想起當時bootstrap開發人員在定義table時的一句話，他們說他們本可以通過CSS重寫table，但是，因為有些網站需要原始的table樣式，所以，為了和前者相容，他們方式了

通過全域性CSS改變table預設樣式，如果開發人員像使用bootstrap的table樣式，只要增加 <table class="table"> 就可以了，這樣，既不增加多少工作量，又能相容過去的程式。

我認為這點值得MUI借鑑。

 

（2）WeUI

網址：https://weui.io/

 優點：WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊為微信內網頁和微信小程式量身設計，令使用者的使用感知更加統一。所以，其樣式基本上核微信“長”的一樣。

缺點：抱歉，我對WeUI的評價不高，這和騰訊的大名完全不符。我原本對WeUI期望甚高，結果實際測試非常令人失望。這些失望表現在太過於微信化，限制了他是使用廣度。

更主要的是，其CSS名稱與其他H5框架完全不一樣，以簡單的皮膚為例，公認的命名方式為：

 <div class="panel">
<div class="panel panel-header">
標題
</div>
<div class="panel panel-body">
主體
</div>
</div>

但weui的命名類似如下：header縮寫成了hd，body所寫成了bd，類的名稱，你叫做page__title也沒問題，問題是page和title之間是2個下劃線，而有些採用類名稱採用：中劃線和下劃線一起用。

如weui-cell__hd。當你大量編寫頁面時，你腦子裡會不停的切換想著WeUI類到底叫什麼名字。

<div class="page panel ">
    <div class="page__hd">
        <h1 class="page__title">Title</h1> 
    </div>
    <div class="page__bd"> 

      <div class="weui-cell">
        <div class="weui-cell__hd"><label   class="weui-label">手機</label></div>
        <div class="weui-cell__bd">
          <span class="weui-input" id="mobile"  ></span>
        </div>
      </div>        
  </div>        
</div>

WeUI還有一個致命缺點：多一個span或者div都可能使得你的樣式完全失效。例如如下，可能僅僅在body與tab__hd之間多了一個div，就會導致你頁面失效。

<body>
<div class=tab__hd>
</div>
</div>
</body>
和
<body>
<div>
<div class=tab__hd>
</div>
</div>
</div>
</body>

 

（3）Jquery Mobile

網址：http://jquerymobile.com/

優點:這應該是最早的HTML5框架，

缺點：Jquery雖然很流行，但是不得不說JqueryMobile是一個失敗的作品。現在好像都停止更新了。JM最大的缺點是速度太慢。

這也難怪，瀏覽器支援的是CSS與JS，但是JM通過自定義很多data-*來重寫渲染最終的樣式，

例如如下程式碼的 data-enhanced,data-icon，這些data-*屬性，瀏覽器並不能識別，需要JM的JS引擎解釋後，轉換為CSS語言，

當頁面大量使用這些data-*屬性時，其效能極具下降，現在應該沒什麼人使用了。

 <input type="button" data-enhanced="true" value="Enhanced - Left">
  <input type="button" data-icon="delete" value="Left (default)">

 

（4）Bootstrap

網址：http://www.bootcss.com/

 優點：相容PC和手機，其推出的理念與樣式，啟發了很多後起之秀，例如將頁面分成12份，根據解析度不同，自動組合燈。在PC樣式上，具有不可替代的作用。

缺點：也正因為他需要相容PC和手機，使得雖然PC樣式很優秀，但是手機效果只能說是“中規中矩”，畢竟“又想馬兒跑得快，又想馬兒不吃草”是不現實的。

 

（5）Framework7

網址：http://www.framework7.cn/

沒用過，但是看起來還不錯，值得推擠。

 

（6）Amaze UI

網址：http://amazeui.org

沒用過，其實Amaze有 基於 React.js 的移動端 Web 元件庫   http://t.amazeui.org 因為是基於React.js的，感覺入門門檻挺高

 

（7）Layui

網址 http://www.layui.com

Layer目前人氣極具上升，不過她還是偏重於PC

 

相關文章