淘宝SUI Mobile框架

官网地址:http://m.sui.taobao.org/

SUI Mobile 是一套基于 Framework7 开发的UI库。它非常轻量、精美,只需要引入我们的CDN文件就可以使用,并且能兼容到 iOS 6.0+ 和 Android 4.0+,非常适合开发跨平台Web App。

轻量的UI库

SUI Mobile 非常轻量,核心库压缩Gzip后的JS、CSS网络传输体积总共只有52K,却提供了20+个常用的组件。

对于只有HTML&CSS的组件,你只需要复制HTML代码既可以使用。他的大部分JS组件都是独立的 Zepto 插件,并且提供了 Zepto/jQuery 风格的API,你将会非常熟悉这种方式。

移动端web框架 Frozen UI

官网地址:http://frozenui.github.io/

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

非手Q用户不能使用离线包而直接请求核心css也仅28k,另外也可以采用cdn和combo的方式按需加载。

CSS组件包括按钮,列表,表单,通知,提示条,弹出框,选项卡,等级图标,角标,红点,1px解决方案等。

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

FrozenJS 是针对移动端开发的 js 组件库,其依赖 zepto.js 和 FrozenUI,支持seajs模块化和非模块化两种方式。

FrozenJS 包括: basic:FrozenJS 的一些基础功能,包括模板引擎、tap 支持等。 ui:主要是一些触屏常用的 UI 组件,包括 dialog 等。 effect:非常用的特效库,特殊场景使用到是可以单独调用。

兼容android 2.3 +,ios 4.0 + 。

移动WebApp开发框架 Clouda

官网地址:http://clouda.baidu.com/

Clouda是基于node.js的Webapp开发框架,在使用Clouda时需要安装node.js和MongoDB。

Clouda 是百度推出的一款面向资深开发者的WebApp开发框架。在Clouda中开发app,可以在多终端下实现数据同步、任务迁移。并且Clouda支持面向数据的编辑模式,根据数据的变化自动实现界 面实时更新,开发者不需描述跃迁过程。它的核心在于云、端使用统一的Javascript语言,可以同时运行在浏览器、iOS、Android以及百度框中。另外,clouda app可以同时开发服务端和客户端,客户端的数据与云端实时同步,其内部数据也可供搜索引擎检索,解决app孤岛以及99.9%长尾应用只有30%分发量 的搜索分发问题。

HTML 移动端框架 Framework7

官网地址:http://framework7.io/

Framework7 或者叫 F7 是全功能的绑定 iOS 7 应用的 HTML 框架。Framework7 是免费开源的 HTML 移动端框架,用来开发混合移动端应用或者 iOS 7 的 Web 应用,并且带有 iOS 7 的原生外观和感觉。Framework7 也是独立的原型应用工具。

Framework7 使用 Javascript,CSS 和 HTML 来创建 iOS 7 应用,支持多个平台的迁移(PhoneGap),但是不是支持所有平台,主要还是针对 iOS 7。

Amaze UI框架

官网地址:http://amazeui.org/

Amaze UI 开发思路

通过拆分、封装一些常用的网页组件,以规范化采用云适配平台开发的移动网站,统一用户体验逐渐形成的。

1、语义化

Amaze UI开发遵循语义化原则,意图通过类名(class)等信息直观传达元素的功能角色,同时关注结构、样式、行为分离,降低各部分的耦合程度,提高开发效率和可维护性。

2、移动优先,跨屏适配

遵循 “移动优先(Mobile First)”、“渐进增强(Progressive enhancement)”的理念,可先从移动设备开始开发网站,逐步在扩展的更大屏幕的设备上,专注于最重要的内容和交互,适应移动互联潮流。轻松创建跨屏适配的网页。

3、模块化,按需定制

AMUI使用LESS编写样式,结构良好,易扩展,易维护;使用Seajs模块化开发、组织 JavaScript,自然、优雅。

4、专注于HTML5

AMUI 基于轻量的Zepto.js开发,有效减少为兼容旧浏览器的臃肿代码;基于 CSS3 的交互效果,平滑、高效。AMUI专注于现代浏览器(支持HTML5),不再为过时的浏览器耗费资源,为更有价值的用户提高更好的体验。

5、本地化支持

相比国外的前端框架,Amaze UI专注解决中文排版优化问题,根据操作系统调整字体,实现最佳中文排版效果;针对国内主流浏览器及App内置浏览器提供更好的兼容性支持,为你节省大量兼容性调试时间。

Amaze UI 的开发历程

云适配创始人陈本峰:这个项目最开始是作为内部使用工具来开发的。我们云适配本身就是一个前端产品,Amaze UI能帮我们降低开发时间和成本,用标准化作业流程,能有更高的产出。

从云适配创立之初,我们就开始积累自己的前端框架,同时也借鉴了Bootstrap等国外框架的优点。在内部使用过程中,大家一致反映不错,我们就希望把这个产品开源,希望分享给更多的人,也希望更多的人来贡献代码,来共建中国前端开源生态环境。在最近几个月,我们投入人力将这个项目整理成一个开源产品。目前有2个软件工程师全职在开发这个产品,还有一个设计,一个PM也在尽力配合。产品发布之后,我们会投入更多全职的工程师来专心打磨这个产品,同时也呼吁更多的前端开发爱好者共同来完善这个框架。

Amaze UI的目标

帮助开发者提高开发效率,提升网页效果,即用最短的时间做出最赞的网页,使更多的前端开发者不再受前端复杂代码困扰。

Jingle移动端框架

官网地址:http://vycool.com/Jingle/

Jingle是一个SPA(Single Page Application)开发框架,用来开发移动端的html5应用,在体验上尽量去靠近native应用,希望有一天html5能够做到与native一样的操作体验。

腾讯移动Web前端框架

