快捷導(dǎo)航

微信小程序使用vant組件庫的詳細(xì)步驟

更新時間：2024年09月26日 09:41:01 作者：xiangxiongfly915

VantWeapp是有贊團(tuán)隊(duì)開源的小程序UI組件庫,可快速搭建小程序項(xiàng)目,小程序支持npm安裝第三方包,但需使用開發(fā)者工具構(gòu)建,VantWeapp提供全局和局部注冊方式,支持自定義事件和插槽,可通過解除樣式隔離、使用外部樣式類和CSS變量修改組件樣式

微信小程序-使用vant組件庫

概述

Vant Weapp 是有贊前端團(tuán)隊(duì)開源的小程序 UI 組件庫，基于微信小程序的自定義組件開發(fā)，可用來快速搭建小程序項(xiàng)目。

官方文檔

構(gòu)建npm

目前小程序已經(jīng)支持使用 npm 安裝第三方包，但是這些 npm 包在小程序中不能夠直接使用，必須得使用小程序開發(fā)者工具進(jìn)行構(gòu)建后才可以使用。

因?yàn)?node_modules 目錄下的包，不會參與小程序項(xiàng)目的編譯、上傳和打包，因此。在小程序項(xiàng)目中要想使用 npm 包，必須走一遍 構(gòu)建 npm 的過程。

在構(gòu)建成功以后，默認(rèn)會在小程序項(xiàng)目根目錄，也就是 node_modules 同級目錄下生成 miniprogram_npm目錄，里面存放這構(gòu)建打包后的 npm 包，也就是小程序運(yùn)行過程中真正使用的包。

目錄結(jié)構(gòu)如下：

構(gòu)建步驟

一、執(zhí)行命令 npm init -y，生成 package.json 文件。

二、執(zhí)行命令 npm i @vant/weapp，添加 vant 組件庫。

如果遇到問題，可以先清理緩存，執(zhí)行命令 npm cache clean --force.

三、點(diǎn)擊微信開發(fā)者工具：菜單欄 -> 工具 -> 構(gòu)建npm，會生成 minnprogram_npm 目錄。

生成如下目錄結(jié)構(gòu)：

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

使用vant 注冊

全局注冊：在 app.json 中注冊，可以在任意組件中使用。
局部注冊：在 index.json 中注冊，只能在當(dāng)前組件中使用。

// index.json
"usingComponents": {
  "van-image": "@vant/weapp/image/index"
}

// app.json
"usingComponents": {
	"van-image": "@vant/weapp/image/index"
}

使用

<van-button type="default">默認(rèn)按鈕</van-button>
<van-button type="primary">主要按鈕</van-button>
<van-button type="info">信息按鈕</van-button>
<van-button type="warning">警告按鈕</van-button>
<van-button type="danger">危險按鈕</van-button>

<!-- 網(wǎng)絡(luò)圖片： -->
<van-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" />
<!-- 本地圖片： -->
<van-image width="100" height="100" src="/images/a.png" />
<!-- 圓形圖片： -->
<van-image width="100" height="100" round src="/images/a.png" />

添加事件

事件名	說明	回調(diào)參數(shù)
bind:click	點(diǎn)擊圖片時觸發(fā)	event: Event
bind:load	圖片加載完畢時觸發(fā)	event: Event
bind:error	圖片加載失敗時觸發(fā)	event: Event

<van-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" bind:click="handleClick" />

Page({
  handleClick() {
    console.log("點(diǎn)擊了網(wǎng)絡(luò)圖片")
  },
})

使用插槽

名稱	說明
loading	自定義加載中的提示內(nèi)容
error	自定義加載失敗時的提示內(nèi)容

<van-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" use-loading-slot use-error-slot>
  <van-loading slot="loading" type="spinner" size="20" vertical />
  <text slot="error">加載失敗</text>
</van-image>

樣式覆蓋

Vant Weapp 基于微信小程序的機(jī)制，為開發(fā)者提供了以下 3 種修改組件樣式的方法：

解除樣式隔離：在頁面中使用 Vant Weapp 組件時，可直接在頁面的樣式文件中覆蓋樣式
使用外部樣式類：需要注意普通樣式類和外部樣式類的優(yōu)先級是未定義的，需要添加 !important 保證外部樣式類的優(yōu)先級
使用 CSS 變量：在頁面或全局對多個組件的樣式做批量修改以進(jìn)行主題樣式的定制

解除樣式隔離

Vant Weapp 的所有組件都開啟了addGlobalClass: true以接受外部樣式的影響，因此我們可以通過審核元素的方式獲取當(dāng)前元素的類名，然后復(fù)制到組件的 .wxss 中進(jìn)行修改。

<van-button type="danger">危險按鈕</van-button>

.van-button--danger {
  background-color: blue !important;
  border: 10rpx solid yellow !important;
}

效果如下：

使用外部樣式類

Vant Weapp 開放了大量的外部樣式類供開發(fā)者使用，具體的樣式類名稱可查閱對應(yīng)組件的“外部樣式類”部分。

需要注意的是普通樣式類和外部樣式類的優(yōu)先級是未定義的，因此使用時請?zhí)砑?code>!important以保證外部樣式類的優(yōu)先級。

如下是 van-button 的外部樣式類：

類名	說明
custom-class	根節(jié)點(diǎn)樣式類
hover-class	指定按鈕按下去的樣式類
loading-class	加載圖標(biāo)樣式類

<van-button type="info" custom-class="my-custom-class">信息按鈕</van-button>

.my-custom-class {
  background-color: lightcoral !important;
  color: blue !important;
}

效果如下：

使用CSS變量

Vant Weapp 為部分 CSS 屬性開放了基于 CSS 屬性的定制方案。

相較于解除樣式隔離和使用外部樣式類，這種方案支持在頁面或應(yīng)用級別對多個組件的樣式做批量修改以進(jìn)行主題樣式的定制。

當(dāng)然，用它來修改單個組件的部分樣式也是綽綽有余的

一、聲明自定義屬性，屬性名需要以兩個減號（--）開始，屬性值則可以是任何有效的 CSS 值

/* 聲明全局變量 */
page {
  --main-bg-color: lightcoral;
}

二、使用全局變量，用 var() 函數(shù)包裹

/* 聲明全局變量 */
page {
  --main-bg-color: lightcoral;
}

/* 聲明局部變量 */
.container {
  --main-bg-color: lightseagreen;
}

三、使用

<van-button type="primary" custom-class="my-custom-class2">主要按鈕</van-button>

.my-custom-class2 {
  background-color: var(--main-bg-color) !important;
  color: red !important;
}

四、也可以在按鈕上直接添加類名：

<van-button type="default" class="my-button">默認(rèn)按鈕</van-button>

.my-button {
  --my-background-color: red;
  --my-border-color: blue;
}
.van-button--default {
  font-size: 28rpx !important;
  background-color: var(--my-background-color) !important;
  border: 1px solid var(--my-border-color) !important;
}

效果如下：