本文主要介绍微信小程序中的 WeUI组件库的具体使用方法，通过具体的示例代码进行介绍，相信能够对大家的学习和工作都有一定的参考学习意义，欢迎大家一起学习进步。

WeUI组件库 官方文档

一、前言

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

二、下载

1. git 下载：https://github.com/Tencent/weui-wxss

点击链接进入 GitHub ，进入下面的页面，点击 Code 选择方式进行下载。

下载好打开应该是这个样子的：
使用：

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

2. 官网按需下载：

WeUI下载


勾选自己需要用到的组件，直接下载就可以，下载好放到自己的项目中就可以直接使用。非常方便，不需要下载其他额外组件文件。

三、引入 weui.wxss

1. 手动引入：
   将 dist/style/weui.wxss 下的 weui.wxss 样式文件复制到项目根目录下；
   在全局 app.wxss 中加入 @import "weui.wxss"，完成样式文件的引入

/**app.wxss**/
@import 'weui.wxss';
page { ... }

以下两种方式使用方法见官网就可以：

2. useExtendedLib 扩展库 ：useExtendedLib 扩展库

{
  "useExtendedLib": {
    "weui": true
  }
}

4. npm构建：npm包名为 weui-miniprogram
   具体使用方式见：npm构建支持

四、使用dist/example/下的组件

这个文件夹下的就是 WeUI 组件库的所有组件了，我们可以在 WeUI 上查看相关组件的样式展示，然后根据我们的具体需求来选择某个组件的使用。

因为example 下的组件文件太多，我们不可能全都用到，因此不可能全部放到我们的小程序中，这样会导致我们的小程序体积会变大，所以我们要按需引入即可。

比如，我们要在某个页面中用到button组件，我们就需要在这个页面的json文件中引入该组件：

// index.json
  "usingComponents": {
    "botton": "../example/botton/botton"
  },

五、示例代码

使用一个组件的完整示例代码：Dialog组件

// index.json
{
  "usingComponents": {
    "mp-dialog": "../example/dialog/dialog"
  }
}

// index.wxml
<mp-dialog title="弹窗" show="{{dialogShow}}" bindbuttontap="tapDialogButton" buttons="{{buttons}}">
	<view>提示内容</view>
</mp-dialog>

// index.js
Page({
    data: {
        dialogShow: false,
        buttons: [{text: '取消'}, {text: '确定'}],
    },
    openConfirm: function () {
        this.setData({
            dialogShow: true
        })
    },
    tapDialogButton(e) {
        this.setData({
            dialogShow: false,
        })
    }
});

具体细节内容可以参照官网具体的组件示例进行代码的编写与配置。

六、参考文档

WeUI 官网：https://developers.weixin.qq.com/miniprogram/dev/extended/weui/
WeUI 官网按需下载：https://developers.weixin.qq.com/miniprogram/dev/extended/weui/download.html
GitHub WeUI：https://github.com/Tencent/weui-wxss
微信小程序 npm 支持：https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html
useExtendedLib 扩展库：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#useExtendedLib

---

有任何问题欢迎大家留言讨论，大家共同学习进步。