微信小程序

微冷 2022/1/9 git

# WeUI for 小程序

# 概述

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。

源码地址https://github.com/Tencent/weui-wxss/ (opens new window)

扫码预览：
half

# 使用

样式文件可直接引用dist/style/weui.wxss，或者单独引用dist/style/widget下的组件的wxss
组件的wxml结构请看dist/example/下的组件

# 实操

首先，进入它的 GitHub 仓库，在dist/style目录下面，找到weui.wxss这个文件，将源码全部复制到你的app.wxss文件的头部。

在自己的代码中使用

<view>
  <button class="weui-btn weui-btn_primary">
    主操作
  </button>
  <button class="weui-btn weui-btn_primary weui-btn_loading">
    <i class="weui-loading"></i>正在加载
  </button>
  <button class="weui-btn weui-btn_primary weui-btn_disabled">
    禁止点击
  </button>
</view>

1
2
3
4
5
6
7
8
9
10
11

说明：

weui-btn：按钮样式的基类
weui-btn_primary：主按钮的样式。如果是次要按钮，就使用weui-btn_default。
weui-btn_loading：按钮点击后，操作正在进行中的样式。该类内部需要用元素，加上表示正在加载的图标。
weui-btn_disabled：按钮禁止点击的样式。