前言

Vant是一個輕量、可靠的移動端組件庫，于2017年開源。目前Vant官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社區(qū)團(tuán)隊(duì)維護(hù) React 版本和支付寶小程序版本。

微信小程序版本的Vant組件庫是Vant Weapp，其官方文檔是 https://youzan.github.io/vant-weapp/#/home

我們廢話不多說，直接進(jìn)入主題，在微信小程序中使用Vant Weapp

Vant Weapp的安裝與使用

1、安裝 node.js

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

下載網(wǎng)址：https://nodejs.org/zh-cn/

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

安裝完成后測試node.js是否安裝成功：

在cmd終端中輸入 node -v 后回車顯示版本號，表示安裝成功！

備注：win+R 輸入 cmd 然后回車即可打開終端

2、通過 npm 安裝

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

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

npm init -y

然后通過 npm 指令安裝 Vant Weapp

npm i @vant/weapp -S --production

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

普通項(xiàng)目：

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

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

3、修改 app.json

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

4、修改 project.config.json

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

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

5、構(gòu)建 npm 包

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

6、使用組件

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

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

注冊引入組件后，在 wxml 中直接使用組件

可以看到使用成功了！

全局引入和局部引入

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

全局引入

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

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

局部引入

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

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

Toast 組件的使用

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

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

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

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

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

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

官方文檔 API 詳解

我們在查看 Vant Weapp 官方文檔時，會發(fā)現(xiàn)組件的 API 有 Props 參數(shù)、Events 事件、Slot 插槽、外部樣式類這幾種，下面簡單介紹一下這幾種組件 API

Props 參數(shù)

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

Events 事件

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

Slot 插槽

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

以 Field 輸入框?yàn)槔?，我們使用插槽自定義輸入框尾部圖標(biāo)。

外部樣式類

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

最后，我想說學(xué)習(xí)一個框架或組件庫，官方文檔是最好的工具。

以上是本人對微信小程序中使用 vant 組件庫的一些見解，如有錯誤，歡迎指正！

總結(jié)

到此這篇關(guān)于微信小程序中使用vant組件庫的文章就介紹到這了,更多相關(guān)微信小程序使用vant組件庫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論