移动Web UI库(H5框架)有哪些,看这里就够了_h5框架csdn-程序员宅基地

技术标签: H5框架  web  移动端  组件  UI库  

前言

今年上半年,项目组在项目开发的过程中建立了一套风格统一,组件丰富完善,命名统一规范的PC端UI库,适用于做大型站点,该UI库也是应用到了整个平台的项目中,在各个项目组中进行推广。因为项目的保密性,这里不方便给出实际项目,当然目前这套UI库也不是开源的。

下半年开始,我们偏向做移动Web的同学也开始考虑要梳理出这样一套适用于移动端的UI库,与PC端UI库命名规范保持一致,便于项目组同学在PC项目和移动项目中随意切换,当然,移动端的组件和样式以及交互与PC端都是有很大差别的,比如PC端的下拉菜单,在移动端可能就需要弹出的picker来实现了。鉴于此,我们尽快建立移动端UI库是非常有必要和有意义的,做之前我大量看了下目前移动端的UI库,以及H5框架,比较丰富和切实的了解了更多的应用场景,本文将介绍各个移动端框架,没有技术,只有一个列表,勿喷,谢谢!

移动Web UI库列表

1、Framework7
Framework7 - is a free and open source mobile HTML framework to develop hybrid mobile apps or web apps with iOS & Android native look and feel. It is also an indispensable prototyping apps tool to show working app prototype as soon as possible in case you need to.

2、SUI Mobile
MSUI 是阿里巴巴共享业务事业部UED团队的作品。目的是为了手机H5页面提供一个常用的组件库,减少重复工作。
SUI Mobile 是一套基于 Framework7 开发的UI库。它非常轻量、精美,只需要引入我们的CDN文件就可以使用,并且能兼容到 iOS 6.0+ 和 Android 4.0+,非常适合开发跨平台Web App。

3、FrozenUI
Frozen UI是一个开源的简单易用,轻量快捷的移动端UI框架。基于手Q样式规范,选取最常用的组件,
做成手Q公用离线包减少请求,升级方式友好,文档完善,目前全面应用在腾讯手Q增值业务中。

4、Amaze UI
中国首个开源 HTML5 跨屏前端框架,相比国外框架,Amaze UI 关注中文排版,根据用户代理调整字体,实现更好的中文排版效果;兼顾国内主流浏览器及 App 内置浏览器兼容支持。
Amaze UI 以移动优先(Mobile first)为理念,从小屏逐步扩展到大屏,最终实现所有屏幕适配,适应移动互联潮流。

5、MUI
最接近原生APP体验的高性能前端框架。

6、WeUI
WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。

7、VUX
Vux(读音 [v’ju:z],同views)是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面。
基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在WeUI的基础上定制需要的样式。
vux-loader保证了组件按需使用,因此不用担心最终打包了整个vux的组件库代码。

8、WEEX
Weex 是一套简单易用的跨平台开发方案,能以 web 的开发体验构建高性能、可扩展的 native 应用,为了做到这些,Weex 与 Vue 合作,使用 Vue 作为上层框架,并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API,这样一来,你甚至可以使用其他框架驱动 Weex,打造三端一致的 native 应用。

9、Ant Design Mobile
antd-mobile 是 Ant Design 的移动规范的 React 实现,服务于蚂蚁及口碑无线业务。

10、vue-carbon
基于 vuejs 1.0 开发 material design 风格的移动端 WEB UI 库, 设计资源参考 CARBON FrameWork7。

11、uiKit
uiKit是一款轻量级、模块化的前端框架,可快速构建强大的web前端界面。

12、H-ui
H-ui是轻量级前端框架,简单免费,兼容性好,适用于中国网站。

13、layui
Layui 诞生于2016年金秋,是一款带着浓烈情怀的国产前端UI框架,她追求极简,又不失丰盈的内在,说她是史上最轻量的结晶,似乎并不为过。一切都源自于她对原生态的执着,对前端社区的那些噪杂声音的过滤,以及她本身的精心雕琢。

14、YDUI Touch
YDUI Touch 专为移动端打造,在技术实现、交互设计上兼容主流移动设备,保证代码轻、性能高;使用 Flex 技术,灵活自如地对齐、收缩、扩展元素,轻松搞定移动页面布局;实现强大的屏幕适配布局,等比例适配所有屏幕。什么?用得不开心?轻松切换 px;自定义Javascript组件、Less文件、Less变量,定制一份属于自己的YDUI。

15、sheral
基于sandal(基础sass库)扩展的移动端UI库。具体设计思想可参看sheral——一个方便定制及扩展的UI组件库

