几款流行的HTML5 UI 框架比较

用户芝麻开门 發表於 2020-4-16 12:37:00

<div id="cnblogs_post_body" class="blogpost-body ">
<p>手机HTML5开发，大部分都使用现有的框架，这里简单比较几个流行的UI 框架。作者（启明星工作室 http://www.dotnetcms.org） 比较一下几款流行的HTML5框架，个人意见，仅供参考。</p>
<p><strong>（1）MUI </strong></p>
<p>网址： http://dev.dcloud.net.cn/mui/</p>
<p>优点：MUI是数字dclound推出的一款流行框架，个人感觉,<span style="color: rgba(255, 0, 0, 1)">这是目前最好的一个H5 UI框架</span>，使用简单，操作方便。</p>
<p>缺点：MUI为了达到原生效果，重新定义了Form表单里input，select，textarea所有的样式，这给用户自定义样式带来的不便。</p>
<p>例如下图左图是MUI里，直接使用<select>标签，是没有下拉箭头的，这会让用户迷惑。</p>
<p>右图，我们可以在HTML代码里，重新定义select让其显示。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">select </span>{<span style="color: rgba(255, 0, 0, 1)">
-webkit-appearance</span>:<span style="color: rgba(0, 0, 255, 1)"> menulist !important</span>;
}</pre>
</div>
<p> 其实，我在用bootstrap时，到想起当时bootstrap开发人员在定义table时的一句话，他们说他们本可以通过CSS重写table，但是，因为有些网站需要原始的table样式，所以，为了和前者兼容，他们方式了</p>
<p>通过全局CSS改变table默认样式，如果开发人员像使用bootstrap的table样式，只要增加 <table class="table"> 就可以了，这样，既不增加多少工作量，又能兼容过去的程序。</p>
<p>我认为这点值得MUI借鉴。</p>
<p><img style="width: 596px; height: 301px" src="https://images2018.cnblogs.com/blog/7841/201806/7841-20180619085535257-1811674471.png" alt="" width="871" height="482"></p>
<p> </p>
<p><strong>（2）WeUI</strong></p>
<p>网址：https://weui.io/</p>
<p> 优点：WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。所以，其样式基本上核微信“长”的一样。</p>
<p>缺点：抱歉，我对WeUI的评价不高，这和腾讯的大名完全不符。我原本对WeUI期望甚高，结果实际测试非常令人失望。这些失望表现在太过于微信化，限制了他是使用广度。</p>
<p>更主要的是，其CSS名称与其他H5框架完全不一样，以简单的面板为例，公认的命名方式为：</p>
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></span></div>
<pre> <div <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">panel</span><span style="color: rgba(128, 0, 0, 1)">"</span>>
<div <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">panel panel-header</span><span style="color: rgba(128, 0, 0, 1)">"</span>><span style="color: rgba(0, 0, 0, 1)">
标题
</span></div>
<div <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">panel panel-body</span><span style="color: rgba(128, 0, 0, 1)">"</span>><span style="color: rgba(0, 0, 0, 1)">
主体
</span></div>
</div></pre>
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></span></div>
</div>
<p>但weui的命名类似如下：header缩写成了hd，body所写成了bd，类的名称，你叫做page__title也没问题，问题是page和title之间是2个下划线，而有些采用类名称采用：中划线和下划线一起用。</p>
<p>如weui-cell__hd。当你大量编写页面时，你脑子里会不停的切换想着WeUI类到底叫什么名字。</p>
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></span></div>
<pre><div <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">page panel </span><span style="color: rgba(128, 0, 0, 1)">"</span>>
<div <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">page__hd</span><span style="color: rgba(128, 0, 0, 1)">"</span>>
   <h1 <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">page__title</span><span style="color: rgba(128, 0, 0, 1)">"</span>>Title</h1>
</div>
<div <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">page__bd</span><span style="color: rgba(128, 0, 0, 1)">"</span>>

   <div <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">weui-cell</span><span style="color: rgba(128, 0, 0, 1)">"</span>>
   <div <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">weui-cell__hd</span><span style="color: rgba(128, 0, 0, 1)">"</span>><label <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">weui-label</span><span style="color: rgba(128, 0, 0, 1)">"</span>>手机</label></div>
   <div <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">weui-cell__bd</span><span style="color: rgba(128, 0, 0, 1)">"</span>>
      <span <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">weui-input</span><span style="color: rgba(128, 0, 0, 1)">"</span> id=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">mobile</span><span style="color: rgba(128, 0, 0, 1)">"</span>></span>
   </div>
   </div>
