移动端前端框架、前端移动端用什么组件库 收藏 0

做WEB前端开发需要了解的11大前端框架

做前端开发需要了解的11大前端框架，这些框架有些可以帮助你提高效率，有的可以让你学习，有助于更好的了解前端的技巧和经验。

Bootstrap

Bootstrap的用法及其简单(这也可能就是Bootstrap作者阅攻城士无数，了解他们痛的结果)，以至于是个小前端都可以快速上手，几乎没什么学习成本。

官网：http://getbootstrap.com/

Github：https://github.com/twbs/bootstrap/

AmazeUI

按照官方的话说就是“基于社区开源项目构建的一个跨屏前端框架，以移动优先，从小屏到大屏，最终实现所有屏幕适配，适应移动互联潮流”。但其实我就是看中它号称能解决国内浏览器存在的跨屏适配和兼容性问题的技术问题。

官网：http://amazeui.org/

Github：https://github.com/amazeui/amazeui

FrozenUI

其中QQ会员前端就是用的FrozenUI，并且这套框架开源，欣喜若狂耐不住心里的寂寞直接上手三下五除二试了一遍，初体验的就是基础样式效果简单色调清爽，有个比较活跃的社区所以组件什么的也比较丰富。

Github：https://github.com/frozenui/frozenui

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

WeUi

第四个是同FrozenUI差不多的WeUi了，也是一个比较专一的框架，应该说比前者更专一，话说连个官网都不搞，所有答疑都在gitHubIssues解决了，这个框架极其简单，体积当然就不用说了，模块也就7个左右，不过虽然小做的却不错

Github：https://github.com/weui/weui

DEMO：http://weui.github.io/weui/

Quickly

故名思议 快，天下武功无坚不摧，唯快不破，代码如是。quickly提供了必要的css样式重写，以及常用类，还有一些常用组件，它很小，不过栅格系统、表单、表格、按钮、文字等一个都不少，非常适合项目的二次开发。

Gitee：https://gitee.com/qietuwang/quickly

DEMO：http://www.qietu.com/quickly/

SUI

“SUI是一套基于bootstrap开发的前端组件库，同时她也是一套设计规范。通过SUI，可以非常方便的设计和实现精美的页面”。果然还是直接引用官方给的枯燥无味广告要节省自己的脑细胞(囧…)，当然了就像广告说的如果你之前用过Bootstrap，那么可以轻松转向SUI，这可能就是淘宝给前端屌丝们的福利了。

Github：https://github.com/sdc-alibaba/sui

官网：http://sui.taobao.org/sui/docs/index.html

AUI

第六个是最近刚起来的AUI，虽然作者声称是专为APICloud开发者设计的一套UI框架，但实际它还是解决了很多移动前端开发的普遍问题，是主要面向混合开发的CSS框架。看起来作者比较猖狂，各种高级CSS3遍地使用，这也使得我不得不去查查这些个CSS3的兼容性。不负众望果然选的都是兼容不错的属性，哈哈了一顿激动从前辈手上大胆认识了几个好东西，并且框架还提供了聊天界面、计数列表等组件，解决了很多复杂的让我骂娘的布局，现在可以直接拿走就用。

Github：https://github.com/liulangnan/aui

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

MUI

这个框架给我的吸引之处就是它的UI是以IOS为主体设计的，当然它也补充了android特有UI样式。并且MUI官方声称用来开发APP还能够提高用户使用流畅度，然后便试着了解和使用一段时间。

官网：http://dev.dcloud.net.cn/mui/

Github：https://github.com/dcloudio/mui

SemanticUI

UI上跟Bootstrap没太多的区别，不过代码命名规范上却相差甚大，我自认为SemanticUI是不是就是想做的不一样的出来，它的命名全是采用复合的方式，类名特别的离散，用的时候你得很小心自己扩展或者新增的class命名与它的类名冲突。

官网：http://www.semantic-ui.cn/

Github：https://github.com/semantic-org/semantic-ui/

Foundation

