ui框架 微信webapp_webapp微信登录 - CSDN
  • 前言  刚开始写bolg,尝试记录一些日常。  无意找了个很好看的小程序UI组件库:ColorUI github。  之前做的小程序小工具都是使用原生的自己编码的,难免会有东拼西凑的地方...有赞UI组件库:vant webapp github ...

    前言
       刚开始写bolg,尝试记录一些日常。
       无意找了个很好看的小程序UI组件库:ColorUI github。
       之前做的小程序小工具都是使用原生的自己编码的,难免会有东拼西凑的地方,正好这段时间有空,准备花点时间找一个较好的小程序组件库或者框架,来提示开发效率,以及能提高逼格- -
    准备
       百度了一堆,结果如下:
    组件库
    有赞UI组件库:vant webapp github
    适用商城类,简单的需求用这个也不错
    蘑菇街UI组件库:MinUI github
    挺好看的,但是搜出来使用这个的不多,可能我姿势不对吧
    TalkingData UI组件库:iView webapp github
    组件多...
    Wux WeApp UI组件库:Wux WeApp github
    好像是个人开发的,效果也不错,有日历手风琴等
    京东 UI组件库:Taro-UI github
    结合taro框架用react开发方式的,不适合
    ColorUI UI组件库:ColorUI github
    直接添加class即可实现效果,视觉效果很棒。
    前端框架
    美团点评:mpvue github
    使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。
    京东:Taro github
    多端统一开发框架,支持用 React 的开发方式编写一次代码,生成能运行在微信小程序、H5、React Native 等的应用
    腾讯:WePY github
    接近于 Vue.js
    WeTouch:Touch WX 文档
    小结
    框架:京东的是 React 方式编码,其他多数是vue方式。不考虑框架,因为都没用过,耗时多- -
    UI组件:看了issue和考虑大厂使用,选用vant webapp、iView webapp
       前前后后花了2,3天时间了解微信小程序的组件库和前端框架,本来准备使用mpvue的,但基于开源时间不是很长,自己不熟悉vue.js,怕自己爬不出坑放弃了,还是选择UI组件库。因为懒,选了组件较多的iView webapp,还有一个原因就是iview还有iview admin后台框架,万一哪天能用上呢~
       准备使用的是后台框架ASPNET MVC5.0+EASYUI+EF+WEBAPI,小程序前端选择iView webapp。当然还有好看的Color UI
    开始
       上面基本上都会用到npm;而且由于微信小程序写法也类似vue,加上选择的iView是基于vue.js的UI组件库,iView webapp使用方式与iView基本一致,所以还要学习了解一下vue.js。就这样准备使用iView webapp前,再研究研究node.js和vue.js咯,毕竟是奔着学习来的。
       网上找了一个文章,感觉不错,大致浏览,了解即可,毕竟这次目的是小程序。node.js入门

       写完本文后,因项目原因需要开发移动端项目,iView只有PC端,只能转到vant这个UI组件了。PC端需求较少,目前工作主要还是移动端和小程序项目。——2018-11-7

    转自:http://www.cnblogs.com/jonezzz/p/9856197.html

    展开全文
  • SUI Mobile http://m.sui.taobao.org/components/#popup SUI Mobile 是一套基于 Framework7 开发的UI库。 MUI http://dev.dcloud.net.cn/mui/ 最接近原生APP体验的高性能前端框架 weUI https://weui.io/ ...

    SUI Mobile http://m.sui.taobao.org/components/#popup SUI Mobile 是一套基于 Framework7 开发的UI库。

    MUI http://dev.dcloud.net.cn/mui/ 最接近原生APP体验的高性能前端框架

    weUI https://weui.io/ 微信原生框架

    Vant https://youzan.github.io/vant/?source=vuejsorg#/zh-CN/intro Vue官网合作UI,有赞团队开发

    Frozen UI http://frozenui.github.io/ 由腾讯团队开发,适用于使用手Q规范设计的Web页面

    Mand Mobile https://didi.github.io/mand-mobile/#/zh-CN/docs/introduce Mand Mobile是面向金融场景设计的移动端组件库

    Muse - UI https://muse-ui.org/#/zh-CN/contributing Muse UI 是一套 Material Design 风格开源组件库,旨在快速搭建页面。

    cube - ui https://didi.github.io/cube-ui/#/zh-CN/docs/introduction 滴滴开源的UI框架

    vonic https://wangdahoo.github.io/vonic/docs/#/ 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用。

    vux https://vux.li/ vux 基于WeUI和Vue(2.x)开发的移动端UI组件库

    Mint UI http://mint-ui.github.io/#!/zh-cn Mint UI 由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库

    展开全文
  • 移动端UI框架小汇总

    2019-01-10 13:11:42
    前言:随着前端技术的更新,Vue,React,Angular等JS类框架不断的深入使用,各种WebApp、混合App、微信H5等应用的发展,各种配套的前端UI框架应运而生。最近,通过在Github、前端社区、掘金等平台上,对当下流行的前端...

    前言:随着前端技术的更新,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端)

     

    展开全文
  • 1.Frozen UI 出品:腾讯社交用户体验设计 - 增值UI开发团队 官网:http://frozenui.github.io/ 2.AUI 出品:apicloud社区-流浪男 官网:http://www.auicss.com/ 3.WEUI 出品:微信 官网:...

    1.Frozen UI

    出品:腾讯社交用户体验设计 - 增值UI开发团队

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

     

    2.AUI


    出品:apicloud社区-流浪男

    官网:http://www.auicss.com/

     

    3.WEUI


    出品:微信

    官网:http://weui.github.io/weui/

     

    4.JingleUI


    出品:shixy

    官网:https://github.com/shixy/Jingle

     

    5.AmazeUI


    出品:云适配

    官网:http://www.amazeui.org
     

    转载于:https://www.cnblogs.com/yi-snow-W/p/10709733.html

    展开全文
  • 前端UI框架小汇总

    2018-04-28 22:31:52
    前言: 近期,小弟根据GitHub、前端社区、掘金等平台对当前流行的前端UI框架的进行了小小的整理和汇总(ps:前端UI框架的应用是通过GitHub star数,社区热度和使用范围等进行的粗略的汇总【不分先后】)。...

    前言:

      近期,小弟根据GitHub、前端社区、掘金等平台对当前流行的前端UI框架的进行了小小的整理和汇总(ps:前端UI框架的应用是通过GitHub star数,社区热度和使用范围等进行的粗略的汇总【不分先后】)。希望对寻找UI框架的小伙伴们提供点帮助。

      以下对前端UI框架的移动端、PC端和混合APP的应用进行了列举。

     

    移动端UI框架

    Mint UI(饿了么团队)

      中文官网:http://mint-ui.github.io/#!/zh-cn

      描述:基于vue的移动端UI框架
      基于vue
      组件库:    

      

      GitHub地址:https://github.com/ElemeFE/mint-ui/
      star:8705,fork:1810
      latest commit 2017.12.6 6pm
      32 contributors
      预览:
        http://elemefe.github.io/mint-ui/#/
      基础引入:
        CDN:

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/mint-ui/lib/index.js"></script>

        npm:
          npm i mint-ui -S
      观点:可按需加载组件

     

    SUI Mobile(阿里巴巴共享业务事业部UED团队)

      官网:http://m.sui.taobao.org/
      描述:一套基于 Framework7 开发的UI库。基于IOS风格。它非常轻量、精美,只需要引入我们的CDN文件就可以使用,
    并且能兼容到 iOS 6.0+ 和 Android 4.0+,非常适合开发跨平台Web App。
      基于zepto
      IOS风格
      预览:
        http://m.sui.taobao.org/demos/
      组件库:
        
      GitHub地址:https://github.com/sdc-alibaba/SUI-Mobile
      star:5242,fork:1466
      lastest commit 2016.11.10 11am
      14 contributors
      基础引入:
        CDN:

    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>

     

     

    Weui(微信官方设计团队)

      描述:WeUI 为微信 Web 服务量身设计,是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一。
    包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。
      GitHub地址:https://github.com/weui/weui
      star:16804,fork:4683
      latest commit 2017.11.2 8pm
      20 contributors
      预览:
        UI组件
          https://weui.io
          
        JS组件
          https://github.com/weui/weui
          
       基础引入:
        CDN:

    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css">
    <script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.1.3/weui.min.js"></script>

        npm:
          npm install --save weui

     

    YDUI Touch

      官网:http://www.ydui.org/
      描述:一只注重审美,且性能高效的移动端&微信UI。
      基于jQuery
      兼容性:
        兼容绝大多数移动端设备(兼容Android4.0+、IOS6.0+);
      采用 flexbox 布局,因低版本安卓及部分特殊浏览器不兼容flex-basis、flex-wrap、inline-flex属性,YDUI 将采取其他解决方案;
      基础引入:
        download:
          引入YDUI样式:ydui.css
          引入YDUI自适应解决方案类库:ydui.flexible.js
          引入jQuery2.0+
          引入YDUI脚本:ydui.js
      组件库:
        
      预览:

         http://m.ydui.org
         
      GitHub地址:https://github.com/ydcss/ydui
      star:420,fork:117
      latest commit 2017.10.23 2pm
      1 contributors
      个人观点:自定义keyBoard插件为亮点

     

    GMU(百度GMU小组开发)

      描述:基于zepto的轻量级mobile UI组件库,符合jquery ui使用规范,提供webapp、pad端简单易用的UI组件。
    兼容iOS3+ / android2.1+,支持国内主流移动端浏览器,如safari, chrome, UC, qq等。
      GitHub地址:https://github.com/fex-team/GMU
      star:1106,fork:461
      latest commit 2017.4.18 2pm
      8 contributors
      基础引入:
        download
          引入reset.css:https://github.com/fex-team/GMU/blob/master/dist/reset.css
          引入gmu.css:https://github.com/fex-team/GMU/blob/master/dist/gmu.css
          引入zepto.js:https://github.com/fex-team/GMU/blob/master/dist/zepto.js
          引入gmu.js:https://github.com/fex-team/GMU/blob/master/dist/gmu.js

     

    FrozenUI(QQVIP FD团队• Alloyteam团队)

      官方地址:http://frozenui.github.io/
      描述:简单易用,轻量快捷,为移动端服务的前端框架。基于手Q样式规范。应用在腾讯手Q增值业务。
    兼容android 2.3 +,ios 4.0 + 。
      GitHub地址:https://github.com/frozenui/frozenui
      star:2330,fork:645
      latest commit 2017.11.30
      7 contributors
      观点:JS组件库相对简洁

    移动优先

    Foundation

      中文官网:http://www.foundcss.com/
      描述:Foundation是国外最流行的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。
      GitHub地址:https://github.com/zurb/foundation-sites
      star:26751,fork:5751
      latest commit 2017.10.5 7am
      955 contributors
      基础引入:  
        CDN:

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" integrity="sha256-itWEYdFWzZPBG78bJOOiQIn06QCgN/F0wMDcC4nOhxY=" crossorigin="anonymous" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js" integrity="sha256-Nd2xznOkrE9HkrAMi4xWy/hXkQraXioBg9iYsBrcFrs=" crossorigin="anonymous"></script>

      观点:无很多中文官方文档,不便于中国开发者

     

    Amaze UI

      官方地址:http://amazeui.org/
      描述:中国首个开源 HTML5 跨屏前端框架。Amaze UI 关注中文排版,根据用户代理调整字体,
    实现更好的中文排版效果。
      基于jQuery
      GitHub:https://github.com/amazeui/amazeui
      star:10949,fork:2397
      latest commit 2017.3.4 8pm
      24 contributors
      组件库:
        
      基础引入:
        CDN:

    复制代码
    http://cdn.amazeui.org/amazeui/2.7.2/css/amazeui.css
    http://cdn.amazeui.org/amazeui/2.7.2/css/amazeui.min.css
    http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.js
    http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.min.js
    http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.ie8polyfill.js
    http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.ie8polyfill.min.js
    http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.widgets.helper.js
    http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.widgets.helper.min.js
    复制代码

      观点:适合PC端更多(例如分页的实现)

    Pure

      中文官网:https://www.purecss.cn/
      描述:纯CSS
      美国雅虎公司出品的一组轻量级、响应式纯css模块,适用于任何Web项目。
      GitHub:https://github.com/yahoo/pure/
      star:17880,fork:1969
      latest commit 2017.11.26 10pm
      51 contributors
      基础引入:
        CDN:

    <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.1/build/pure-min.css" integrity="sha384-CCTZv2q9I9m3UOxRLaJneXrrqKwUNOzZ6NGEUMwHtShDJ+nCoiXJCAgi05KfkLGY" crossorigin="anonymous">


    PC 端 UI框架

    iView

      官网地址:https://www.iviewui.com/
      描述:一套基于 Vue.js 的高质量 UI 组件库。iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品。
      GitHub地址:https://github.com/iview/iview
      star:11421,fork:1745
      latest commit 2017.12.4 11am
      组件库:
        
      基础引入:
        CDN:

    复制代码
    <!-- import Vue.js -->
    <script src="//vuejs.org/js/vue.min.js"></script>
    <!-- import stylesheet -->
    <link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
    <!-- import iView -->
    <script src="//unpkg.com/iview/dist/iview.min.js"></script>
    复制代码

        npm:
          npm install iview --save

     

    Element UI(饿了么团队)

      官方地址:http://element-cn.eleme.io/#/zh-CN
      描述:基于 Vue 2.0 的桌面端组件库
      GitHub:https://github.com/ElemeFE/element
      star:20657,fork:3777
      latest commit 2017.12.5 11am
      254 contributors
      组件库:
        
      基础引入:
        CDN:

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

        npm:
          npm i element-ui -S

     

    SUI(阿里巴巴国际UED团队-商家业务事业部)

      官网地址:http://sui.taobao.org/
      描述:一套基于bootstrap开发的前端组件库,同时她也是一套设计规范。
      基于jquery
      组件库:
        
      GitHub:https://github.com/sdc-alibaba/sui
      star:322,fork:135
      latest commit 2015.7.23 3pm
      4 contributors
      基础引入:
        CDN:

    <link href="http://g.alicdn.com/sj/dpl/1.5.1/css/sui.min.css" rel="stylesheet">
    <script type="text/javascript" src="http://g.alicdn.com/sj/lib/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="http://g.alicdn.com/sj/dpl/1.5.1/js/sui.min.js"></script>

      观点:偏向设计规范,组件库相对简单。

     

    H-ui

      官方地址:http://www.h-ui.net/
      描述:轻量级前端框架,简单免费,兼容性好,服务中国网站。
      基于jQuery
      GitHub地址:https://github.com/jackying/h-ui
      star:432,fork:196
      latest commit 2017.11.16 3pm
      1 contributors
      组件库:
        
      观点:无亮点,借鉴第三方插件完成


    layui

      官方地址:http://www.layui.com/
      描述:更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏览器本身,
    让一切你所需要的元素与交互,从这里信手拈来。
      layui 兼容人类正在使用的全部浏览器(IE6/7除外),可作为 PC 端后台系统与前台界面的速成开发方案。
    经典模块化前端框架
      组件库:
        
      GitHub:https://github.com/sentsin/layui/
      star:10278,fork:2909
      latest commit 2017.12.7 9pm
      11 contributors
      基础引入:
        layui.css
        layui.js

     

    uiKit(YOOtheme 团队)

      官网地址:http://www.getuikit.net/
      描述:一款轻量级、模块化的前端框架,可快速构建强大的web前端界面。
    UIkit 兼容 IE9 以上现代浏览器。在 IE8 及其以下版本中,所有JavaScript 都会失效。
      依赖jQuery
      组件库:
        
      GitHub地址:https://github.com/uikit/uikit
      star:11146,fork:1811
      latest commit 2017.12.8 4pm
      21 contributors
      基础引入:
        CDN:

    <link rel="stylesheet" href="//cdn.bootcss.com/uikit/2.25.0/css/uikit.css" />
    <script src="//cdn.bootcss.com/uikit/2.25.0/js/uikit.js"></script>

     

    Bootstrap

      中文官网:http://www.bootcss.com/
      描述:简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。
      组件库
        
      GitHub地址:https://github.com/twbs/bootstrap
      star:118971,fork:56198
      latest commit 2017.12.8 2pm
      958contributors
      基础引入:
        CDN:

    复制代码
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
    <!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    复制代码

        npm:
          npm install bootstrap@3
      其他基于bootstrap衍生出来的模块:
        Ace Admin后台管理系统模板:基于bootstrap3;http://ace.jeka.by/
        Metronic后台管理模板:http://www.metronic.com/
        H+:http://www.zi-han.net/theme/hplus/
        jQuery UI+Bootstrap:https://github.com/jquery-ui-bootstrap/jquery-ui-bootstrap/

        更多:http://www.cssmoban.com/cssthemes/houtaimoban/


    jQuery UI

      官方网址:http://jqueryui.com/
      组件库:
        
      其他基于jQuery衍生出来的模板:
        BUI:基于jQuery+KISSY UI:http://www.builive.com/
        EasyUI::http://www.jeasyui.net/
          描述:使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。
        DWZ JUI:http://jui.org/


    混合开发 UI框架

    ionic

      中文官网网址:http://www.ionic-china.com/

      基于angular
      描述:ionic是一个强大的 HTML5应用程序开发框架(HTML5 Hybrid Mobile App Framework)。
    ionic 主要关注外观和体验,以及和你的应用程序的 UI 交互,特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。
    ionic是一个轻量的手机UI库,具有速度快,界面现代化、美观等特点。


    Framework7

      官网地址:http://framework7.cn/
      描述:Framework7 是一个开源免费的框架可以用来开发混合移动应用(原生和HTML混合)或者开发 iOS & Android 风格的WEB APP。
      也可以用来作为原型开发工具,可以迅速创建一个应用的原型。
      她只专注于为 iOS 和 Google Material 设计提供最好的体验。
      GitHub:https://github.com/framework7io/framework7
      star:11304,fork:2439
      latest commit2017.11.7 5pm
      77 contributors


    OnsenUI

      官网地址:https://onsen.io/
      描述:用来构建混合移动端APP的 HTML5 UI 框架
      GitHub地址:https://github.com/OnsenUI/OnsenUI
      star:5706,fork:716
      latest commit 2017.11.30 6pm
      83 contributors

     

    APP 框架(拓展)

    react-native

      中文官网地址:http://reactnative.cn/
      描述:React Native使你能够在Javascript和React的基础上获得完全一致的开发体验,构建世界一流的原生APP。
    React Native着力于提高多平台开发的开发效率 —— 仅需学习一次,编写任何平台。(Learn once, write anywhere)
      GitHub地址:https://github.com/facebook/react-native
      star:56938,fork:13206
      1544contributors

    weex

      官网地址:http://weex.apache.org/cn/
      描述:Weex 提供强大的跨平台能力,可以使用相同的 API 开发 Web,Android 和 iOS 应用。
    同时,我们对接口了丰富的扩展能力。

     

    更多

    更多基于vue的UI框架:
      https://www.awesomes.cn/subject/vue#Dom-%E6%A1%86%E6%9E%B6
    更多基于bootstrap的UI框架:
      https://www.awesomes.cn/subject/bootstrap#Dom-%E6%A1%86%E6%9E%B6
    更多基于React的UI框架:
      https://www.awesomes.cn/subject/react#Dom-%E6%A1%86%E6%9E%B6
    更多基于Angular的UI框架:
      https://www.awesomes.cn/subject/angular#Dom-%E6%A1%86%E6%9E%B6


    结束语

      关于混合APP和APP开发方面,小弟没有很多的经验,只是进行了粗略的了解。以上就是汇总到的一些关于移动端UI框架、PC端及混合APP开发UI框架方面的资料。当然,当今前端飞速发展,关于UI框架方面的很多都没有总结和汇总到,希望小伙伴们有了解到的可以留言喔。




    作者:PC.aaron

    出处:http://www.cnblogs.com/aaron-pan/

    本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

    展开全文
  • 默认排序 itlr ...看你做什么,如果对性能要求苛刻,比如地图App这种,应该考虑React Native或者NativeScript这样的技术,因为可以编译成原生App。否则我会推荐
  • 原文链接: https://segmentfault.com/a/1190000015493097前言最近在使用BUI Webapp开发的一个小商城项目在微信上遇到一些坑及变态需求, 层层深入, 整理一下给后来人参考. 一定有你还不知道的!调试缓存问题描述: ...
  • 1. vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约,是我喜欢的风格 star 2.3k中文文档 在线预览2.vux 基于WeUI和Vue(2.x)开发的移动端UI组件库 star 10k基于webpack...
  • Vue常用UI框架,包含Web端和App端
  • vue的UI框架

    2019-10-28 19:26:27
    介绍:element ui框架的按钮组件,这款由饿了么前端开源的UI框架,一经面世,就收获大量程序员的芳心。在github 上更是高达29.8k的star早已说明一切。用于开发PC端的页面还是绰绰有余的。如果说你是用vue开发者,却...
  • 优秀的基于VUE移动端UI框架合集 \1. vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约,是我喜欢的风格 star 2.3k 中文文档 在线预览 2.vux 基于WeUI和Vue(2.x)开发的移动端UI...
  • 特别说明:这是我目前在接触过和使用过的,自认为是最好用的一个小程序开源框架库。小程序到底有多火,看看目前推出的开源框架以及组件库就知道了。由于小程序开发的火爆,大家都在致力于探索如何更好的,更加高效的...
  • 1.5 版本更新说明 BUI 1.5版本以后变化很大,统一新的风格,新的规范750,新增基于Dom的数据驱动,完善了单页路由页面的生命周期等等,在...后续我们还会整理一些实战类的教程,欢迎关注BUI Webapp专栏。 一...
1 2 3 4 5 ... 20
收藏数 2,187
精华内容 874
关键字:

ui框架 微信webapp