H5主要框架优缺点

H5前端框架总结

一：Bootstrap

优点

1．Bootstrap 最大的优势就是它非常流行，流行就代表你有问题就有很多人帮你解

决问题，还有就是界面比较和谐，容易上手，最新 V4 版也开始支持 FlexBox 布局，这

是非常好的升级体验。

2．bootstrap发布已经5个年头了，相对来说是比较成熟的框架，在大量项目中充分

地使用和测试中,体现出一个字：稳。

3．bootstrap拥有完善的文档，这样可以加快学习的进程，减少学习成本，而且它的学习成本也不算很高，只需要有一些html,css,js基础就可，这对于公司培养新人是非常重要的一个参考点。

缺点

1．框架非常的详细，大量的组件样式，这既是优点也是缺点，因为定制化很高，你可以直接拿过来就用。

2．如果有自己特殊的需求，就需要重新定制样式，如果一个网站中有大量的非bootstrap“风格”的样式存在，那么你就需要做大量的css重写，因此也就失去了使用框架

的意义。在很多情况下，最好的就是选择一个有最少样式的框架，因为这样的话比较容易

自定义。添加新的css规则要比复写现有的样式规则方便多了，而且如果你在现有的样式

上添加新的样式，这肯定会增加css文件的大小。

3．class 命名不够语义化，并且各种缩写，最近开始整混合 APP，选框架的时候首选就是它，但之前搞PC 一直没注意，后来搞混合右键属性看它的时候，瞬间一阵凉风袭来，Bootstrap 好小，小到我只好选择别的框架。

二：WeUI

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内

网页开发量身设计，可以令用户的使用感知更加统一。

优点

1．视觉效果，令所有微信用户都能更容易地使用。

2．便捷获取快速使用，降低开发和设计成本, 清晰明确，简洁大方。

3．微信设计团队精心打造，清晰明确，简洁大方。

缺点

框架本身没有考虑到非微信场景下的使用。

三：AUI

AUI2.0的重新架构充分站在项目开发的角度上，以解决布局样式为重点，组件模块化为辅助进行全面优化调整，可以说2.0版本的AUI更合适项目的开发。我们从细节入手，让AUI做出来的APP达到像素及应用的标准，遵循Google Material设计规范，让行里行间的代码发挥她的极致效果。

优点

1．遵循Google Material设计规范，使用MIT开源协议。

更加严谨和简洁的代码规范, rem的使用，完美适应不同分辨率的移动设备。

2．自定义主题皮肤样式，快速定制适合你的主题方案、搭建夜间主题模式及控制主题切换时间等。

3．简单的列表布局确保罗万象，组合式运用、模块化组装、响应式布局，快速完成APP布局样式。

4．全新架构方式，采用容器+布局+组件的方式进行拼装，方便开发者快速上手。

5．全新的iconfont图标库, 完美兼容IOS 5.1+ 、 Android4.2+。

四：Amaze UI

优点

1．Amaze UI 以移动优先（Mobile first）为理念，从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流，而且针对移动平台做了性能和体积方面的优化，大幅度提升用户体验。

2．Amaze UI 含近 20 个 CSS 组件、20 余 JS 组件，更有多个包含不同主题的Web 组件，可快速构建界面出色、体验优秀的跨屏页面，大幅提升开发效率。

3．相比国外框架，Amaze UI 关注中文排版，根据用户代理调整字体，实现更好的中文排版效果，扁平化风格好看，动画效果比bootstrap丰富。

4．Amaze UI 面向 HTML5 开发，使用 CSS3 来做动画交互，平滑、高效，更适合移动设备，让 Web 应用更快速载入。

缺点

不支持IE8...

五：Frozen UI

Frozen UI是一个开源的简单易用，轻量快捷的移动端UI框架。基于手Q样式规范，选

取最常用的组件，做成手Q公用离线包减少请求，升级方式友好，文档完善，目前全面应用在腾讯手Q增值业务中。

优点

1．Web页面，而针对非手Q规范的页面，可通过修改变量定制界面主题。

2．可以按需选择需要的组件，也可以采用cdn和combo的方式按需加载。

3．使用iconfont展示图标，包含了按钮，列表，表单，提示，弹窗等常用组件，新增文本，布局，1px，文字截断，占位，两端留白，两端对齐等解决方案，同时解决了移

动端屏幕适配问题。

4．CSS使用模块化的样式命名和组织规范，使用sass编写css代码。

5．FrozenJS 是针对移动端开发的 js 组件库，其依赖 zepto.js 和 FrozenUI。

6．FrozenJS 包括： basicFrozenJS 的一些基础功能，包括模板引擎、tap 支持等。

7．包含了常用的 UI 组件，dialog 等。

六：SUI

“S UI”是一套基于bootstrap开发的前端组件库，同时它它也是一套设计规范。通过SUI，可

以非常方便的设计和实现精美的页面。

七：MUI

优点

1．GPS很给力，完全实现了秒定。

2．电话中有“便签”和“录音机”功能，特别是便签，很方便，如果别人电话中告诉你一个。

3．号码需要记下来，便签很有帮助。

4．主题丰富，确实能搞得花里胡哨。

缺点

1．电话不支持一键拨号，不支持口袋模式，不支持去电接通后震动。

2．没有自带天气。当然，严格来说这不能算缺点，毕竟不是系统的必要组成部分，只是觉得不方便而已。

3．自带浏览器进入搜索结果页面后，如果想利用页面上的搜索框继续搜其他东西，你会发现这个框没法用。

八：Semantic UI

用于使用手Q规范设计的 Semantic UI是一个用来帮助创建漂亮、响应化、人性化的开发框架

1．简洁的HTML, classes使用类似名词/修饰词关系的自然语言语法，对语序，多连接有直观概念

2．直观的JavaScript: Semantic 用简单的短语来触发功能。

3．在组件中任意设计都是作为一个设置，开发者可以修改。

4．给予了完全的设计自由。高层次变量与直观的集成系统让你用仅仅几行代码改变你的部件的外观与感觉。

九：Foundation

Foundation 是一个易用、强大而且灵活的响应式前端框架，用于构建基于任何设备上的响应式网站、 Web应用和电子邮件。结构语义化、移动设备优先、完全可定制。

1．语义化使用Foundation框架语义化结构，可以编写更干净、更优雅的前端代码

2．通过同一份代码快速、有效适配手机、平板、PC 设备。

3．你可以根据自己项目情况完全自定义定制（定义栅格、颜色、字体大小等）十：UiKit

1．UIkit 基于LESS开发，代码结构清晰简单，易于扩展和维护。