1.FrozenUI
FrozenUI 是一套基于移动端的 UI 库. 它非常轻量, 精美, 遵从手机 QQ 设计规范, 提供了表单, 对话框, 列表等常用组件. 此外, FrozenUI 还提供文字截断, 1px 边框, rem, 两端留白等常用场景的解决方案. CSS 做得更模块化和颗粒化, 使用 sass 编写 CSS 代码, 你完全可以按照实际情况按需加载.
开发团队: QQVIP FD Team
主页: http://frozenui.github.io/
- Github: https://github.com/frozenui/frozenui
- Demo: http://frozenui.github.io/frozenui/demo/index.html
FrozenJS 是针对移动端开发的 js 组件库, 其依赖 zepto.js 和 FrozenUI.FrozenJS 的所有组件均以 zepto 的插件的形式存在.
FrozenJS 包括:
basic:FrozenJS 的一些基础功能, 包括模板引擎, tap 支持等.
ui: 主要是一些触屏常用的 UI 组件, 包括 dialog 等.
effect: 非常用的特效库, 特殊场景使用到是可以单独调用.
FrozenJS 针对移动端而生, 可以处理大部分移动端的 UI 呈现. 而且还可以满足某些特殊场景的特效展示.
FrozenJS 的特点
调用简单.
体积小, js 只依赖 zepto.
可移植性强 (支持模块化与非模块化调用方式)
FrozenJS 的理念
为移动而生
轻量, 可复用可扩展
印象: 那个 H5 页面的动画库很好, 很强大, 如果单纯的做 H5 活动页面, 这个绝对是第一选择! 当然了, 如果开发 webApp, 可以优先选择这个
2.WeUI
WeUI 是一套同微信原生视觉体验一致的基础样式库, 为微信 Web 开发量身设计, 可以令用户的使用感知更加统一.
开发团队: Wechat Official Design Team
- Github: https://github.com/weui/weui
- Demo: http://weui.github.io/weui/
我的感觉: 还比较年轻, 轻量级的, 出了不少第三方的扩展, 基于 vue 的, React 的都有, 我比较喜欢那个 jQuery WeUI, 如果单纯做基于微信的开发, 可以优先选择这个!
jQuery WeUI
jQuery WeUI 是专为微信公众账号开发而设计的一个简洁而强大的 UI 库, 包含全部 WeUI 官方的 CSS 组件, 并且额外提供了大量的拓展组件, 丰富的组件库可以极大减少前端开发时间.
jQuery WeUI 的最大特点是它只提供 UI 组件, 并不会对项目所使用的框架和其他库有任何的限制, 几乎可以在任何环境下使用. 无论你的项目是基于 jQuery, 还是 React, Angular, Vue, 你都会发现 jQuery WeUI 能非常方便的和他们结合使用. 既是你的项目是一个有很悠久历史的老项目, 也几乎可以做到拿来即用.
为什么选择 jQuery WeUI
jQuery WeUI 的定位正如 jQuery 的定位: 做一把锋利易用的小刀, 而不是做一个笨重的大炮.
文档地址: https://github.com/Tencent/weui.js/blob/master/docs/README.md
1. 简单易用, 无上手难度
2. 丰富强大的组件库, 并且还在不断完善中
3. 轻量, 无限制, 可以结合任何主流 JS 框架使用, 比如 Vue, Angular, React 等
4. 高性能的 CSS3 动画, 低端手机上依然可以较流畅运行
5. 详尽完善的官方文档
6. 标准稳定的 API, 基本可以保证版本透明更新
7. 基于 MIT 协议发布, 免费开源
8. 简洁而不简单
9. 按钮, 列表之类的组件不需要 JS, 使用非常简单, 只要从官网复制下来 HTML 代码并粘贴到你的项目中即可.
备注: 对于需要用到 JS 的组件, 如果你使用过 jQuery, 那么你使用 jQuery WeUI 将没有任何障碍. 所有的 JS 组件都是标准的 jQuery 插件
依赖说明
jQuery WeUI 依赖 weui.css 和 jQuery, 但是请注意要使用正确的版本.
其中 weui 的版本需要和当前的 jQuery WeUI 对应, 如果你不确定对应版本可以去看 更新日志 里面的说明. 或者你可以直接使用此项目中的 dist/lib/weui.min.css.
jQuery 的版本请至少在 V1.7.0 以上.
当然如果你不愿意自己去找依赖文件, 可以直接看下面的 CDN 服务.
使用 CDN
推荐直接使用由 BootCDN 提供的 CND 服务, 速度快并且很稳定:
注意, BootCDN 有一定的延迟, 新版本发布后需要几天时间才会同步. 如果发现找不到最新版的 CDN, 请耐心等待几天即可.
- <!-- head 中 -->
- <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
- <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">
- <!-- body 最后 -->
- <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
- <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
- <!-- 如果使用了某些拓展插件还需要额外的 JS -->
- <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/swiper.min.js"></script>
- <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/city-picker.min.js"></script>
BootCDN 还提供了各个不同的版本, 具体请参阅 http://www.bootcdn.cn/jquery-weui/
BootCDN 是同步 CDNJS 的, jQuery WeUI 在 CDNJS 的地址是: https://cdnjs.com/libraries/jquery-weui. 因为 CDNJS 在国内速度比较慢不建议使用, 尽量用 BootCDN 的服务 https://cdnjs.com/libraries/jquery-weui。因为CDNJS在国内速度比较慢不建议使用,尽量用BootCDN的服务 .
BootCDN 由又拍云提供 CDN 服务支持, 感谢又拍云对开源项目的支持.
3.SUI Mobile
轻量, 小巧, 精美的 UI 库, 方便迅速搭建手机 H5 应用, 也非常适合开发跨平台 Web App.
开发团队: 阿里巴巴共享业务事业部 UED 团队
主页: http://m.sui.taobao.org/
- Github: https://github.com/sdc-alibaba/SUI-Mobile
- Demo: http://m.sui.taobao.org/demos/
兼容: 兼容到 iOS 6+ 以及 Android 4.0+
基于 Framework7 进行开发, 并参考 Ratchet,Fastclick 开源库.
我的感觉: 这个很本地化, 上面提到的那个 Jquery WeUI 的作者同样做了一个 Light7, 基于 Framework7 的, 跟这个有点类似. 总体觉得淘宝的东西都是商务化的系统才用到, 如果商城, 购物系统这个不错.
来源: http://www.qdfuns.com/article/33760/b9706b06029e100d97a336daf66416b2.html