第微信小程序使用擴展組件庫WeUI的入門教程目錄微信小程序使用WeUI入門教程1.學習參考2.NodeJs初始化3.安裝WeUI組件庫4.配置4.1構建npm4.2支持npm5.項目使用WeUI總結

微信小程序使用WeUI入門教程

在學習微信小程序過程中，很多組件的樣式需要自己調整，且很多不是我們想要的樣子。所以找到了WeUI這樣的擴展組件庫，預覽了組件庫，真的非常nice！

但是找不到怎么去引用。網(wǎng)上資料又很少，最后還是要依賴官方文檔去學習，下面把如何入使用總結一下。

這是一套基于樣式庫weui-wxss開發(fā)的小程序擴展組件庫，同微信原生視覺體驗一致的UI組件庫，由微信官方設計團隊和小程序團隊為微信小程序量身設計，令用戶的使用感知更加統(tǒng)一。

1.學習參考

WeUI樣式庫展示：https://weui.io/

微信官方WeUI相關文檔：https://wechat-miniprogram.github.io/weui/docs/

WeUI-wxss項目地址：/Tencent/weui-wxss

直奔主題，如何使用！

直接預覽WeUI-wxss示例代碼，直接引用上手~

打開[WeUI-wxss](/Tencent/weui-wxss)項目地址，可以看到有一個dist目錄，這個目錄就是WeUI示例代碼，下載下來，用小程序打開該dist目錄，一定是該目錄哦！

然后，想用什么直接copy吧！

2.NodeJs初始化

這里如果沒有安裝NodeJs的自行安裝。

確保有NodeJs，在你小程序項目根目錄，執(zhí)行以下命令，然后一路回車鍵即可安裝完成。

npminit

執(zhí)行完以后，會在項目根目錄看到package.json文件

3.安裝WeUI組件庫

在項目根目錄執(zhí)行以下命令：

npminstall--saveweui-miniprogram--production

會在根目錄出現(xiàn)node_modules目錄

4.配置

4.1構建npm

打開微信小程序開發(fā)工具，點擊頂部菜單【工具】【構建npm】，構建完成后會在項目根目錄生成miniprogram_npm文件夾，如下圖：

4.2支持npm

點擊小程序開發(fā)工具右上角【詳情】【本地設置】，勾選上【使用npm模塊】，這里有個坑需要注意一下，記得把基準庫選擇最新的。

5.項目使用WeUI

在小程序根目錄app.wxss中引入樣式文件（按照自己的路徑引入）

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

在需要頁面的json文件引入需要的組件，例如：

"usingComponents":{

"mp-form_page":"/miniprogram_npm/weui-miniprogram/form/form_page"

在對應的wxml頁面就可以使用了，示例：

metaroot-font-size="system"/

viewdata-weui-theme="{{theme}}"

view

view

h2表單結構/h2

view展示表單頁面的信息結構樣式,分別由頭部區(qū)域/控件區(qū)域/提示區(qū)域/操作區(qū)域和底部信息區(qū)域組成。/view

/view

view

view

view表單組標題/view

view

view

viewlabel微信號/label/view

view

inputplaceholder="填寫本人微信號"placeholder-/

/view

/view

view

view

label昵稱/label

/view

view

inputplaceholder="填寫本人微信號的昵稱"placeholder-/

/view

/view

view

view

label聯(lián)系電話/label

/view

view

inputplaceholder="填寫綁定的電話號碼"type="number"placeholder-/

/view

/view

/v