16、vonic
一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用。

17、Mint UI
基于 Vue.js 的移动端组件库
Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要。通过它,可以快速构建出风格统一的页面,提升开发效率。
真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大。
考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验。
依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化。即使全部引入,压缩后的文件体积也仅有 ~30kb (JS + CSS) gzip。

18、Muse-UI
基于 Vue 2.0 和 Material Desigin 的 UI 组件库
1.组件丰富
Muse UI 基本实现了 Material Design 设计规范类的所有组件,另外还开发许多的功能性的组件
2.可定制
Muse UI 使用less文件,所有的颜色都有一个变量维护,通过编写 less 文件完成自定义主题,另外组件内部也提供一些修改效果的参数
3.基于 Vue 2.0
Muse UI 基于 Vue2.0 开发,Vue2.0是当下最快的前端框架之一,小巧,api友好,可用于开发的复杂单页应用。

19、jQuery WeUI
jQuery WeUI 是专为微信公众账号开发而设计的一个简洁而强大的UI库,包含全部WeUI官方的CSS组件,并且额外提供了大量的拓展组件,丰富的组件库可以极大减少前端开发时间。
jQuery WeUI 的最大特点是它只提供UI组件,并不会对项目所使用的框架和其他库有任何的限制,几乎可以在任何环境下使用。无论你的项目是基于jQuery,还是 React, Angular, Vue, 你都会发现 jQuery WeUI 能非常方便的和他们结合使用。既是你的项目是一个有很悠久历史的老项目,也几乎可以做到拿来即用。
国外官网:http://jqweui.com/

20、QMUI Web
QMUI Web 是一个专注 Web UI 开发,帮助开发者快速实现特定的一整套设计的框架。
框架主要由一个强大的 Sass 方法合集与内置的工作流构成。通过 QMUI Web,开发者可以很轻松地提高 Web UI 开发的效率,同时保持了项目的高可维护性与稳健。
该框架同步有针对Android和IOS风格的移动UI框架。


后面有优秀的专注于移动端开发的UI库大家可以一起来补充啊!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u013778905/article/details/78632650

智能推荐

前端面试题集锦(一)-程序员宅基地

