WeUI 为微信 Web打造权限UI框架

WeUI 为微信 Web 服务量身设计

1 WeUI 是什么？

WeUI 是微信官方设计团队为微信 Web 开发量身打造的一个 UI 样式库，你可以把它理解为一个前端框架，类似于 Bootstrap 的那种。由于是微信官方出品，所以对微信的兼容性基本没有太大问题，而且各组件的样式和微信一样，能够和微信很好的融合在一起，给用户较好的体验。。

WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。

2 安装

方式一（推荐）

微信官方、Staticfile CDN 和 cdnjs 为 WeUI 提供了 CDN 链接，推荐使用，链接如下：

来源	地址
微信官方	//res.wx.qq.com/open/libs/weui/0.4.3/weui.min.css
Staticfile CDN	//cdn.staticfile.org/weui/0.4.3/style/weui.css
cdnjs	//cdnjs.cloudflare.com/ajax/libs/weui/0.4.3/style/weui.css

方法二：

使用bower进行安装

bower install --save weui

方法三：

使用npm进行安装

npm install --save weui

开发

git clone https://github.com/weui/weui.git
cd weui
npm install -g gulp
npm install
gulp -ws

运行gulp -ws命令，会监听src目录下所有文件的变更，并且默认会在8080端口启动服务器，然后在浏览器打开 http://localhost:8080/example。

推荐使用方式一，直接进行引用链接或者将文件下载下来本地引入

3 使用

WeUI 官方 Github：https://github.com/weui/weui

WeUI 官方 Demo：http://weui.github.io/weui

WeUI 官方 Releases：https://github.com/weui/weui/releases

WeUI 官方 Wiki：https://github.com/weui/weui/wiki

WeUI 是一个样式库，核心文件就是 weui.css，如果用于生产环境，建议使用官方提供的 CDN 或下载官方最新的 Releases 引入即可，CDN 地址可以在官方 Wiki 中找到，生产环境建议使用压缩后的 weui.min.css 。

模块：目前包含12个模块 (Button, Cell, Toast, Dialog, Progress, Msg, Article, ActionSheet, Icons, Panel, Tab, SearchBar).

注意：

标签里要加上：

引入：

的开始标签要加属性：

WeUI，你可以任意使用各种组件了，关于组件怎么使用，去看官方文档就好了， F12 去官方代码 Demo 把代码复制过来就行了。

更多查看文档实例：

gtihub : https://github.com/Tencent/weui

wiki : https://github.com/Tencent/weui/wiki

基础样式 : https://weui.io/

w3c 菜鸟： https://www.runoob.com/w3cnote/weui-for-weixin-web.html