11-vant-weapp的使用

官网：https://vant-contrib.gitee.io/vant-weapp/#/intro

Vant 是有赞前端团队开源的移动端组件库，于 2017 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。

目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。

具体使用，参考官网的"快速上手"，下面的步骤在官网的基础上有些改进，完全按官网走，会跳坑

vant weapp使用步骤

步骤一： 通过npm安装

在小程序根目录打开终端

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

步骤二： 修改 app.json

将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

步骤三： 修改project.config.json

在setting选项中，找到"packNpmManually" 和"packNpmRelationList",并修改为

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

步骤四 构建npm包

1. 打开微信开发者工具，点击 工具 -> 构建 npm，
2. 开发者工具-> 详情->本地设置->勾选"使用npm模块"

官网引导的使用步骤（有坑）

以Picker选择器为例，找到官网相应组件的文档如下

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

有的组件示例引入地址为"@vant/weapp/dist/picker/index",会报错，要把dist去掉

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

2. 基础用法中文档的坑

下面官网的代码一定要分清楚，组件标签的部分是要放在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(`当前值：${value}, 当前索引：${index}`);
  },
});

正确的使用步骤

1. 在index.json中引入所有相关组件,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="标题"
  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(`当前值：${value}, 当前索引：${index}`);
  },

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

成功