移动端UI框架小汇总

前言：随着前端技术的更新，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体验的高性能前端框架

       官方地址：http://dev.dcloud.net.cn/mui/

       Star:10,605 Fork:5,588

       优点：①原生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保持一致的效果。

      官方地址：http://www.easybui.com/

      优点：①BUI支持两种开发方式，多页开发和单页开发基本保持一致（多页指传统的web开发，类似a标签跳转，可以跟后台语言结合；单页开发不受平台限制，保持一致交互体验）；

                 ②快速融入各种平台，保持原平台的交互操作（包含11类组件可供选择）；

                 ③简单的路由，丰富的切换效果；

                 ④模块化开发，按需加载；

                 ⑤开发一次，多平台适用，适合原生开发以后移植微信等其他平台；

                 ⑥兼容requirejs,seajs模块；

                 ⑦支持第三方打包，Cordova\DCloud\APICloud\AppCan\前海圆舟；

                 ⑧游览器支持：系统自带webkit游览器，魅族游览器，微信，QQ，淘宝，支付宝，钉钉，UC游览器。  

     3、HUI3.0更轻、更快、更漂亮的UI框

     HUI旨在打造最好的移动端UI框架，适用于基于H5+的移动app开发并完美兼容移动端web开发。

     官方地址：http://www.hcoder.net/hui

     优点：①更小、更快、灵活的dom操作，核心CSS文件26K、核心js文件26K，同时提供灵活的选择器及dom操作方法来完成复杂的dom操作；

                ②插件拆分更轻、更快，将较复杂且不常用的组件进行拆分，保证框架核心加载和运行速度；

               ③丰富的组件、界面库，提供了列表、图文排版、表单元素、表单验证、轮播组件、加载、刷新等很多UI库（38个组件）。

     4、WeUI

     WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含表单、基础组件、操作反馈、导航相关、搜索相关五大类。但没有可用的组件。

    官方地址：https://weui.io/

    5、jQuery WeUI--微信公众号开发的瑞士军刀

    官方地址：http://jqweui.com/

    Star:4,025 Fork:1,128

     优点：①专为微信公众账号开发而设计的UI库，包含全部WeUI官方的CSS组件，并且额外提供了大量的拓展组件，可以极大减少前端开发时间；

                ②只提供UI组件，并不会对项目的框架和其他库有任何的限制，几乎可以在任何环境下使用；

                ③提供了总共30+个非常实用的组件：列表、表单、卡片、对话框、下拉刷新等；

                ④简洁而不简单，所有JS组件都是标准的jQuery插件。

     6、AUI--为您提供基于AUI的H5定制服务

     官方地址：http://www.auicss.com/

     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应用

     官方地址：http://m.sui.taobao.org/

     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设计规范。

      官方地址：http://frozenui.github.io/

       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将会是你的首选。

     官方地址：http://framework7.taobao.org/

     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方案

       官方地址：http://nec.netease.com/

       特色功能：①读规范，让你的代码更具有智慧和美丽的方法；

                         ②用框架，选择一份合适的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工具实现，自动代码提示。

     其他：

     layui经典模块化前端框架  https://www.layui.com/ 

     UIkit(YOOtheme团队)兼容IE9以上游览器  http://www.getuikit.net/docs/documentation_get-started.html

   （日期选择器较适用/Datepicker，感觉更适用于PC端）