小程序weui官網(wǎng)：https://developers.weixin.qq.com/miniprogram/dev/extended/weui/

更多請(qǐng)看https://www.jianshu.com/p/ada94d3a3e86

方法一：npm導(dǎo)入WeUI（推薦）

1. 在項(xiàng)目根路徑下開啟終端

2. 執(zhí)行 npm init 創(chuàng)建package.json (不想一個(gè)一個(gè)配置也可以執(zhí)行npm init -y)

3. npm安裝WeUi，執(zhí)行cnpm install --save weui-miniprogram

4. 然后點(diǎn)擊工具選擇構(gòu)建npm

5. 然后會(huì)提示完成構(gòu)建，目錄會(huì)多了一個(gè)文件夾，這個(gè)文件夾放的就是我們要用的組件和css樣式

6. 使用

在全局css文件app.wxss導(dǎo)入WeUI的樣式，這樣全部page可以用到了

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

使用組件了，我用index來示范，在index.json寫入組件名和路徑，（注意路徑不可以多些一個(gè)空格，末尾也不可以多寫一個(gè)逗號(hào)，會(huì)報(bào)錯(cuò)）

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

checkbox就是我用來演示的單選框組件，要用其他組件的話打開miniprogram_npm文件夾下的weui-miniprogram文件夾，然后里邊就是官方已有的組件，要用改一下名字和地址名就ojbk了。

然后在index.wxml中使用組件

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

效果：

結(jié)束！！！

方法二：下載導(dǎo)入方式

1.下載weui

進(jìn)入GitHub https://github.com/weui/weui-wxss/進(jìn)入如下頁(yè)面，點(diǎn)擊紅色框選下載程序代碼
　
　　解壓后進(jìn)入文件夾，圖示路徑下的weui.wxss就是我們所需要的weui庫(kù)

2.引入weui

打開微信開發(fā)者工具創(chuàng)建項(xiàng)目（這個(gè)就不在介紹了），目錄如下

　　創(chuàng)建好項(xiàng)目，接下來要做的就是將剛才下載解壓的weui文件夾里的weui.wxss，直接復(fù)制粘貼放在項(xiàng)目根目錄下即可
　　
到此引入步驟還沒結(jié)束，要在項(xiàng)目中使用，還需要在全局app.wxss中加入@import “weui.wxss”，至此完成引入

3.使用weui

從GitHub上下載的weui文件夾里除了我們要使用的weui.wxss文件，還有一個(gè)很重要的文件夾，那就是example文件

　　直接將該文件扔進(jìn)vscode里，我們就可以看到各個(gè)組件的代碼。微信小程序weui網(wǎng)站 https://weui.io/ 上有小程序weui的樣式展示，當(dāng)然我們也可以直接進(jìn)weui的小程序手機(jī)上查看weui的樣式，然后根據(jù)需求來選擇組件的使用，但是這里都沒有介紹weui具體的使用，但是example文件夾里有。

上圖所示就是weui使用代碼，這里我們隨意挑選一個(gè)模塊badge示例，對(duì)應(yīng)的badge.wxml的代碼其實(shí)就是weui的各個(gè)badge徽章標(biāo)記的樣式，我們直接將badge.wxml中的代碼復(fù)制，粘貼到小程序項(xiàng)目中的新建頁(yè)面test.wxml中看看。

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