微信小程序使用vant weapp报错

如果是按照【vant weapp】 来一步步走的，也许会遇到我遇到的错误。

我的踩坑，希望能够帮你解决问题。

错误一：构建错误

当按照vant weapp快速上手的指引一步步走，到了步骤四 构建 npm 包遇到了第一个坑。

这个报错其实是因为上一步配置packNpmRelationList时的路径不准确的问题。

解决办法：

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

如此即可构建成功

错误二：[“usingComponents”][“van-button”] 未找到

这是遇到的第二个坑，这个坑有点让人疑惑。明明是完全按照官方文档来的，为什么会出现问题呢？不信邪的我又前前后后重新创建了三四个小程序，重新走这个过程。无一例外，全部都是这个问题。

百度好久，google好久。看了好多相关文章，发现那些文章有一个共同点：

npm 构建生成 miniprogram_npm

但是我仔细看了看我的小程序，确定没有这个文件。为什么别人有，我却没有？？？是不是哪里出问题了？？？或者说流程颠倒了？？？

想到这，准备参考官方文档，然后适当的调整一下步骤流程。果然，成功了。

下面就是我安装使用成功的步骤。

我的安装流程

1. 重新创建项目

在创建项目这一步骤不再进行赘述

创建完成，此时的目录结构：

2. 初始化npm

前提是你已经安装了node和npm。

npm init -y

3. 安装插件

npm i @vant/weapp -S --production

4. 勾选npm & npm构建

注意：
如果有使用npm模块选项，就进行勾选，然后构建npm
如果没有也不用纠结，直接构建npm

我这里就没有使用npm模块选项这个选项

注意：

如果是新版本的微信开发者工具，需要修改步骤5的路径为："miniprogramNpmDistDir": "./"

构建完成后，注意看项目的目录结构多了一个文件夹：

到了这，我们才有了别人有的文件夹。

5. 修改 project.config.json

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

6. 引入组件

如果发现报错Error: module "miniprogram_npm/@vant/weapp/common/component.js" is not defined，不要紧张，刷新一下即可。

你可以选择在app.json引入，也可以在指定组件的json文件里进行引入

我是在app.json里引入：

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

7. 使用组件

  <van-button type="default">默认按钮</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>

8. “style”: “v2”

在 vant weapp官方文档给了这么一句:

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

所以看个人情况，是否要删除这一句～