小程序weui官网：https://developers.weixin.qq.com/miniprogram/dev/extended/weui/

更多请看https://www.jianshu.com/p/ada94d3a3e86

方法一：npm导入WeUI（推荐）

1. 在项目根路径下开启终端

2. 执行 npm init 创建package.json (不想一个一个配置也可以执行npm init -y)

3. npm安装WeUi，执行cnpm install --save weui-miniprogram

4. 然后点击工具选择构建npm

5. 然后会提示完成构建，目录会多了一个文件夹，这个文件夹放的就是我们要用的组件和css样式

6. 使用

在全局css文件app.wxss导入WeUI的样式，这样全部page可以用到了

@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';

使用组件了，我用index来示范，在index.json写入组件名和路径，（注意路径不可以多些一个空格，末尾也不可以多写一个逗号，会报错）

 "mp-checkbox": "../../miniprogram_npm/weui-miniprogram/checkbox/checkbox"

checkbox就是我用来演示的单选框组件，要用其他组件的话打开miniprogram_npm文件夹下的weui-miniprogram文件夹，然后里边就是官方已有的组件，要用改一下名字和地址名就ojbk了。

然后在index.wxml中使用组件

<mp-checkbox label="hello！"></mp-checkbox>

效果：

结束！！！

方法二：下载导入方式

1.下载weui

进入GitHub https://github.com/weui/weui-wxss/进入如下页面，点击红色框选下载程序代码
　
　　解压后进入文件夹，图示路径下的weui.wxss就是我们所需要的weui库

2.引入weui

打开微信开发者工具创建项目（这个就不在介绍了），目录如下

　　创建好项目，接下来要做的就是将刚才下载解压的weui文件夹里的weui.wxss，直接复制粘贴放在项目根目录下即可
　　
到此引入步骤还没结束，要在项目中使用，还需要在全局app.wxss中加入@import “weui.wxss”，至此完成引入

3.使用weui

从GitHub上下载的weui文件夹里除了我们要使用的weui.wxss文件，还有一个很重要的文件夹，那就是example文件

　　直接将该文件扔进vscode里，我们就可以看到各个组件的代码。微信小程序weui网站 https://weui.io/ 上有小程序weui的样式展示，当然我们也可以直接进weui的小程序手机上查看weui的样式，然后根据需求来选择组件的使用，但是这里都没有介绍weui具体的使用，但是example文件夹里有。

上图所示就是weui使用代码，这里我们随意挑选一个模块badge示例，对应的badge.wxml的代码其实就是weui的各个badge徽章标记的样式，我们直接将badge.wxml中的代码复制，粘贴到小程序项目中的新建页面test.wxml中看看。

保存一下，我们就可以在模拟器中看到如下效果