移动端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端）

移动端UI框架小汇总相关推荐

vue3使用的移动端UI框架,vue一般用什么ui框架
用vue 一般都配合什么 UI 框架 vue只是一个js库,不算框架,他不限制你使用使用UI框架,理论上你可以使用任意UI框架. 常见的vue的UI框架有:elementUI(饿了么的UI框架),Vu ...
vue3使用的移动端UI框架,vue移动端ui框架哪个好
号称目前最火的前端框架Vue,它有什么显著特点呢? 1.Vue是什么是目前最火的一个前端框架,除了可以开发网站,还可以开发手机App.是前端的主流框架之一,和.一起,并成为前端三大主流框架. 是一套构 ...
Touch UI：高质量的移动端UI框架介绍
Hi,我们做了一款高质量的.免费的移动端UI框架. 经过将两年多开发和项目实践,我们终于把Touch UI开放出来了.这是一套基于vue.js打造的移动端UI框架,包含近百种组件,几乎囊括了开发移动应 ...
aui移动端UI框架
aui 简介 aui 是一套基于原生javascript开发的移动端UI框架.包含常用js API(如:字符校验.本地定时存储.数组对象处理.ajax原生封装.设备信息获取.手势事件-):插件(如:l ...
python 移动ui框架_Touch UI：基于vue的移动端UI框架
Hi,我们做了一款高质量的.免费的移动端UI框架. 经过将两年多开发和项目实践,我们终于把Touch UI开放出来了.这是一套基于vue.js打造的移动端UI框架,包含近百种组件,几乎囊括了开发移动应 ...
基于vue移动端UI框架
1.vux 基于WeUI和Vue(2.x)开发的移动端UI组件库基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在WeUI的基础上定制需要的样式 ...
vue 移动端ui框架
vue移动端ui框架合集转载于:https://www.cnblogs.com/knuzy/p/9508042.html
Vue移动端UI框架mux-ui
移动端UI框架mux-ui 移动端UI框架mux-ui 安装组件 Actionsheet组件按钮Button组件头像Avatar组件 Cell组件 Card组件 Alert组件 Confirm组 ...
微信公众号几种移动端UI框架介绍
微信公众号几种移动端UI框架介绍微信公众号开发,主要是移动端网页的页面开发,在这里推荐3个移动端UI框架:WeUI.SUI和Mint UI. 1. WeUI 1.1 WeUI WeUI是微信官方设 ...

移动端UI框架小汇总

移动端UI框架小汇总相关推荐

最新文章

热门文章