前言
我們在開發(fā)微信小程序時，設(shè)計和實現(xiàn)好用的用戶界面無疑是至關(guān)重要的一步。但是微信小程序官方自帶的 UI 組件庫無法滿足很多使用場景，這個時候就需要我們使用一些第三方的 UI 組件庫。而 vant Weapp 作為一款優(yōu)秀的前端 UI 組件庫，可以幫助我們快速地構(gòu)建漂亮而且易用的界面。在本文中，我將會介紹 vant Weapp 如何在微信小程序中安裝、使用，以及它如何幫助我們構(gòu)建高質(zhì)量的微信小程序。
使用步驟
一、打開終端窗口
在微信開發(fā)者工具中，右擊選擇『在外部終端窗口中打開』，具體操作如下圖：
二、初始化
輸入初始化項目的命令生成
package.json包，如果出現(xiàn)像下圖讓你選擇時一路回車即可，當然你也可以以npm init -y的形式安裝，具體操作如下圖：
備注： -y 的含義你可以簡單理解為 yes 的意思，在初始化的時候省去了敲回車的繁瑣步驟?？筛鶕?jù)自己需要選擇哪一種安裝方式。
npm init
npm init -y
二、安裝依賴
在打開的命令窗口中依次輸入下面的命令，具體操作如下圖：
//直接安裝
npm i --production
npm i vant-weapp -S --production
//淘寶鏡像安裝
cnpm i --production
cnpm i vant-weapp -S --production
四、修改 app.json 文件
將
app.json文件中的"style": "v2"去除，原因是小程序的新版基礎(chǔ)組件強行加上了許多樣式，難以覆蓋，不去除容易造成部分組件樣式混亂。如下圖：
五、構(gòu)建 npm
在微信開發(fā)者工具左上角找到『工具』→ 『構(gòu)建npm』，然后在微信開發(fā)者工具右上角找到『詳情』→ 『使用npm模塊』勾選選項，構(gòu)建完成后，即可引入組件具體操作如下圖：
六、使用
當在某個頁面中調(diào)用
vant Weapp的組件時，在app.json文件中添加配置即可，當然你也可以選擇按需引入，在對應(yīng)頁面的json文件中配置，如下圖：
- 全局配置引入 -----
app.json
全局引入只需在 app.json 配置 usingComponents 選項即可引入組件，在所有頁面中都可以使用引入的組件。這種方式的缺點是會給項目造成壓力，建議當一個組件在很多頁面都需要用到時，才使用全局引入
"usingComponents": {
//需要組件引入即可
"van-button": "./miniprogram_npm/vant-weapp/button/index"
}
- 局部配置引入 -----
index.json
局部引入需要在頁面的 json 文件里配置 usingComponents 選項，這種按需引入組件的方式可以很大程度上減少項目的壓力，但缺點是只有當前頁面可以使用該組件，其他頁面不能使用。
{
"usingComponents": {
"van-button": "../../miniprogram_npm/vant-weapp/button/index"
}
}
提示類組件使用
大家可能比較好奇，為什么要把提示類的組件單獨拎出來說呢？這是因為，提示類組件的使用跟 button 這些組件的使用略有不同，一不小心就遇到問題了。下面我按照官方文檔給大家操作一遍，如下圖：
這里我給按鈕綁定了一個點擊事件，即點擊按鈕后出現(xiàn)輕提示
當我點擊按鈕
可以明顯看到我們寫好的事件觸發(fā)輕提示并沒有觸發(fā)，甚至控制臺還報錯了，這是為什么呢？
在仔細查看過官方文檔之后，發(fā)現(xiàn)類似的組件文檔中有都有這么一段的代碼，需要我們額外引入或者添加。
在
js中引入并且在wxml文件中添加相關(guān)代碼后
文章來源：http://www.zghlxwxcb.cn/news/detail-424063.html
總結(jié)
微信小程序是一種新興的應(yīng)用形式，在這種應(yīng)用中，vant Weapp 框架可以幫助開發(fā)者快速實現(xiàn)小程序頁面的完成。同時 vant Weapp 通過大量實際項目的反饋和調(diào)整，達到了深度定制化的效果，可以幫助小程序開發(fā)者減輕很多工作負擔，從而更加專注于業(yè)務(wù)邏輯的實現(xiàn)，也為小程序開發(fā)者提供非常好的開發(fā)體驗。在實際應(yīng)用中，我們可以深度挖掘 vant Weapp 組件庫內(nèi)部的潛力，將其與業(yè)務(wù)需求結(jié)合，從而實現(xiàn)更加高效、智能的小程序開發(fā)。最后附上 vant Weapp 的官方地址，感興趣的同學(xué)可以去官網(wǎng)更深入的了解。文章來源地址http://www.zghlxwxcb.cn/news/detail-424063.html
到了這里，關(guān)于五分鐘學(xué)會在微信小程序中使用 vantUI 組件庫的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