官网地址:https://github.com/AlloyTeamDev/Pro

微信WeUI和微信支付WePayUI

https://github.com/weui/weui

https://github.com/wepayui

GMU

百度已经不更新

purecss

ionic

jquery mobile

bootstrap

MUI

http://dev.dcloud.net.cn/mui/

AUI

http://www.auicss.com/

总结:

框架固然是好,而且很多问题都已经解决,尤其是兼容性问题;但是带来的问题也很多,尤其是你只会用框架,不知道里面的原理;所以我个人建议:先静态最原始的方式实现,再到框架进行重构。

转载于:https://www.cnblogs.com/EasonJim/p/6216587.html

移动端webUI框架(HTML5手机框架)相关推荐

  1. 开源的HTML5前端框架Amaze UI发布,推进mobile first前端Web方案

    2014年6月,云适配发布了开源的HTML5前端框架Amaze UI,目前处于内测期.根据Amaze UI的官网介绍,该框架的特点是mobile first,解决Web应用从PC向多屏适配的问题,兼容 ...

  2. 【CSON原创】HTML5游戏框架cnGameJS开发实录(外部输入模块篇)

    返回目录 1.为什么我们需要外部输入模块? 在游戏中我们常常用到类似这样的操作:鼠标点击某位置,玩家对象移动到该位置,或者按鼠标方向键,玩家向不同方向移动,等等.这些操作无一不用与外部输入设备打交道. ...

  3. 端到端半监督目标检测框架

    点击上方"视学算法",选择加"星标"或"置顶" 重磅干货,第一时间送达 作者丨SuperHui@知乎 来源丨https://zhuanlan ...

  4. 前端html5的框架有哪些,10大html5前端框架

    10大html5前端框架 Bootstrap 首先说Bootstrap,估计你也猜到会先说,或者一定会有这个了,这是说明它的强大之处. 拥有框架一壁江山的势气. 自己刚入道的时候,本着代码任何一个字母 ...

  5. 【CSON原创】HTML5游戏框架cnGameJS开发实录(精灵对象篇)

    返回目录 1.什么是精灵对象(sprite)? 所谓的精灵对象,就是游戏中的一个具有行为的元素,以超级玛丽为例,玛丽,敌人都算是一个精灵对象.在cnGameJS框架中,精灵对象如下几个特点: 1.添加 ...

  6. SpringBoot-服务端参数验证-JSR-303验证框架

    1. springboot 默认集成了 hibernate-validator,它默认是生效的,可以直接使用. 比如: @RestController @RequestMapping("/h ...

  7. 10大html5前端框架

    Bootstrap 首先说 Bootstrap,估计你也猜到会先说或者一定会有这个( 呵呵了 ),这是说明它的强大之处,拥有框架一壁江山的势气.自己刚入道的时候本着代码任何一个字母都得自己敲出来挡我者 ...

  8. 前端 html5 css3 框架,UI,分享,CSS3,HTML5,前端框架

    随着HTML5和CSS3以及网页设计布局的全面翻新创新改革.让很多网页设计者和界面设计师都知道一个道理.就是去掌握一套对应的工具包.这不仅仅是未来提高工作的效率,还能更好的去处理网页整体视觉效果.界面 ...

  9. 【初识Netty使用Netty实现简单的客户端与服务端的通信操作Netty框架中一些重要的类以及方法的解析】

    一.Netty是什么? Netty 由 Trustin Lee(韩国,Line 公司)2004 年开发 本质:网络应用程序框架 实现:异步.事件驱动 特性:高性能.可维护.快速开发 用途:开发服务器和 ...

  10. html 游戏 精灵,HTML5游戏框架cnGameJS开发实录-精灵对象篇

    返回目录 1.什么是精灵对象(sprite)? 所谓的精灵对象,就是游戏中的一个具有行为的元素,以超级玛丽为例,玛丽,敌人都算是一个精灵对象.在cnGameJS框架中,精灵对象如下几个特点: 1.添加 ...

最新文章

  1. 桑叶黑芝麻糊,从头到脚通补
  2. 哪个版本好_《道德经》道尽人生大智慧,哪个版本《道德经》的注释比较好呢?...
  3. Python-EEG工具库MNE中文教程(3)-MNE中数据结构Epoch及其用法简介
  4. python字典教程:添加与删除
  5. hadoop 多节点集群_设置Apache Hadoop多节点集群
  6. CDN加速实现—varnish
  7. canvas笔记-lineCap的使用
  8. STM8学习笔记---按键KEY
  9. java 事件监听器 执行类_事件及事件监听器类 java
  10. [导入]在SYBASE数据库中使用游标(Cursors)将多行查询结果进行逐行处理
  11. a span做成按钮样式不选中文字
  12. Linux头文件引用小技巧
  13. [妙味DOM]第一课:DOM基础概念、操作
  14. visio2013激活软件,绝对靠谱!!!
  15. html整体布局居中,HTML实现常见居中布局
  16. Rational License Key Error的永久解决办法
  17. oracle卸数的perl脚本,卸载cpan安装的所有perl模块
  18. CLAHE算法代码详解
  19. Python之条件竞争
  20. 纪念丹尼斯——C语言之父

热门文章

  1. Google测试之道读后感
  2. 区块链技术正大肆颠覆价值数十亿美元的金融科技产业
  3. 全国大学生数学竞赛学习笔记
  4. ffmpeg使用指令转码b站上下载的视频
  5. python 入门学习,52周存钱挑战
  6. Python的学习笔记案例4--52周存钱挑战1.0
  7. 网站图片优化方法有哪些
  8. 使用列表实现筛选法求素数
  9. 【云原生】Kubernetes编排工具精讲
  10. 微信公众服务号申请、认证(开通支付)-微信开发图文教程