WeUI教程/第三方扩展及其他UI框架对比

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。WeUI 为微信 Web 服务量身设计的h5框架。严格的讲它是一个css库。算一个精简的库，它是使用less编写，最终编译成css，压缩成weui.min.css

WeUI使用方法

WeUI 是一套与微信原生 UI 一致的 UI 库，核心文件是 weui.css，只需要获取到该文件，然后在页面中引入，即可使用 WeUI 的组件。 微信官方、BootCDN 和 cdnjs 为 WeUI 提供了 CDN 链接，推荐使用，链接如下：

v2.1.3 https://res.wx.qq.com/open/libs/weui/2.1.3/weui.css

https://res.wx.qq.com/open/libs/weui/2.1.3/weui.min.css

v1.1.3 https://res.wx.qq.com/open/libs/weui/1.1.3/weui.css

https://res.wx.qq.com/open/libs/weui/1.1.3/weui.min.css

v0.4.3 https://res.wx.qq.com/open/libs/weui/0.4.3/weui.css

https://res.wx.qq.com/open/libs/weui/0.4.3/weui.min.css

其他资源

来源 地址 微信官方 //res.wx.qq.com/open/libs/weui/1.1.3/weui.min.css 微信官方 //res.wx.qq.com/open/libs/weui/0.4.3/weui.min.css BootCDN //cdn.bootcss.com/weui/0.4.3/style/weui.css cdnjs //cdnjs.cloudflare.com/ajax/libs/weui/0.4.3/style/weui.css （注：cdnjs服务器在国外）

WeUI演示列表及代码

• actionsheet 预览 代码
• article 预览 代码
• badge 预览 代码
• button 预览 代码
• dialog 预览 代码
• flex 预览 代码
• footer 预览 代码
• form 预览 代码
• gallery 预览 代码
• grid 预览 代码
• half-screen-dialog 预览 代码
• icons 预览 代码
• list 预览 代码
• loadmore 预览 代码
• msg_success 预览 代码
• msg_text 预览 代码
• msg_text_primary 预览 代码
• msg_warn 预览 代码
• navbar 预览 代码
• panel 预览 代码
• picker 预览 代码
• preview 预览 代码
• progress 预览 代码
• searchbar 预览 代码
• slider 预览 代码
• tabbar 预览 代码
• toast 预览 代码
• uploader 预览 代码

WeUI第三方扩展

• airyland/vux
• cipchk/ngx-weui
• pengtikui/weui-extension
• kevyu/weui-sass
• Eric-Guo/weui-rails(Using kevyu/weui-sass)
• n7best/react-weui
• aidenzou/vue-weui
• adcentury/vue-weui
• ZTfer/weui-sketch
• i5ting/weui-practice

weui的优点

它很好的解决推入和返回的问题 它有微信一样的ui界面 它还提供了基本的ui组件（弹出框，actionsheet等）

weui的缺点

页面内容过长的时候，滑动不流畅，但可以通过iscroll修正

WeUI与VUX

VUX（读音 [v’ju:z]，同 views）是基于WeUI和Vue(2.x)开发的移动端UI组件库，主要服务于微信页面。基于webpack + vue-loader + vux可以快速开发移动端页面，配合vux-loader方便你在WeUI的基础上定制需要的样式。但VUX并不完全依赖于WeUI，VUX 在 WeUI 的基础上扩展了多个常用组件，但是尽量保持整体UI样式接近WeUI的设计规范。

WeUI与Zepto

Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api。 如果你会用jquery，那么你也会用zepto。中文文档https://www.html.cn/doc/zeptojs_api/

WeUI+是Zepto1.2和WeUI 2.0为基础,收集整理了上百个组件开发而成,兼容IOS和Android平台,主要用于微信/手机网站开发.演示地址https://weui.shanliwawa.top/

LayUI与WeUI

layui 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。Layui比一般UI框架更加方便，不光为我们提供好静态页面，连数据交互这块也帮前端写好了。LayUI官网还提供一些其用户基于LayUI写好的开源的完整系统，比如一个具有所有功能的管理后台，让一些没有设计师或者快速开发的公司，直接拿来修改使用。项目地址https://www.layui.com/

WeUI 为微信 Web 服务量身设计的h5框架。严格的讲它是一个css库。

MUI与WeUI

MUI是一个轻量级的CSS框架，遵循Google的Material Design设计方针。MUI凭着其极小的体积，帮助网页尽可能快地加载，mui.min.css只有6.6KB (gzipped)，mui.min.js只有5.4KB (gzipped)。项目地址https://www.muicss.com/

WeUI只用css文件没有JS文件，但已经有第三方已经集成了，例如jQuery WeUI，WeUI+，他们都加入了幻灯片切换等js特效

jQuery WeUI

jQuery WeUI 是专为微信公众账号开发而设计的一个简洁而强大的UI库，包含全部WeUI官方的CSS组件，并且额外提供了大量的拓展组件，丰富的组件库可以极大减少前端开发时间。jQuery WeUI 提供了总共30+ 个非常实用的组件：列表，表单，卡片，对话框，下拉刷新等。项目地址http://jqweui.com/

iView与WeUI

iView Weapp是一套高质量的微信小程序 UI 组件库。项目地址https://weapp.iviewui.com/

WeUI是微信官方设计团队为微信内网页和微信小程序量身设计

SUI与WeUI

SUI Mobile 是一套基于 Framework7 开发的UI库。它非常轻量、精美，只需要引入CDN文件就可以使用，方便迅速搭建手机H5应用，并且能兼容到 iOS 6.0+ 和 Android 4.0+，非常适合开发跨平台Web App。是阿里巴巴共享业务事业部UED团队开发的。项目地址http://m.sui.taobao.org/

WeUI是由微信官方设计团队为微信内网页和微信小程序量身设计

WePY与WeUI

WePY (发音: /'wepi/) 项目启动于 2017 年 11 月份， 是小程序最早的框架之一，是一款让小程序支持组件化开发的框架，通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化，Promise，Async Functions的引入都是为了能让开发小程序项目变得更加简单，高效。项目地址https://wepyjs.github.io/wepy-docs/。WePY资源汇总：awesome-wepy

WePY可以将WeUI引入到小程序中