WeUI組件庫(kù)簡(jiǎn)介
這是一套基于樣式庫(kù)weui-wxss開(kāi)發(fā)的小程序擴(kuò)展組件庫(kù)，同微信原生視覺(jué)體驗(yàn)一致的UI組件庫(kù)，由微信官方設(shè)計(jì)團(tuán)隊(duì)和小程序團(tuán)隊(duì)為微信小程序量身設(shè)計(jì)，令用戶(hù)的使用感知更加統(tǒng)一。
微信官方文檔提供兩種方式引入組件
1、 通過(guò) useExtendedLib 擴(kuò)展庫(kù) 的方式引入，這種方式引入的組件將不會(huì)計(jì)入代碼包大小。
2、 可以通過(guò)npm方式下載構(gòu)建，npm包名為weui-miniprogram
推薦使用useExtendedLib 擴(kuò)展庫(kù)的方式引入
一、【useExtendedLib】
注意：前提是APPID是真實(shí)有效的，游客模式只能npm導(dǎo)入。
第一步
在小程序根目錄的app.json里添加：
"useExtendedLib": {
"weui": true
},
第二步
在需要使用weui的頁(yè)面引入，首先在頁(yè)面的 json 文件加入 usingComponents 配置字段：
{
"usingComponents": {
"mp-icon": "weui-miniprogram/icon/icon"
}
}
在對(duì)應(yīng)頁(yè)面的 wxml 中直接使用該組件：
<mp-icon icon="add" color="green" size="{{26}}"></mp-icon>
編譯即可看到圖片！
注意事項(xiàng)
1、weui-miniprogram/icon/icon 前面不要加miniprogram_npm、components等等
2、需要使用真實(shí)APPID，游客模式新建的項(xiàng)目都會(huì)報(bào)錯(cuò)。
編譯報(bào)錯(cuò)
Failed to load resource: the server responded with a status of 500 (Internal Server Error)(env: Windows,mp,1.05.2108130; lib: 2.19.2)
如果沒(méi)有登錄，是游客模式進(jìn)入的，APPID是虛擬的，剛開(kāi)啟就會(huì)報(bào)錯(cuò)：
"useExtendedLib": {
"weui": true
},
Error: Component is not found in path "miniprogram_npm/weui-miniprogram/icon/icon" (using by "pages/person/info")
at e (VM72 WAService.js:2)APPID是虛擬的，引用不到WeUI。
二、【npm方式】
因?yàn)樾枰猲pm下載組件庫(kù)，需要nodeJS環(huán)境，先去命令行查看是否已安裝node，npm是否可用：
npm --version
如果沒(méi)有安裝，請(qǐng)去 Node.js 安裝配置
第一步
命令行到項(xiàng)目文件夾下，運(yùn)行：
npm install --save weui-miniprogram
這時(shí)項(xiàng)目文件夾下多了個(gè)node_modules
第二步
在微信開(kāi)發(fā)者工具的“工具”菜單 --> “構(gòu)建 npm”，項(xiàng)目文件夾下就多了個(gè)miniprogram_npm文件夾，這時(shí)node_modules可用刪除掉了。
第三步
在需要使用weui的頁(yè)面引入，首先在頁(yè)面的 json 文件加入 usingComponents 配置字段：
{
"usingComponents": {
"mp-icon": "weui-miniprogram/icon/icon"
}
}
在對(duì)應(yīng)頁(yè)面的 wxml 中直接使用該組件：
<mp-icon icon="add" color="green" size="{{26}}"></mp-icon>
編譯即可看到圖片！
PS:
微信官方文檔說(shuō)要在根目錄app.wxss 里面引入 weui.wxss：
@import 'weui-miniprogram/weui-wxss/dist/style/weui.wxss';
但是我沒(méi)有引入也沒(méi)有報(bào)錯(cuò)，使用的icon也能正常顯示出來(lái)。
三、【直接導(dǎo)入miniprogram_npm】
第一步
將其他人已經(jīng)構(gòu)建npm的miniprogram_npm文件夾，拷貝到項(xiàng)目目錄下。（文末有下載地址）
第二步
在需要使用weui的頁(yè)面引入，首先在頁(yè)面的 json 文件加入 usingComponents 配置字段：
{
"usingComponents": {
"mp-icon": "weui-miniprogram/icon/icon"
}
}
在對(duì)應(yīng)頁(yè)面的 wxml 中直接使用該組件：
<mp-icon icon="add" color="green" size="{{26}}"></mp-icon>
編譯即可看到圖片！
miniprogram_npm壓縮包，百度云盤(pán)：
鏈接:https://pan.baidu.com/s/1bjKo1Y8dOmJFb2xHtpBq0A
提取碼:9fm3
