前言：随着前端技术的更新，Vue,React,Angular等JS类框架不断的深入使用，各种WebApp、混合App、微信H5等应用的发展，各种配套的前端UI框架应运而生。最近，通过在Github、前端社区、掘金等平台上，对当下流行的前端UI框架进行了小小的整理与记录，希望以此来找到适合公司项目改版的移动端UI框架。（PS:前端UI框架通过GitHub star数，社区热度和使用范围进行汇总。）
一、UI框架选取原则
①丰富强大的组件库，能适应多种场景，并且还在不断更新中；
②轻量，无限制，可以结合任何主流JS框架的使用（比如："Vue,Angular,React"），没有特别的使用限制，可以做到拿来即用;
③高性能的CSS3动画，低端手机上依然可以较流畅运行；
④标准稳定的API，基本可以保证版本的透明更新；
⑤详尽完善的官方文档，方便前后端协作；
⑥基于MIT协议发布，免费开源。
二、选取的相关UI框架详情
1、MUI--最接近原生APP体验的高性能前端框架
优点：①原生UI--追求原生UI感觉，以iOS7为基础，补充部分Android特有控件（共24个基本组件）；
②轻量--追求性能体验，MUI不依赖任何第三方JS库，压缩后的JS和CSS文件仅有100+K和60+K;
③流畅体验--下拉刷新，mui通过双webview解决DIV的拖动流畅度问题，回弹动画使用原生动画。
2、BUI--快速开发WebApp
BUI是一个开放式的UI交互框架，用于快速定制开发WebApp，微信公众号，还可以开发混合移动应用（例如：Bingotouch,Link,Cordova,DCloud,ApiCloud,Appcan），钉钉的轻应用，前海圆舟等第三方平台。专注webapp开发，组件非常详细全面，多终端适配，一次开发，多平台适配，完美还原设计稿，在微信、手机游览器，安卓，iOS保持一致的效果。
优点：①BUI支持两种开发方式，多页开发和单页开发基本保持一致（多页指传统的web开发，类似a标签跳转，可以跟后台语言结合；单页开发不受平台限制，保持一致交互体验）；
②快速融入各种平台，保持原平台的交互操作（包含11类组件可供选择）；
③简单的路由，丰富的切换效果；
④模块化开发，按需加载；
⑤开发一次，多平台适用，适合原生开发以后移植微信等其他平台；
⑥兼容requirejs,seajs模块；
⑦支持第三方打包，Cordova\DCloud\APICloud\AppCan\前海圆舟；
⑧游览器支持：系统自带webkit游览器，魅族游览器，微信，QQ，淘宝，支付宝，钉钉，UC游览器。
3、HUI3.0更轻、更快、更漂亮的UI框
HUI旨在打造最好的移动端UI框架，适用于基于H5+的移动app开发并完美兼容移动端web开发。
优点：①更小、更快、灵活的dom操作，核心CSS文件26K、核心js文件26K，同时提供灵活的选择器及dom操作方法来完成复杂的dom操作；
②插件拆分更轻、更快，将较复杂且不常用的组件进行拆分，保证框架核心加载和运行速度；
③丰富的组件、界面库，提供了列表、图文排版、表单元素、表单验证、轮播组件、加载、刷新等很多UI库（38个组件）。
4、WeUI
WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含表单、基础组件、操作反馈、导航相关、搜索相关五大类。但没有可用的组件。
5、jQuery WeUI--微信公众号开发的瑞士军刀
Star:4,025 Fork:1,128
优点：①专为微信公众账号开发而设计的UI库，包含全部WeUI官方的CSS组件，并且额外提供了大量的拓展组件，可以极大减少前端开发时间；
②只提供UI组件，并不会对项目的框架和其他库有任何的限制，几乎可以在任何环境下使用；
③提供了总共30+个非常实用的组件：列表、表单、卡片、对话框、下拉刷新等；
④简洁而不简单，所有JS组件都是标准的jQuery插件。
6、AUI--为您提供基于AUI的H5定制服务
AUI Mobile结合实际项目出发，站在开发者和项目的角度，重新定义AUI框架。
优点：①组件丰富，模块化。使用容器+布局+模块的架构方式，JS组件辅助（27个组件），更自由灵活，更易扩展使用；flex弹性布局更灵活；
②原生体验--遵循Google Material设计规范，标准严谨的语法，更细致的处理，让APICloud开发像素级应用，完美适配各个机型；
③轻量级，高性能--几十K的核心CSS文件，移动设备优先，面向HTML5开发，使用CSS3来做动画交互，平滑、高效，更适合移动设备；
④MIT License--AUI使用MIT协议，用户可以自由使用、复制、修改、合并、出版发行、散布、再授权及贩售AUI及其副本；
⑤开源模板示例--丰富的多行业模板示例；
⑥定制服务--为客户提供更方便快捷的AUI模板定制服务。
提供27个组件，其中，aui-skin.js为控制皮肤主题样式显示的插件。
7、SUI Mobile--轻量，小巧且精美的UI库，方便迅速搭建手机H5应用
Star:5,888
SUI Mobile是一套基于Framework7开发的UI库。它非常轻量、精美，只需要引入我们的CDN文件就可以使用，并且能兼容到iOS 6.0+和Android 4.0+，非常适合开发跨平台Web App。
优点：①轻量的UI库--SUI Mobile非常轻量，核心库压缩Gzip后的JS、CSS网络传输体积总共只有52K，却提供了20+个常用的组件；
②炫酷的iOS风格--组件都是按照iOS风格设计的，所以有很多组件都是iOS独有的炫酷设计；
③功能强大的组件--实现了下拉刷新、日历、省市区选择器等功能非常强大的组件，并且他们在安卓上也是同样好的体验。
其他特点：
①使用rem来定义。rem是相对于html元素的font-size的一个单位，如果html上定义了font-size:20px，则无论在任何地方都是1rem = 20px这个大小不会受到父元素的影响。统一使用rem对页面进行整体缩放，强烈建议大家对需要适应页面大小的任何元素都使用rem为单位来定义；
②SUI PC端中，组件换肤支持自定义下载功能（通过引用不同的CSS文件可以实现换肤功能），也可自定义皮肤。
8、FrozenUI--简单易用，轻量快捷，为移动端服务的前端框架
FrozenUI是一套基于移动端的UI库，轻量、精美、遵从手机QQ设计规范。
Star:2,753
优点：①适用于使用手Q规范的Web页面，而针对非手Q规范的页面，可通过修改变量定制界面主题；
②可以按需选择需要的组件，也可以采用cdn和combo的方式按需加载；
③使用iconfont展示图标，包含了按钮，列表，表单，提示，弹框等常用组件，新增文本，布局，1px,rem,文字截断，占位；
④两端留白，两端对齐等解决方案，同时解决了移动端屏幕适配问题；
⑤CSS使用模块化的样式命名和组织规范，使用sass编写css代码；
⑥兼容android2.3+,iOS 4.0+。
工具方法：常用的工具方法，包括1px边框、rem适配、两端留白等常用场景等解决方案。
9、Framework7--特色的HTML框架，可以创建精美的iOS应用
Framework7是一个开源免费的框架可以用来开发混合移动应用（原生和HTML混合）或者开发iOS&Android风格的WEB APP。也可以用来作为原型开发工具，可以迅速创建一个应用的原型。
Framework最主要的功能是可以使用HTML、CSS和JS来开发iOS应用。Framework7是完全免费开源的。
Framework并不能兼容所有的设备。她只专注于为iOS和和Google Material设计提供最好的体验。
如果你想开发iOS或者Android混合应用(Phonegap)或者你想开发iOS和Google Material风格的WEB APP，那么Framework7将会是你的首选。
Star:4,025 Fork:1,128
优点：①简单易用，像写网页一样简单--使用Framework7创建iOS应用就和搭建一个网站一样简单。你只需要一个基本的HTML布局，并且把Framework7的CSS和JS文件引入即可；
②专注iOS--Framework7是一个针对iOS7的框架。从一开始，她就考虑到如何最方便快捷地实现iOS上各种惊艳的UI组件，以及复杂的动画和灵活的触摸交互；
③UI组件--可以直接使用的UI组件和工具，比如modals、popup、action、sheet、popover、list views、media list、tabs、side panels、layout grid、preloader、form elements等；
④杀手锏--滑动返回，Framework7的一个最大特色就是提供了的滑动返回功能，当你从屏幕左侧向右滑动的时候可以返回到上一个页面。并且，这不是一个A-B动画，她完全跟随你的手指触摸而移动，滑动返回；
⑤自定义--Framework的所有样式文件都被放在了一个个小的less文件中，所以你可以只选择自己需要的部分文件；
⑥原生滚动条--Framework7最大的特点之一就是使用了原生的滚动条。所以你的滚动条会有原生滚动条一样的加速度和回弹，没有任何bug和性能问题；
⑦不依赖第三方框架--Framework7不依赖任何第三方框架。所以它很轻量、高性能和灵活；
⑧高性能的动画--Framework7使用硬件加速的CSS动画以达到最好的性能；
⑨多个视图--Framework7支持多个独立的视图（view），并且你可以不用写任何的JS，只需要在链接上加一个data-view就可以控制每一个视图；
⑩简洁的JS API--使用Framework7不需要学习任何新的知识，她的JS接口非常简洁易用并且功能强大。比如，当你需要弹出一个alert的时候你只需要app.alert("Hello World!");
⑪页面动画--Framework7最主要的一个目的就是让你的应用和iOS7本地应用有相同的外观和交互体验。并且Framework7 是唯一一个提供了1:1精确平滑的页面切换动画的框架；
⑫Dom7--自定义的DOM库，Framework7不依赖任何第三方框架，包括dom操作，包括jquery。她有一个自带的高性能dom库-DOM7。并且，你不需要因为DOM7而学习任何新的知识，因为DOM7的接口和大名鼎鼎的jQuery几乎是一样的；
⑬XHR+Caching+History+Preloading--这几个功能的组合可以让你的应用的路由功能变得非常强大。Framework7通过Ajax来加载新页面，并且可以通过缓存配置让页面的加载速度变得非常快。她会在一定的时间内缓存Ajax请求的结果（默认10分钟），在缓存有效期内不会发送新的请求而是直接从缓存中取出结果。
10、NEC--更好的CSS方案
特色功能：①读规范，让你的代码更具有智慧和美丽的方法；
②用框架，选择一份合适的HTML和CSS基础代码；
③找代码，在这里找到她，或给你启发，或她就是你的；
④装插件，帮助你快速有效的使用代码库。
（1）规范：
你是否常常碰到一下问题：你总是看不懂他写的代码，或者读起来很吃力：你需要改他的代码却无从下手，或总是要去问他这里是什么改了会不会影响其他代码；你和他一起开发一个产品，你总是怕代码和他有冲突或互相影响；你的代码在多次维护任务之后变得越来越臃肿，越来越难以维护。
①CSS规范--一系列规则和方法，帮助你构架并管理好样式；
②HTML规范--一系列建议和方法，帮助你搭建简洁严谨的结构；
③工程师规范--前端页面开发工程师的工作流程和团队协作规范。
（2）框架：
你是否为新建一个空空的html文件或css文件而烦恼？来这里，选择一份适合的基础文件，然后在她的基础上开始你的代码！
①css reset--重置样式，清除游览器默认样式，并配置适合设计的基础样式；
②css function--功能样式，从常用样式方法中抽离，按需使用；
③css media--媒体查询，为不同的设备和大小配置不同的样式；
④css animation--常见动画效果的集合，主要用于效果演示和参考，基于css3;
⑤html template--包含完整头部信息和主体结构的HTML模板；
⑥html email--用于制作邮件内容的HTML模板。
（3）代码库：
这里有各种常见布局、模块、技巧等代码，在这里找到她，或给你启发，或她就是你的。为满足产品对不同的平台和设备的要求，NEC代码库中的代码开发使用了三种版本：兼容、优雅、高级，以下为对这三个版本的详细说明。
a.兼容【1】：支持包括IE6在内的所有主流游览器和设备，UI效果可能有所退化；
b.优雅【2】：在高级游览器中有“高级”效果，在低级游览器中有“兼容”效果，是高级版的“优雅退化”，也是兼容版的“渐进增强”；
c.高级【3】：支持IE9+、Chrome、Safari、Firefox等主流游览器，至此移动设备和所有智能系统，具有优越的UI效果。
①布局--提供各种常见的页面布局方法，比如定宽布局、自适应布局等；
②模块--提供各种常见的网页内容模块，比如导航、菜单、幻灯、图文列表等；
③元件--提供各种常见的网页内容元件，比如按钮、标题、输入框等；
④BUG--展示了游览器的BUG及其解决方案，比如IE双倍边距、3像素问题等；
⑤技巧--提供各种较难或特殊设计的解决技巧，比如垂直居中、自适应等；
⑥动画--使用CSS3实现的各种常见动画效果，比如淡入淡出、弹出等。
（4）插件：
帮助你快速有效的使用代码库（布局、模块、元件）。支持多种常见流行的前端开发软件：Eclipse、Vim、Sublime Text2......
①Eclipse插件--xml文件，通过软件自带的Snippets视图导入，可视化的代码片段插入；
②Eclipse插件2--xml文件，通过软件自带的模板功能导入，自动代码提示；
③Vim插件--snippets文件，通过结合其他插件实现，自动代码提示；
④Sublime插件--snippets压缩文件，通过软件自带的Snippets工具实现，自动代码提示。