Foundation算是框架界的元老啦，都说框架去的早，而这个框架一直到现在依然这么的热门，如果你比较介意Bootstrap开发撞脸的尴尬事情，那么你可以考虑使用Foundation这个即使你使用预定义的UI元素,也不会与其他网站太像，就像官方说的给开发者更灵活的框架体验。

官网：http://foundation.zurb.com/

Github：https://github.com/zurb/foundation-sites

Pure

框架小巧，并且是纯CSS，没有太多的牵扯，好用来与其他框架快速结合使用。

官网：http://purecss.io/

Github：https://github.com/yahoo/pure/

百度开源的低代码前端框架，支持网页和移动端页面开发

在经历了十几年的发展后，前端开发变得越来越复杂，门槛也越来越高，要使用当下流行的 UI 组件库，你必须懂 npm、webpack、react/vue，必须熟悉 ES6 语法，最好还了解状态管理，比如 Redux，如果没接触过函数式编程，光入门都很费劲，而入门之后会发现它还有巨大的生态，相关的库有 2347 个，很多功能相似，挑选成本高。

然而前端技术的发展不会停滞，等学完这些后可能会发现大家都用 Hooks 了、某个打包工具取代 Webpack了。使用amis只需要简单配置就能完成所有页面开发，你不需要了解 React/Vue、Webpack，甚至不需要很了解 JavaScript，即便没学过 amis 也能猜到大部分配置的作用，对于大部分常用页面，应该使用最简单的方法来实现，甚至不需要学习前端框架和工具。

• 不需要懂前端：在百度内部，大部分 amis 用户之前从来没写过前端页面，也不会 JavaScript，却能做出专业且复杂的后台界面，这是所有其他前端 UI 库都无法做到的；
• 不受前端技术更新的影响：百度内部最老的 amis 页面是 4 年多前创建的，至今还在使用，而当年的 Angular/Vue/React 版本现在都废弃了，当年流行的 Gulp 也被 Webpack 取代了，如果这些页面不是用 amis，现在的维护成本会很高；
• 享受 amis 的不断升级：amis 一直在提升细节交互体验，比如表格首行冻结、下拉框大数据下不卡顿等，之前的 JSON 配置完全不需要修改；
• amis 内置大量组件，包括了富文本编辑器、代码编辑器、diff、条件组合、实时日志等业务组件，绝大部分中后台页面开发只需要了解 amis 就足够了；还可以通过 自定义组件 来扩充组件，实际上 amis 可以当成普通 UI 库来使用。

amis的定位是一个低代码的前端框架，所以这里我们只介绍低代码部分，如果你想使用纯JSON配置来完成页面开发，那么请查看一下文档说明，当然你也可以使用90%低代码+10%代码开发的混合模式，既提升了效率，又不失灵活性。

注意：

1.目前 amis-editor 未开源，但可以免费使用（包括商用）

2.要使用编辑器必须熟悉 React

1. 在项目中使用amis-editor

安装依赖

使用方法

属性说明：

• value: any 值，amis 的json 配置。
• onChange: (value: any) => void。 当编辑器修改的时候会触发。
• preview?: boolean 是否为预览状态。
• autoFocus?: boolean 是否自动聚焦第一个可编辑的组件。
• plugins 插件类集合

2. 添加自定义组件

加自定义编辑器的方式有两种：

• registerEditorPlugin 注册全局插件。
• 不注册，但是调用 <Editor> 的时候时候通过 plugins 属性传入。

效果都一样，重点还是怎么写个 Plugin，示例：

定义好 plugin 后，可以有两种方式启用

示例只做了简单的说明，可用属性还有很多，具体还是先看 npm 包里面的 .d.ts 文件。

3. 编辑器效果

• 网页版

• 移动端

• 拖拽组件

• 查看代码

从网页到移动端，包括App、小程序等，amis可以满足的页面需求，但在一些特殊场景，比如有些页面追求个性化的视觉效果，amis 就不适用，实际上绝大部分前端 UI 组件库也都不适合，只能定制开发。更多有关amis的内容可自行前往阅读。

开源地址：https://gitee.com/baidu/amis

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com