小程序weui官網：https://developers.weixin.qq.com/miniprogram/dev/extended/weui/
大家好，我是前端菜鳥，大家可以叫我驚蟄，今天給大家分享一下在微信小程序中對weui的引入和使用，其他的也不再贅述，文中有不對的還請指正，謝謝。
直入主題：
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中看看。
保存一下，我們就可以在模擬器中看到如下效果
到這里我們就已經完成了weui的引入和使用了，接下來只需要根據需求篩選就好