总结主流的移动端webUI框架

不爱青椒
13,938 阅读4分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

Amaze UI

中国首个开源 HTML5 跨屏前端框架  文档地址amazeui.shopxo.net/widgets/tab…

在线项目地址zjhr.github.io/vue-amazeui…

  • Amaze UI 以移动优先（Mobile first）为理念，从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流。
  • Amaze UI 含近 20 个 CSS 组件、20 余 JS 组件，更有多个包含不同主题的 Web 组件，可快速构建界面出色、体验优秀的跨屏页面，大幅提升开发效率。
  • 相比国外框架，Amaze UI 关注中文排版，根据用户代理调整字体，实现更好的中文排版效果；兼顾国内主流浏览器及 App 内置浏览器兼容支持。
  • Amaze UI 面向 HTML5 开发，使用 CSS3 来做动画交互，平滑、高效，更适合移动设备，让 Web 应用更快速载入。 缺点： AmazeUI在渲染速度和兼容性方面比如IE8上做的还不够好，而且更新的速度比较慢。其 JavaScript 部分依赖于笨重的 jQuery

 cube-ui（Vue）

cube-ui 是由滴滴开源的基于 Vue.js 实现的移动端组件库。 

didi.github.io/cube-ui/#/z…

● 质量可靠：由滴滴内部组件库精简提炼而来，历经考验，并且每个组件都有充分单元测试，为后续集成提供保障。
● 体验极致：以迅速响应、动画流畅、接近原生为目标，在交互体验方面追求极致。
● 标准规范：遵循统一的设计交互标准，高度还原设计效果；接口标准化，统一规范使用方式，开发更加简单高效。
● 扩展性强：支持按需引入和后编译，轻量灵活；扩展性强，可以方便地基于现有组件实现二次开发。

Framework7

Framework7 是一个开源免费的框架可以用来开发混合移动应用（原生和HTML混合）或者开发 iOS & Android 风格的WEB APP。也可以用来作为原型开发工具，可以迅速创建一个应用的原型。framework7.io/vue/login-s…

  • Framework7 最主要的功能是可以使用HTML、CSS和JS来开发iOS7应用。Framework7 是完全免费开源的。
  • Framework7 并不能兼容所有的设备。她只专注于为 iOS 和 Google Material 设计提供最好的体验。
  • 如果你想开发 iOS 或者 Android 混合应用（Phonegap）或者你想开发 iOS 和 Google Material 风格的WEB APP，那么Framework7将会是你的首选。

 Mint UI (Vue)

是饿了么团队开发的基于vue.js的移动端UI库 mint-ui.github.io/#!/zh-cn

image.png

缺点：mint-ui 近几年好像都没有维护和更新，组件遇到问题很难被解决，

Weex UI (Vue)

一个基于 Weex 的富交互、轻量级、高性能的 UI 组件库 apache.github.io/incubator-w…

(link.segmentfault.com/?enc=76FcPn…)

image.png

Vant

Vant 是一个轻量、可靠的移动端组件库，于 2017 年开源。

目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。

特性

  • 🚀 性能极佳，组件平均体积小于 1KB（min+gzip）
  • 🚀 70+ 个高质量组件，覆盖移动端主流场景
  • 💪 使用 TypeScript 编写，提供完整的类型定义
  • 💪 单元测试覆盖率超过 90%，提供稳定性保障
  • 📖 提供丰富的中英文文档和组件示例
  • 📖 提供 Sketch 和 Axure 设计资源
  • 🍭 支持 Vue 2、Vue 3 和微信小程序
  • 🍭 支持主题定制，内置 700+ 个主题变量
  • 🍭 支持按需引入和 Tree Shaking
  • 🍭 支持无障碍访问（持续改进中）
  • 🍭 支持深色模式（从 Vant 4 开始支持）
  • 🍭 支持服务器端渲染
  • 🌍 支持国际化，内置 20+ 种语言包

zui

www.openzui.com/#/

  • 大部分书写方式继承Bootstrap，从Bootstrap方便迁移到ZUI，学习成本低，而且写法上更精简；
  • 需要的实用功能都能在ZUI中提供，即使是第三方组件也提供统一的样式和主题支持；
  • 即使ZUI包含的内容更丰富，也会控制核心内容打包后体积大小，一般css不超过150k（目前130k，精简版95k），js不超过100k（目前79k，精简版33k），精简版包含绝大部分功能，但体积更小。非核心内容按需加载，推荐自定义编译；

SUI Mobile

来自：阿里，SUI Mobile 是一套基于 Framework7 开发的UI库。它非常轻量、精美，只需要引入我们的CDN文件就可以使用，并且能兼容到 iOS 6.0+ 和 Android 4.0+，非常适合开发跨平台Web App。轻量的UI库
SUI Mobile 非常轻量，核心库压缩Gzip后的JS、CSS网络传输体积总共只有52K，却提供了20+个常用的组件

SUI Mobile经常打不开，好像不维护了，推荐使用优先级由高到低依次是 Vant，Mint UI (Vue)或者zui，amazeUI, cube-ui，

avatar
文章
阅读
粉丝