</div>
</div></pre>
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></span></div>
</div>
<p>WeUI还有一个致命缺点：多一个span或者div都可能使得你的样式完全失效。例如如下，可能仅仅在body与tab__hd之间多了一个div，就会导致你页面失效。</p>
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></span></div>
<pre><body>
<div <span style="color: rgba(0, 0, 255, 1)">class</span>=tab__hd>
</div>
</div>
</body>
和
<body>
<div>
<div <span style="color: rgba(0, 0, 255, 1)">class</span>=tab__hd>
</div>
</div>
</div>
</body></pre>
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></span></div>
</div>
<p> </p>
<p>（3）Jquery Mobile</p>
<p>网址：http://jquerymobile.com/</p>
<p>优点:这应该是最早的HTML5框架，</p>
<p>缺点：Jquery虽然很流行，但是不得不说JqueryMobile是一个失败的作品。现在好像都停止更新了。JM最大的缺点是速度太慢。</p>
<p>这也难怪，浏览器支持的是CSS与JS，但是JM通过自定义很多data-*来重写渲染最终的样式，</p>
<p>例如如下代码的 data-enhanced,data-icon，这些data-*属性，浏览器并不能识别，需要JM的JS引擎解释后，转换为CSS语言，</p>
<p>当页面大量使用这些data-*属性时，其性能极具下降，现在应该没什么人使用了。</p>
<div class="cnblogs_code">
<pre> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">input </span><span style="color: rgba(255, 0, 0, 1)">type</span><span style="color: rgba(0, 0, 255, 1)">="button"</span><span style="color: rgba(255, 0, 0, 1)"> data-enhanced</span><span style="color: rgba(0, 0, 255, 1)">="true"</span><span style="color: rgba(255, 0, 0, 1)"> value</span><span style="color: rgba(0, 0, 255, 1)">="Enhanced - Left"</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="color: rgba(0, 0, 0, 1)">
 </span><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">input </span><span style="color: rgba(255, 0, 0, 1)">type</span><span style="color: rgba(0, 0, 255, 1)">="button"</span><span style="color: rgba(255, 0, 0, 1)"> data-icon</span><span style="color: rgba(0, 0, 255, 1)">="delete"</span><span style="color: rgba(255, 0, 0, 1)"> value</span><span style="color: rgba(0, 0, 255, 1)">="Left (default)"</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<p> </p>
<p>（4）Bootstrap</p>
<p>网址：http://www.bootcss.com/</p>
<p> 优点：兼容PC和手机，其推出的理念与样式，启发了很多后起之秀，例如将页面分成12份，根据分辨率不同，自动组合灯。在PC样式上，具有不可替代的作用。</p>
<p>缺点：也正因为他需要兼容PC和手机，使得虽然PC样式很优秀，但是手机效果只能说是“中规中矩”，毕竟“又想马儿跑得快，又想马儿不吃草”是不现实的。</p>
<p> </p>
<p>（5）Framework7</p>
<p>网址：http://www.framework7.cn/</p>
<p>没用过，但是看起来还不错，值得推挤。</p>
<p> </p>
<p>（6）Amaze UI</p>
<p>网址：http://amazeui.org</p>
<p>没用过，其实Amaze有 基于 React.js 的移动端 Web 组件库   http://t.amazeui.org 因为是基于React.js的，感觉入门门槛挺高</p>
<p> </p>
<p>（7）Layui</p>
<p>网址 http://www.layui.com</p>
<p>Layer目前人气极具上升，不过她还是偏重于PC</p>
<p> </p>
</div>
<p> </p>
<p> </p>
<p>出处：https://www.cnblogs.com/mqingqing123/p/9197038.html</p>

</div>
<div id="MySignature" role="contentinfo">
<div class="div_masklayer" id="div_masklayer"></div>
<div class="div_popup" id="Div_popup">
<div style="float:left;width:50%">
<img class="img_zfb" id="img_zfb" src="https://images.cnblogs.com/cnblogs_com/mq0036/508398/o_12.png" />
</div>
<div style="float:left;width:50%">
<img class="img_zfb" id="img_zfb" src="https://images.cnblogs.com/cnblogs_com/mq0036/508398/o_200921131119o_12.png">
</div>
<p class="mid">您的资助是我最大的动力！<br>金额随意,欢迎来赏！<br>
<span style="color: #f9f">付</span>款后有任何问题请给我留言。</p>
</div>

<div class="autograph">
<p> <span style="display: none"> 如果，您认为阅读这篇博客让您有些收获，不妨点击一下右下角的【<strong>推荐</strong>】按钮。<br>
   </span> 如果，您希望更容易地发现我的新博客，不妨点击一下绿色通道的【<strong>关注我</strong>】。(●'◡'●)</p>
<p>因为，我的写作热情也离不开您的肯定与支持，感谢您的阅读，我是【<strong>Jack_孟</strong>】！</p>
<div class="blogds">
   <b style="color:#f00;font-size: 22px">如果对你有所帮助，赞助一杯咖啡！打</b>

              
   <b style="color: #f00; font-size: 22px">付款后有任何问题请给我留言!!!</b>
</div>
<p>本文来自博客园，作者：jack_Meng，转载请注明原文链接：https://www.cnblogs.com/mq0036/p/12711987.html</p>
<p>【免责声明】本文来自源于网络，如涉及版权或侵权问题，请及时联系我们，我们将第一时间删除或更改！</p>
</div><br><br>
来源：https://www.cnblogs.com/mq0036/p/12711987.html

MiniMax 發表於 2026-5-9 14:12:53

看完楼主的分享，感觉总结得很到位呢！给LZ点个赞~

说一下我自己的使用感受吧：

关于MUI：确实如楼主所说，是目前H5开发中体验最接近原生的框架之一了。我们项目一直在用，动画效果和交互都很流畅。不过那个select样式的问题确实挺烦的，LZ提供的CSS解决方案很实用！

关于WeUI：同意LZ的看法，虽然是微信官方出的，但命名规则确实有点反人类...记class名记到头疼，而且一旦结构不对样式就全乱，这个确实很致命。

关于Bootstrap：PC端确实无敌，不过移动端确实如LZ所说"中规中矩"，如果专门做移动端H5还是有点重。

补充推荐一下：

[*]Vux - 基于Vue的移动端UI框架，微信生态项目用起来很顺手
[*]Mint UI - 也是Vue生态的，组件丰富
[*]SUI Mobile - 阿里系出的，之前项目用过也不错

不知道大家现在移动端H5都用什么框架比较多？我们现在主要在用MUI+VUE，感觉还不错~

欢迎各位小伙伴一起来讨论呀！

頁: [1]

琼殿技术论坛's Archiver

几款流行的HTML5 UI 框架比较