官網(wǎng)：https://vant-contrib.gitee.io/vant-weapp/#/intro

Vant 是有贊前端團隊開源的移動端組件庫，于 2017 年開源，已持續(xù)維護 4 年時間。Vant 對內(nèi)承載了有贊所有核心業(yè)務(wù)，對外服務(wù)十多萬開發(fā)者，是業(yè)界主流的移動端組件庫之一。

目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社區(qū)團隊維護 React 版本和支付寶小程序版本。

具體使用，參考官網(wǎng)的"快速上手"，下面的步驟在官網(wǎng)的基礎(chǔ)上有些改進，完全按官網(wǎng)走，會跳坑

vant weapp使用步驟

步驟一： 通過npm安裝

在小程序根目錄打開終端

npm init -y
npm i @vant/weapp -S --production

步驟二： 修改 app.json

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

步驟三： 修改project.config.json

在setting選項中，找到"packNpmManually" 和"packNpmRelationList",并修改為

 "packNpmManually": true,
  "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./"
      }
    ]

步驟四 構(gòu)建npm包

1. 打開微信開發(fā)者工具，點擊 工具 -> 構(gòu)建 npm，
2. 開發(fā)者工具-> 詳情->本地設(shè)置->勾選"使用npm模塊"

官網(wǎng)引導(dǎo)的使用步驟（有坑）

以Picker選擇器為例，找到官網(wǎng)相應(yīng)組件的文檔如下

1. 引入
   在app.json或index.json中引入組件

有的組件示例引入地址為"@vant/weapp/dist/picker/index",會報錯，要把dist去掉

"usingComponents": {
  "van-picker": "@vant/weapp/picker/index"
}

2. 基礎(chǔ)用法中文檔的坑

下面官網(wǎng)的代碼一定要分清楚，組件標(biāo)簽的部分是要放在wxml中，import及后面代碼放在js中
import的地址不加修改會錯
用了Toast組件，但引入的方式不完善

<van-picker columns="{{ columns }}" bind:change="onChange" />
import Toast from 'path/to/@vant/weapp/dist/toast/toast';

Page({
  data: {
    columns: ['杭州', '寧波', '溫州', '嘉興', '湖州'],
  },

  onChange(event) {
    const { picker, value, index } = event.detail;
    Toast(`當(dāng)前值：${value}, 當(dāng)前索引：${index}`);
  },
});

正確的使用步驟

1. 在index.json中引入所有相關(guān)組件,van-toast也要引入

{
  "usingComponents": {
    "van-picker": "@vant/weapp/picker/index",
    "van-toast": "@vant/weapp/toast/index"
  }
}

2. wxml
   除了<van-picker>,也要引入<van-toast>

<van-picker
  show-toolbar
  title="標(biāo)題"
  columns="{{ columns }}"
  bind:cancel="onCancel"
  bind:confirm="onConfirm"
/>
<van-toast id="van-toast" />

3. js
   import的地址要改為下面的地址

import Toast from '@vant/weapp/toast/toast';
Page({
  data: {
    columns: ['杭州', '寧波', '溫州', '嘉興', '湖州'],
  },

  onConfirm(event) {
    const { picker, value, index } = event.detail;
    Toast(`當(dāng)前值：${value}, 當(dāng)前索引：${index}`);
  },

  onCancel() {
    Toast('取消');
  },
});

成功