蓁祎家进步中

# weui

返回开源：前端

WEUI

WeUI，是 Tencent（腾讯开源） 在 Github 上开源的微信风格的基础样式库，项目位于 https://github.com/Tencent/weui
目前版本为 v2.4.0。WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。
包含 button、cell、dialog、 progress、 toast、article、actionsheet、icon 等各式元素，适配 iOS 和安卓系统，视觉标准基本与微信保持一致。
对于进行微信内网页和微信小程序开发而言，可以十分方便地实现与微信协调一致的基础 UI 界面，提升用户视觉体验。

# 安装

WeUI 作为一个前端基础样式库，只需引入单个 CSS 样式文件就可以使用了，项目提供了 CDN 链接：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
        <title>WeUI</title>
        <!-- 引入 WeUI CDN 链接 -->
        <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.0/weui.min.css"/>
    </head>
    <body>
        <!-- 使用 -->
        <a href="javascript:;" class="weui-btn weui-btn_primary">绿色按钮</a>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

也可以通过 npm 进行下载，引入到前端项目中：

npm install --save weui
1

然后在 Node 项目中引用：

import "weui";
1

WeUI 提供了丰富的移动端组件，包括：

  • 基础组件：包括 Flex 布局、面板、图标、进度条等
  • 表单：包括 按钮、输入框、选择框、列表等
  • 操作反馈：包括 对话框、消息、弹出式显示等
  • 导航相关：包括 导航栏、标签栏等
  • 搜索相关：搜索栏等
<a href="javascript:" class="weui-btn weui-btn_primary">页面主操作</a>
<a href="javascript:" class="weui-btn weui-btn_primary weui-btn_loading"><i class="weui-loading"></i>页面主操作</a>
<a href="javascript:" class="weui-btn weui-btn_disabled weui-btn_primary">页面主操作</a>
1
2
3

开源社区还提供了不少的第三方扩展，如 vue-weui、react-weui 等，方便使用不同前端框架的开发者使用，提高开发效率。