记一次微信小程序使用Vant组件库（Vant Weapp）顺序与坑

  1. 小程序根目录执行npm init -y，创建package.json

  2. vant npm i @vant/weapp -S --production，安装Vant Weapp

    1
    2
    3
    4
    # 设置npm镜像源为国内镜像源，我几次安装都卡在这，直到设置为国内镜像源，几秒钟不夸张！！！
    npm config set registry https://registry.npmmirror.com
    # 查看是否设成功
    npm get registry

  3. 打开微信开发者工具，点击 工具 -> 构建 npm

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

  5. 修改project.config.json，如下

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    {
    	...
    	"packNpmManually": true,
        "packNpmRelationList": [
          {
            "packageJsonPath": "./package.json",
            "miniprogramNpmDistDir": "./"
          }
        ],
    	...

    }

  6. 使用组件

    • 全局引入，在 app.json配置usingComponents选项引入组件

    • 局部引入，在对应页面的xxx.json配置usingComponents选项引入组件

      1
      2
      3
      4
      5
      6
      7
      8
      //这里以使用button组件为例
      {
          ...
          "usingComponents": {
            "van-button": "@vant/weapp/button/index"
          }
          ...
      }

      在wxml中使用组件

      1
      2
      3
      <view>
      <van-button type="primary">主要按钮</van-button>
      </view>

    Vant 中默认包含了一些常用样式，可以直接通过 className 的方式使用。

    在 app.wxss 中引入内置样式。

    1
    @import '@vant/weapp/common/index.wxss';

    如果报错的话，File not found: @vant/weapp/common/index.wxss

    解决方法，使用相对路径

    1
    @import './miniprogram_npm/@vant/weapp/common/index.wxss';