文章浏览阅读160次。温馨提示:经常看一些面试题,能够很好的对自己进行查缺补漏,检验自己的能力。1、写出transform中2D转换的几大属性及其作用:答:①translate():根据坐标原点,浏览器左上角(0,0)进行X轴、     Y轴上的位置移动    ②rotate():根据X轴进行旋转,正值时为顺时针,负值时为逆时针。(deg单位)    ③scale(parm1,parm2):根据原大小对其进行放大缩小功能,参数一二对应width和height,和X轴、Y轴。    ④skew(parm1,parm

功率的正负,无功,有功功率,容性感性功率_为什么充电功率是负的-程序员宅基地

文章浏览阅读1.8w次,点赞6次,收藏27次。功率当然有正负之分。比如两台并行的发电机发电驱动一台大功率用电设备。如果两台发电机没有协调好的话,很容易负载偏移,就是一台发电机承受负载大,领一台发电机承受负载小,而这种差距是会逐渐变大的,一直变到一台发电机承受所有的负载的同时,还要带另一台发电机转,另一台发电机不承受任何负载,还要被拉着转,这台发电机就属于负功率了。功率有正负之分所谓正负不应以功率消耗为标准,由于功率的定义是单位时间所做_为什么充电功率是负的

echarts图表的使用及用法-程序员宅基地

文章浏览阅读5.2k次。一、介绍ECharts,一个纯 Javascript 的图表库,可以流畅的运行在PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。ECharts 提供了常规的折线图,柱状图,散点图,饼图,K线图,用于统计的盒形图,用于地理数据可视化的地图,热力图,线图,用于关系数据可视化的关系图,treemap,多维数据可视化的平行坐标,还_echarts图表

容器平台选型的十大模式:Docker、DC/OS、K8S 谁与当先?_开源容器平台-程序员宅基地

文章浏览阅读1.2k次。本文由 网易云 发布作者:刘超 来自:网易云基础服务无论是在社区,还是在同客户交流的过程中,总会被问到到底什么时候该用 Docker?什么时候用虚拟机?如果使用容器,应该使用哪个容器平台? 显而易见,我不会直接给大家一个答案,而是希望从技术角度进行分析具体的场景。例如客户是大公司还是小公司,将部署小集群还是大集群,倾向于私有云还是公有云,已经采购了 IaaS 还是没有 IaaS,IT 运维能力..._开源容器平台

Spring MVC 入门(十)Spring MVC 的文件上传和下载_private multipartfile logoimage;-程序员宅基地

文章浏览阅读171次。10.1 文件上传 文件上传是项目开发中最常用的功能。为了实现上传文件,必须将表单的 method 设置为 POST,并将 enctype 设置为 multipart/form-data。这样,浏览器才会把用户选择的文件二进制数据发送给服务器。 设置 enctype 为 multipart/form-d..._private multipartfile logoimage;

bash 脚本中嵌入 expect_bash expect-程序员宅基地

文章浏览阅读7.6k次。在 Ubuntu Terminal\text{Ubuntu Terminal}Ubuntu Terminal 中执行一些命令时总是需要交互式的输入信息,如 Y/N/passwd\text{Y/N/passwd}Y/N/passwd 等等,这可以起到提醒用户的作用,也更加保险。但是有的时候在执行自动化脚本时并不希望一直进行交互式的操作,所以 expect\text{expect}..._bash expect

随便推点

16.忽略大小写的字符串比较_16:忽略大小写的字符串比较-程序员宅基地

文章浏览阅读4.3k次。描述一般我们用strcmp可比较两个字符串的大小,比较方法为对两个字符串从前往后逐个字符相比较(按ASCII码值大小比较),直到出现不同的字符或遇到'\0'为止。如果全部字符都相同,则认为相同;如果出现不相同的字符,则以第一个不相同的字符的比较结果为准(注意:如果某个字符串遇到'\0'而另一个字符串还未遇到'\0',则前者小于后者)。但在有些时候,我们比较字符串的大小时,希望忽略字母的大小_16:忽略大小写的字符串比较

使用labelme制作自己的语义分割数据集_使用labelme训练自己的语义分割流程-程序员宅基地

文章浏览阅读1.4k次,点赞2次,收藏24次。安装labelme在cmd中激活我们使用的python环境,然后使用pip命令安装labelme,命令如下:pip install labelme==3.16.7注意:如果安装最新版本的 labelme,就无须指定版本号(3.16.7就是版本号)打开labelme在cmd中激活我们使用的python环境,然后使用下面的命令,就可以打开labelme软件:labelme界面如下图:使用labelme对数据集进行标注标注之前我们可以先设置一下自动保存:file——>Sav_使用labelme训练自己的语义分割流程

跟随小破站学习java web第十五天_小破站的学习陪伴-程序员宅基地

文章浏览阅读262次。file_upload.jsp<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><h..._小破站的学习陪伴

java解析定长文件入库_java-当直到运行时才知道记录布局时,使用哪种方法来解析具有固定长度记录的文件?...-程序员宅基地

文章浏览阅读392次。我想基于另一个文件中提供的记录布局来解析文件.基本上会有一个定义文件,它是一个用逗号分隔的字段及其各自长度的列表.其中会有很多,每次我运行程序时都会加载一个新的.firstName,text,20middleInitial,text,1lastName,text,20salary,number,10然后,我将显示一个带有提供的列标题的空白表,以及一个通过单击按钮或其他方式添加数据的选项-我尚未决定..._java 文本文件定长记录

week10限时大模拟_B -团队聚餐_s,vb不是在你那边可能在部门聚餐:u女包~、{k:↑二:、:-程序员宅基地

文章浏览阅读178次。B - 团队聚餐题目描述TA团队每周都会有很多任务,有的可以单独完成,有的则需要所有人聚到一起,开过会之后才能去做。但TA团队的每个成员都有各自的事情,找到所有人都有空的时间段并不是一件容易的事情。给出每位助教的各项事情的时间表,你的任务是找出所有可以用来开会的时间段。输入格式第一行一个数T(T≤100),表示数据组数。对于每组数据,第一行一个数m(2 ≤ m ≤ 20),表示TA..._s,vb不是在你那边可能在部门聚餐:u女包~、{k:↑二:、:

利用MyBatis来做多表查询_mapper localdatetime[] 为条件查询-程序员宅基地

文章浏览阅读830次。目录一对一查询一对多查询 动态SQL的使用 标签 标签 标签 先创建好查询方法以及方法实现:在数据库中,建立userinfo表和articleinfo表的关系(一篇文章对应一个作者):结果:可以看到并没有将user 信息查询出来,所以这样的查询方式不对。正确的操作方法如下: 结果: 在上面标签里面的user一定要和Articleinfo里面的user一致,不然就查询不到数据了先创建好查询方法以及方法实现:在数据库中,建立userinfo表_mapper localdatetime[] 为条件查询

推荐文章

热门文章

相关标签