快速开发手机h5移动端页面开发框架的UI框架有什么推荐么

Amaze UI | 中国首个开源 HTML5 跨屏前端框架
订阅更新&&为移动而生Amaze UI 以移动优先(Mobile first)为理念,从小屏逐步扩展到大屏,最终实现所有屏幕适配,适应移动互联潮流。组件丰富,模块化Amaze UI 含近 20 个 CSS 组件、20 余 JS 组件,更有多个包含不同主题的 Web 组件,可快速构建界面出色、体验优秀的跨屏页面,大幅提升开发效率。本地化支持相比国外框架,Amaze UI 关注中文排版,根据用户代理调整字体,实现更好的中文排版效果;兼顾国内主流浏览器及 App 内置浏览器兼容支持。轻量级,高性能Amaze UI 面向 HTML5 开发,使用 CSS3 来做动画交互,平滑、高效,更适合移动设备,让 Web 应用更快速载入。Amaze UI Web 与 Amaze UI Touch 对比Amaze UI WebAmaze UI Touch定位移动优先、响应式、跨屏 UI 组件库专属移动(手机)端的 UI 组件库JS 基础库jQueryReactCSS 预处理LessSassGrid基于 float,12 列响应式基于 flexbox,6 列流式兼容性兼容主流桌面、移动浏览器(WebView)有限支持 IE8完整支持实现 的浏览器(WebView),如 Android 4.4+、IE Mobile 11+、iOS 7.1+Grid 和 NavBar 对按 09 版 flexbox 实现的浏览器(WebView)支持有待进一步测试项目地址衍生版本Amaze UI React- 共用 CSS,使用 React 实现交互N/A适用场景响应式或移动网站熟悉 jQuery兼容性要求较广更适合后端渲染架构针对手机端开发能够驾驭 React 及相关配套技术浏览器(WebView)支持 flexbox,如 iOS、腾讯 TBS 2.0 内核的微信 WebView可用于 SPA 架构站在巨人的肩膀上Amaze UI 汲取了很多优秀的社区资源,通过开源的形式来回馈社区。MIT LicenseAmaze UI 使用 发布,用户可以自由使用、复制、修改、合并、出版发行、散布、再授权及贩售 Amaze UI 及其副本。Heroes:jQuery, Zepto.js, Seajs, Less, normalize.css, FontAwesome, Bootstrap, Foundation, UIKit, Pure, Framework7, etc.Credits我们追求卓越,然时间、经验、能力有限。Amaze UI 有很多不足的地方,希望大家包容、不吝赐教,给我们提意见、建议。!在微信上关注我们移动webapp前端ui用哪个框架好_百度知道
移动webapp前端ui用哪个框架好
我有更好的答案
可以令用户的使用感知更加统一。包含button,每一行CSS都经过深思.css这样的栅格来处理,适应所有尺寸的屏幕:纯H5+CSS3,轻松引入第三方UI组件插件:轻松对接即时通讯,简直小的忽略。Pure基石,核心库压缩Gzip后的JS,并提供快速接入的方案。FrozenUI提供的一系列JavaScript插件、cell、dialog,或者是直接采用grid。FrozenJS 是针对移动端开发的 js 组件库。jQuery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局。BootstrapBootstrap 是最受欢迎的 HTML。轻量级基于Zepto开发,依赖了iscrolpurecsspurecss采用其Grid的部分即可,需要定制的部分,建议自行配置、样式:海量bootstrap资源引入和定制UI组件,丰富的UI组件。如果你只用部分模块。通过皮肤生成器可以自定义样式。写出你自己的样式。基于手Q样式规范,选取最常用的组件、 progress,Pure基于Normalize。遵循手Q样式规范,基本样式使用离线包的方式减少请求。jQuery Mobile 适用于所有流行的智能手机和平板电脑,提供webapp、pad端简单易用的UI组件!JingleJingle是一个SPA(Single Page Application)开发框架,用来开发移动端的html5应用,在体验上尽量去靠近native应用,希望有一天html5能够做到与native一样的操作体验,升级方式友好,文档完善、日历等各种移动端常用的组件,你将会非常熟悉这种方式,非常适合开发跨平台Web App。轻量的UI库 SUI Mobile 非常轻量,用于开发响应式布局、CSS网络传输体积总共只有52K,却提供了20+个常用的组件。对于只有HTML&CSS的组件,你只需要复制HTML代码既可以使用。他的大部分JS组件都是独立的 Zepto 插件,并且提供了Zepto&#47,Pure是响应式的盒子模型,即可轻松制作向导和模板主题、移动设备优先的 WEB 项目。wex5国产的ui,支持打包, toast、article、icon等各式元素。Frozen UIFrozen UI是腾讯社交用户体验设计 - 增值UI开发团队一个开源的简单易用,轻量快捷的移动端UI框架,目前全面应用在腾讯手Q增值业务中。FrozenUI提供的CSS组件是目前QQ会员前端开发组所用的通用样式库、模板:简单定义,全部模块gzip压缩后才 4.4KB* 。 考虑到移动端,保持文件尽量小对我们来说非常重要,做成手Q公用离线包减少请求、表单、弹出框、轮换WeUIWeUI是一套同微信原生视觉体验一致的基础样式库,grid960、上拉/下拉、CSS 和 JS 框架.css添加了HTML元素的布局和样式,以及常用的UI组件。全是精华;jQuery 风格的API,Pure提供最基础的样式,鼓励你基于此写出自己的样式。它被设计为容易覆写,且不影响你自己的样式,非常适合快速开发。jquery mobilejQuery Mobile 是创建移动 web 应用程序的框架。前端UI:完全恪守html5+css3+js,干净纯洁设备api:采用业界主流Phonegap/Cordova向导,完善的事件机制.js 和 FronzenUI。FrozenJS 的所有组件均以 zepto 的插件的形式存在。阿里开源的SUI MobileSUI MobileSUI Mobile 是一套基于 Framework7 开发的UI库。并参考 Ratchet、Fastclick 开源库。它非常轻量、精美、推送、支付等各类插件后端:轻松调用后端组件和api,只需要引入我们的CDN文件就可以使用,并且能兼容到 iOS 6,木有糟粕。移动端是初衷,其依赖 zepto。开发团队:阿里巴巴共享业务事业部UED团队百度系GMUGMU是基于zepto的mobile UI组件库。Purecss小的没有节操,更优雅地在移动端上呈现更灵动的动画效果,大大改进的编程模型,简单适用,前后端分离支持前端模板渲染,模板按需自动加载.css.0+ 和 Android 4.0+,由微信官方设计团队为微信 Web 开发量身设计。丰富的UI组件提供了按钮、列表。ionic基于angular2
采纳率:91%
为您推荐:
其他类似问题
您可能关注的内容
换一换
回答问题,赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。ASP.NET快速开发框架不得不做的几个功能、高大上档次后台管理UI界面
俗话说磨刀不误砍柴工,确实,一早上花一个小时去磨刀一天下来肯定能多砍很多柴。我们做软件开发也是同样的道理,有套好开发框架在手里,开发也是事半功倍。那么一套MVC快速开发框架至少得具有哪些功能才能帮我们做到高效率、高品质的开发呢?下面我以后台管理开发框架为例谈一谈快速开发框架的几个主要功能。
献上在《线体验Demo地址》希望大家也能从中得到一些启发。
地址:https://121.40.148.178:8080/ 、 用户名:guest,密码:123456
一、高端大气的界面布局。
一个人,你首先看到的是他的脸,脸看起来顺眼一些你可能才会愿意与这个人更加深入的交流。软件也是这样,界面好看一些也能更容易俘获客户/用户的芳心。现在我用的界面布局有以下几种方式。
第一种是很经典的抽屉式手风琴菜单,比较传统。
第二种是树型手风琴风格,这种风格跟第一种风格很相似,但是如果菜单层级很多,就可以使用这种菜单导航,因为支持无限级扩展,而且排版也比较好看。
第三种是模仿Windows开始菜单,看起来比较大气。
二、权限管理,绝大多数的系统都会进行权限管理,权限管理功能开发会占掉整个项目开发的很多时间,如果事先已经做好了权限功能的话,开发会轻松很多。
功能权限授权:
数据权限授权:
为了授权方便,权限系统就好支持按角色、用户、用户组、岗位等多种形式的授权
三、代码生成器,每套框架会有自己的特色,DIY一套代码生成器也是有必要的。
四、通用数据接口,软件一般都会跟其它系统数据交互,加一个接口就要改一次代码吗,那太麻烦了所以通用的数据接口是必备的
五、通用Excel导入模块,需要导入的东西太多了,一个表写一个方法,不停的ctrl+c,ctrl+v会把人搞疯的,有了通用导入模块,普通用户都会设置,设好Excel与表关系就好了。
六、报表与打印
七、邮件与消息
八、系统日志
当然还有一些比较常用的功能,这里就不一一例举,我有个demo有兴趣的朋友可以去看看2015年最全的移动WEB前端UI框架 - ThinkPHP框架
原文来源:--
更多web前端学习分享:
目前,众多互联网公司APP都嵌入了大量的HTML5,移动端的开发越来越重视,HTML5的运用场景也越来越多了。下面在移动WEB开发的过程中,使用合适的移动WEB UI框架可以大大提升我们的开发效率。下面就把2015年最全的移动WEB前端UI框架分享给大家。
目前,众多互联网公司APP都嵌入了大量的HTML5,移动端的开发越来越重视,HTML5的运用场景也越来越多了。下面在移动WEB开发的过程中,使用合适的移动WEB UI框架可以大大提升我们的开发效率。下面就把2015年最全的移动WEB前端UI框架分享给大家。
Amaze UI是一个轻量级(所有CSS和JS gzip后100kB左右)、Mobile first的前端框架, 基于开源社区流行前端框架编写。
Amaze UI Github地址:https://github.com/amazeui/amazeui
Amaze UI官网:http://amazeui.org/
Frozen UI 是一个简单易用,轻量快捷,为移动端服务的前端框架,专注于移动web的UI框架,基于腾讯手机QQ规范。
Frozen UI Github地址:http://frozenui.github.io/
SUI是一套基于bootstrap开发的前端组件库,同时她也是一套设计规范。通过SUI,可以非常方便的设计和实现精美的页面。
SUI官网:http://sui.taobao.org/
ZUI是一个开源前端实践方案,帮助你快速构现代跨屏应用。
ZUI Github地址:https://github.com/easysoft/zui
H-ui前端框架是在bootstrap的思想基础上基于 HTML、CSS、javascript开发的轻量级web前端框架,开源免费,简单灵活,兼容性好,满足大多数中国网站。
H-ui Github地址:https://github.com/jackying
pure.css 一组小,响应CSS模块,您可以使用在每一个web项目
pure.css Github地址:https://github.com/yahoo/pure/
UIkit是YOOtheme团队开发的一款轻量级、模块化的前端框架,可快速构建强大的前端web界面。UIKit使用的变量基于LESS,具有体积小、模块化、可轻松地自定义主题及响应式设计可在多种环境中使用等特点。UIkit中文网为广大国内开发者提供详尽的中文文档、代码实例等,帮助开发者快速掌握并使用这一框架。
UIkit Github地址:https://github.com/uikit/uikit
Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。目前,Bootstrap最新版本为3.0 。Bootstrap中文网致力于为广大国内开发者提供详尽的中文文档、代码实例等,助力开发者掌握并使用这一框架。
Bootstrap中文网:http://www.bootcss.com/
拼图号称中国版的Bootstrap,优秀的跨屏响应式布局前端开发框架(CSS框架),国内前端框架先驱及领导者,能自动适应电脑、平板、手机等设备,让web前端开发更简单、快速、便捷。
拼图官网:http://www.pintuer.com/
Plane UI是一个构建 HTML5 应用的跨终端响应式前端界面框架及解决方案。
Plane UI Github地址:https://pandao.github.io/planeui/
Foundation
Foundation 5是我们最快、最好的构建。多用的功能来帮助编写代码和学习比以往任何时候都要快。
Foundation官网:http://foundation.zurb.com/
mui是最接近原生APP体验的高性能框架。
mui Github地址:https://github.com/dcloudio/mui
WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、icon等各式元素。
WeUI Github地址:https://github.com/weui/weui
Arale 立足于支付宝的前端需求和国内前端社区,基于Sea.js和spm生态圈,致力发展小而美的前端模块架构,建立了一套从编码测试到部署的开发体系, 是一个开放、简单、易用的前端解决方案。Arale 模块均兼容于 IE6+ 以及 Chrome/Firefox/Safari/Opera 的最新稳定版。
Arale官网:http://aralejs.org/
Semantic UI
Semantic UI 是一款语义化设计的前端开源框架,其功能强大,使用简单,为设计师和开发师提供可复用的完美设计方案。
Semantic UI Github地址:https://github.com/jlukic/Semantic-UI
Jingle UI是一个基于html5、css3开发轻量级的移动webapp 框架,提供一些基本交互方式,常用的组件(scroll,actionsheet,sidemenu,toggle,push2refresh……),帮助您更方便的开发移动应用。
Jingle UI Github地址:https://github.com/shixy/Jingle
CMUI 是一个专攻移动网页的 UI 框架,它提供了丰富的组件和简洁的接口,开箱即用。CMUI 帮助开发者摆脱样式细节和兼容性困扰,从而腾出更多精力投入到业务开发中。
CMUI Github地址:https://github.com/shixy/Jingle
以上是在长期工作中总结出来的移动WEB UI框架资源,大家可以根据自己的业务需求去选择合适的WEB UI框架。在此不评价任何一个框架的好坏,存在就有他的合理性,总有他适合的场景。感谢这些项目的贡献者,感谢开源力量!
原文来源:--
更多web前端学习分享:
积分:1435
ThinkPHP 是一个免费开源的,快速、简单的面向对象的 轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。最适合小团队的移动WebApp框架 - w3ctech
最适合小团队的移动WebApp框架
108314 访问
今天首先给大家隆重推荐一款移动端WebApp开发神器:Framework7。当然啦,这篇带有比较强烈的主观意识偏好,并且建立在一个必要的前提之上:你希望快速开发一款移动端的WebApp,但是团队里并没有资深的前端工程师。
Framework7 是什么
Framework7 - 是一款开源免费的移动端 HTML 框架, 用于开发接近原生iOS或Android系统外观和体验的 hybrid mobile apps 或 web apps。当然你也可以把它当成一款快速制作高保真APP原型的工具。
Framework7 的主要目标是让你能够轻松地使用 HTML, CSS and JavaScript 开发iOS 或 Android 应用。Framework7 是非常灵活的。 它并不会限制你的想象力或者强制搭配某些架构方案。 Framework7 给你最大程度的自由。
Framework7 并不打算兼容所有平台。 它主要专注 iOS 和 Google Material design 以带来最好的用户体验并保持简单。
如果你打算开发 iOS 或 Android 平台下接近原生系统应用外观和体验的 hybrid app (PhoneGap) 或者 web app 的话 Framework7 绝对适合你。
像做网站一样超级简单
使用 Framework7 开发 iOS 应用就像开发传统网站一样简单。 试着上手实践一下你就会发现它惊人的简单。你只需要一个简单的HTML页面并引入 Framework7 的 CSS 和 JS 文件即可。Framework7 并不强迫你写那些需要JS处理的自定义标签(不像Angular或React)。 也并强迫你把所有内容都写在 JavaScript (或JSON)里面。 仅仅是普通的HTML,你在HTML里面写什么就是什么。没有黑魔法,没有MVVM,没有复杂高深的理论或者工具需要学习。
上面已经提到Framework7 是一款侧重 iOS 的框架。 从一开始,就考虑到如何最方便快捷地实现iOS平台上各种惊艳的UI组件,以及复杂的动画和灵活的触摸交互。所以Framework7是你实现像素级精确iOS应用的最佳选择。
Material 皮肤
Framework7 Material 皮肤严格按照 Google Material 设计规范实现, 像素级精确实现了 Material 特性 - 包括视觉设计、配色和交互效果。那么现在, Framework7 也是创建拥有原生 Material 界面和体验的 Android 应用的一个不错选择了。
Framework7 自带很多可以直接使用的UI组件和插件,比如 modals,popup,action sheet, popover, list views, media lists, tabs, side panels, layout grid, preloader, form elements 等。前面提到的大部分组件都完全不需要你写任何JS代码。
仅仅具备上述特征的话其实很多框架都具备,然而让我如此推崇这款框架的主要原因是它的几个独有的杀手锏功能。
Framework7的一个最大特色就是提供了的滑动返回功能,当你从屏幕左侧向右滑动的时候可以返回到上一个页面。并且,这不是一个 A-B 动画,她完全跟随你的手指触摸而移动。
是不是希望你的应用能像在邮件中一样向左滑动一条消息就可以删除?Framework7 的列表元素有相同的功能,并且有同样平滑的动画和触控交互。
动态导航栏
就像上面说过的,Framework7让一切都有iOS7的体验。其中一个重要的特点就是动态导航栏。当你切换页面的时候可以清楚地看到导航栏的元素是如何滑动并渐变的。
Framework7 可能是第一且唯一一个使用原生滚动条实现下拉刷新功能的框架。这就是为什么Framework7的下拉刷新组件可以和原生的iOS应用相媲美的根本原因。
Framework7 有一个非常强大的”聊天“组件,你可以很容易定制并集成到你的app中,然后通过实时同步推送数据服务(比如 pusher 或者 PubNub)来实现不同用户之间发送消息。
Framework7 的一切都是非常简单的,所有的样式都被拆分成了模块化的小 .less 文件,所以定制自己的样式非常容易。
里可以看到基于 Framework7 开发的已上架 iOS 和 Android 应用:
原生滚动条
Framework7最大的特点之一就是使用了原生的滚动条。所以你的滚动条会有原生滚动条一样的加速度和回弹,没有任何bug和性能问题。
Framework7支持多个独立的视图(view)。并且你可以不用写任何JS,只需要在链接上加一个 data-view 就可以控制每一个视图。
不依赖第三方框架
Framework7 不依赖任何第三方框架。所以它很轻量、高性能且灵活。
简洁的JS API
使用Framework7不需要学习任何新的知识,她的JS接口非常简洁易用并且功能强大。比如,当你需要弹出一个alert的时候你只需要 app.alert(&Hello World!&)。
高性能的动画
Framework7 只使用带硬件加速的CSS动画以达到最好的性能。
Framework7最主要目标之一就是让你的Web应用和iOS本地应用有相同的外观和交互体验。并且Framework7是唯一一个坐到了1:1精确平滑的页面切换动画的框架。
XHR + Caching + History + Preloading
这几个功能的组合可以让你的应用的路由功能变得非常强大。Framework7 通过Ajax来加载新页面,并且可以通过缓存配置让页面的加载速度变得非常快。她会在一定的时间内缓存Ajax请求的结果(默认是10分钟),在缓存有效期内不会发送新的请求而是直接从缓存中取出结果。
Dom7 - 自定义的DOM库
Framework7不依赖任何第三方框架,包括dom操作,包括jquery。她有一个自带的高性能dom库 - DOM7。并且,你不需要因为DOM7而学习任何新的知识,因为DOM7的接口和大名鼎鼎的jQuery几乎是一样的,也支持链式语法。
使用 Framework7 开发的iOS应用实例
更多实例请移步
Framework7 是完全免费并开源的 (MIT 协议)。
为什么最适合小团队
上面说了这么多,其实也都是把官网翻译了一下,那么为什么这个框架最适合小团队呢?我得出这个结论的主要原因如下:
完备的UI组件
基本上初期的产品不会有太强的自定义需求,很长一段时间都在围绕系统控件排列组合,从需求的源头上来看特别常见的就是嫌弃系统默认的alert之类的太丑,总是希望达到原生应用的效果。而Framework7完美地解决了这个问题,几乎所有的系统控件都已经实现了,复制粘贴代码片段就可以用了。只要不是太奇葩的产品形态,基本就是堆积木一样的速度了。
极低的上手难度
在这个前端技术爆炸性进化的年代,你要是搞个框架出来不自带打包工具,不支持自定义元素,不整点MVVM之类的高大上架构方案你都不好意思跟人打招呼。然而越来越高大上的方案意味着更高的上手难度,你真的能保证高大上的前端MVVM能被那些培训班突击了不到半年的新员工领悟并正确地用在合适的场景吗?你那些看上去很自动化很强大的打包工具真的没有把事情搞复杂吗?咱能简单点吗?我就是想在手机上做两个页面而已啊!Framework7 在这方面做得足够简单,再传统不过的HTML,如果你不喜欢LESS也可以直接改CSS,对于广大只熟悉jQuery的“伪前端”来说也完全没有学习成本,拿来就用。但是该有的AJAX、router、模板引擎一样不少。
最接近原生的体验
其实对于广大不那么牛逼的“前端工程师”来说不是做不出来页面或者实现不了某些效果,而是做出来的效果实在差太远,自己都不好意思拿出手,老板就更不满意了。Framework7 在这方面提供了很多关键性的特性,动态导航、滑动返回、下拉刷新都是特别常见而新人往往又做不好的部分,现在好了,直接照着文档套进去就完事儿了。
单页面的体验多页面的实现
手机的屏幕就只有那么大,所以现在的WebApp多数都会以分屏的方式来实现更复杂的功能。而传统的页面跳转体验显然不那么好,在网络条件不那么理想的情况下每跳转一次页面都会白屏一阵儿。于是乎各种各样的 SPA (Sing Page Application)解决方案层出不穷,相信一定有人试过Angular或者React之类的解决方案,然而现实终究会很残酷地证明这些重型框架不适合移动端,再怎么搞性能优化都无济于事。何况性能优化也不是谁都能做得好的啊。Framework7在这方面就很取巧,该是页面还是页面,该是链接还是链接,只是通过AJAX和router做到了无刷新加载,这样页面仔在写页面的时候就可以比较简单的区分不同的页面。
这个框架最初只支持iOS,最近新加的 Material 皮肤也还有一些滑动返回之类的特征未实现
JS文件没有模块化的解决方案,几乎所有的业务逻辑都只能写在一个JS文件里面,如果应用比较大逻辑比较复杂的话,可维护性是个问题。
国内的阿里巴巴国际UED团队曾经翻译过该框架1.2.0版的官方文档
不需要这么复杂的功能?
如果你的应用并不需要这么复杂的交互,也用不上那么多的UI控件,那么你可以试试 ,同样支持iOS和Android两种风格,非常轻量,依赖的JS代码量非常小且均为纯原生JS。Twitter出品,跟大名鼎鼎的Bootstrap一脉相承。更重要的是代码风格非常棒,如果你打算自己造个新轮子的话,那么这个 Ratchet 绝对是你最好的参考对象没有之一。
有没有介于两者之间的?
还真有,哈哈。我们上面提到过的阿里巴巴国际UED团队,在综合了前两者的基础之上,改良了一个很适合中国国情的轮子: 。跟阿里的其它前端开源项目一样,直接提供带combo功能的CDN版本。这下连自己部署都省了,直接引用就可以开始了。这个新造的轮子没有Android版皮肤,但是加入了中国省市联动选择器这种中国特色的组件,不过我个人曾经写过一个基于百度地图API的地址选择器,体验会更好些,回头开源出来给大家玩儿。
本文原文: 可看视频。
我们专注于H5技术生态的改善,如有兴趣合作请联系 support@h5.vc
欢迎有兴趣的同行一起来玩儿:
扫码关注w3ctech微信公众号}

我要回帖

更多关于 前端页面框架 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信