微信小程序中如何使用vant組件庫(kù)

本篇內(nèi)容介紹了“微信小程序中如何使用vant組件庫(kù)”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

Vant Weapp的安裝與使用

1、安裝 node.js

在使用 Vant Weapp 前，我們需要安裝 node.js ，因?yàn)楹竺鏁?huì)用到 npm 指令。

下載長(zhǎng)期維護(hù)版的 node.js 安裝包，然后安裝一路點(diǎn)擊Next，注意勾選上 Add to PATH 即可。

安裝完成后測(cè)試node.js是否安裝成功：

在cmd終端中輸入 node -v 后回車(chē)顯示版本號(hào)，表示安裝成功！

備注：win+R 輸入 cmd 然后回車(chē)即可打開(kāi)終端

2、通過(guò) npm 安裝

首先，在終端中打開(kāi)項(xiàng)目根目錄（注意：云開(kāi)發(fā)項(xiàng)目要打開(kāi)根目錄下的 miniprogram 目錄）

接著，輸入初始化項(xiàng)目的命令

npm init -y

然后通過(guò) npm 指令安裝 Vant Weapp

npm i @vant/weapp -S --production

備注：-y 的含義：yes的意思，在初始化的時(shí)候省去了敲回車(chē)的繁瑣步驟

普通項(xiàng)目：

云開(kāi)發(fā)項(xiàng)目：

命令執(zhí)行成功后，可以看到項(xiàng)目多了幾個(gè)文件

3、修改 app.json

將 app.json 中的 “style”: “v2” 去除，小程序的新版基礎(chǔ)組件強(qiáng)行加上了許多樣式，難以覆蓋，不關(guān)閉將造成部分組件樣式混亂。

4、修改 project.config.json

由于開(kāi)發(fā)者工具創(chuàng)建的小程序目錄文件結(jié)構(gòu)問(wèn)題，npm 構(gòu)建無(wú)法正常工作，需要在project.config.json 中修改如下配置（普通項(xiàng)目和云開(kāi)發(fā)項(xiàng)目修改的內(nèi)容略有不同）：

關(guān)于修改 project.config.json 的詳細(xì)內(nèi)容，可見(jiàn)官方文檔的快速上手中的步驟三

5、構(gòu)建 npm 包

打開(kāi)微信開(kāi)發(fā)者工具，點(diǎn)擊 工具 -> 構(gòu)建 npm，并勾選 使用 npm 模塊 選項(xiàng)，可見(jiàn)官方文檔 快速上手 的 步驟四。新版的微信開(kāi)發(fā)者工具中，詳情 -> 本地設(shè)置中沒(méi)有【使用 npm 模塊】選項(xiàng)，則不用理會(huì), 如果有則需要勾選。

6、使用組件

你只需要在 app.json 或 你需要使用 vant 的頁(yè)面中的 json 文件進(jìn)行組件的注冊(cè)即可使用了

這里涉及到注冊(cè)組件的兩種方式，后面會(huì)講到。下面，以在 app.json 全局注冊(cè) button 組件為例：

注冊(cè)引入組件后，在 wxml 中直接使用組件

可以看到使用成功了！

全局引入和局部引入

前面我們說(shuō)到可以在 app.json 或 需要使用 vant 的頁(yè)面中的 json 文件進(jìn)行組件的注冊(cè)這兩種引入組件的方式，這里分別稱(chēng)之為 全局引入 和 局部引入。

全局引入

全局引入只需在 app.json 配置 usingComponents 選項(xiàng)即可引入組件，在所有頁(yè)面中都可以使用引入的組件。這種方式的缺點(diǎn)是會(huì)給項(xiàng)目造成壓力，建議當(dāng)一個(gè)組件在很多頁(yè)面都需要用到時(shí)，才使用全局引入。

在任意的 wxml 頁(yè)面都可以使用引入的組件

局部引入

在頁(yè)面的 json 文件里配置 usingComponents 選項(xiàng)，這種按需引入組件的方式，我暫且稱(chēng)它為局部引入。這種方式，可以減少項(xiàng)目的壓力，但是只有當(dāng)前頁(yè)面可以使用該組件，其他頁(yè)面不能使用。

在 my.wxml 中使用引入的組件

Toast 組件的使用

這里為啥要把 Toast 組件單獨(dú)拎出來(lái)呢？這是因?yàn)?，Toast 的使用跟 Button 這些組件的使用略有不同，一不小心就遇到問(wèn)題了，下面介紹 Toast 組件的使用。

按照官方文檔，我們?cè)?json 和 js 文件添加如下代碼：

這里給按鈕綁定一個(gè)點(diǎn)擊事件，即點(diǎn)擊按鈕后出現(xiàn) Toast 提示

在 json 和 js 文件添加對(duì)應(yīng)代碼后，發(fā)現(xiàn)出現(xiàn)警告，這是怎么回事呢？

仔細(xì)查看官方文檔，發(fā)現(xiàn)文檔中有一段 wxml 的代碼。我們?cè)?wxml 中添加對(duì)應(yīng)代碼就不會(huì)出現(xiàn)警告了！

小結(jié)一下，Toast 的使用，需要在 json、js、wxml 文件中添加代碼，千萬(wàn)別忘了在 wxml 頁(yè)面內(nèi)添加對(duì)應(yīng)的節(jié)點(diǎn)。另外，Dialog 彈出框、Notify 消息提示的使用也和 Toast 類(lèi)似，詳細(xì)使用可以查看官方文檔。

官方文檔 API 詳解

我們?cè)诓榭?Vant Weapp 官方文檔時(shí)，會(huì)發(fā)現(xiàn)組件的 API 有 Props 參數(shù)、Events 事件、Slot 插槽、外部樣式類(lèi)這幾種，下面簡(jiǎn)單介紹一下這幾種組件 API

Props 參數(shù)

這個(gè)比較簡(jiǎn)單，看一下官方文檔就懂了。以 button 組件為例，我們可以添加不同的參數(shù)，來(lái)實(shí)現(xiàn)需要的效果。

Events 事件

Vant Weapp 給每個(gè)組件都提供了一些事件，方便我們實(shí)現(xiàn)組件的交互效果。以 Field 輸入框?yàn)槔覀兪褂?bind:input 事件來(lái)打印當(dāng)前的輸入值。

Slot 插槽

插槽是 vue 為組件的封裝者提供的能力。允許開(kāi)發(fā)者在封裝組件時(shí)，把不確定的、希望由用戶(hù)指定的部分定義為插槽。因?yàn)?vant 是基于 vue 的，所以 vant 沿用了 vue 的插槽。

以 Field 輸入框?yàn)槔覀兪褂貌宀圩远x輸入框尾部圖標(biāo)。

外部樣式類(lèi)

在 vant 組件中，我們添加的 class 樣式一般不能生效，需要自己定義外部樣式類(lèi)使用。下面以 Field 輸入框?yàn)槔?，利?label-class 來(lái)改變左側(cè)文本的字體大小。

“微信小程序中如何使用vant組件庫(kù)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！