微信小程序使用vantweapp问题

构建错误

今天用微信小程序配合 Vant Weapp 时遇到了一些问题。

就是在【构建npm】时一直不成功，错误是：

导致这样的原因是，先安装的第三方包，然后再进行的初始化。

解决办法就是，先初始化，然后再安装第三方包，就可以了。

也就是顺序是：

1. 初始化：npm init，连续回车就行 – 生成 package.json

2. 安装第三方包：npm i vant-weapp -S --production – 自动生成 node_modules文件夹

3. 修改 app.json：将 app.json 中的 “style”: “v2” 去除

4. 修改 project.config.json：

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

5. 构建npm：工具 -> 构建 npm

注意：需要在小程序根目录下执行 npm init

这几步缺一不可，不然就不能使用 vant Weapp 中的组件了。

其中的2-3步可以去官网看。

路径错误

如果你按照 Vant Weapp 官网的方法使用某个组件，路径什么的，代码什么的都没错，但就是报错，还是路径错误。比如：

这个时候其实就是自己的操作问题（我目前遇到的是，现在是2022.11.25），时间久了问题会变，这个操作不能保证一定能解决问题。不过可以试试。 — 就是没有在工具中构建npm

如果你完全按照上面的步骤来实现npm的建构的话，那会生成一个文件夹，如下：

如果没有的话，就将 package.json 文件和 node_modules文件夹 都删除了，之后重新按照上面的步骤构建npm，切记最后不要忘记再次在工具中构建npm。

因为，不构建npm，就不会生成 miniprogram_npm 文件夹，也就会路径报错了。