微信小程序UI框架之【weui】怎样使用

article/2025/9/22 20:46:11

介绍

官网：
https://weui.io/
这是一套基于样式库weui-wxss开发的小程序扩展组件库，同微信原生视觉体验一致的UI组件库，由微信官方设计团队和小程序团队为微信小程序量身设计，令用户的使用感知更加统一。
在这里插入图片描述

官方文档：

https://developers.weixin.qq.com/miniprogram/dev/extended/weui/

使用方法demo：

安装

方法一：
使用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。

手机预览

请用微信扫码

单页面引入&使用：

代码下载
https://github.com/Tencent/weui-wxss
WeUI 官方 Github：https://github.com/weui/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 。来个简单的范例：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"><title>WeUI</title><!-- 引入 WeUI --><link rel="stylesheet" href="http://res.wx.qq.com/open/libs/weui/0.4.0/weui.min.css">
</head>
<body ontouchstart><!-- 使用 WeUI --><a href="" class="weui_btn weui_btn_primary">绿色按钮</a>
</body>
</html>

注意：

viewport 那个 meta 标签不要忘了加
body 标签内有个 ontouchstart 属性也不要忘了
这样就搞定了，你可以任意使用各种组件了，关于组件怎么使用，去看官方 Wiki 就好了，或者 F12 去扒官方 Demo 把他们的代码复制过来就行了，就是这么简单粗暴！

资料：
https://www.cnblogs.com/jing-zhe/p/11000971.html

https://www.jianshu.com/p/6c8e55fc501b

https://blog.csdn.net/weixin_45416217/article/details/100697854