微信小程序引入第三方组件库流程 及构建npm错误 示例组件：vant

最近刚接触微信小程序，想引入一下vant 然后我就跟着官网一步一步做了

1.首先通过在项目根目录打开终端npm安装一下组件库

npm i @vant/weapp -S --production

2.修改app.json把里面的style:v2默认样式删除掉然后保存即可

"style": "v2"

3. 根据vant官网提示修改 project.config.json在该文件夹的setting里面加入以下代码

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

4.接下来我们就要构建npm了

！！！！注意： 由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为'./'即可

这个注意一定要看到 要不然就会出现问题 我们根目录下也没有miniprogram这个文件夹开发者工具也不会帮我们创建 那我们构建npm的时候就会出现这种错误

 

所以我们要把 project.config.json文件夹setting里面我们添加的代码改动以下 把构建npm的路径换成根目录

 

 更改完成之后点击保存 然后我们点击构建npm发现还是会报错，这时需要把微信开发者工具关闭重新打开就可以了，然后我们再次点击构建npm就可以了

5. 这时就可以在项目里使用引入的组件了 根据官网 拿popup弹出层做个示例

首先在你当前页面的json文件里面引入组件

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

wxml

<van-cell title="展示弹出层" is-link bind:click="showPopup" />

<van-popup show="{{ show }}" bind:close="onClose">内容</van-popup>

js

Page({
  data: {
    show: false,
  },

  showPopup() {
    this.setData({ show: true });
  },

  onClose() {
    this.setData({ show: false });
  },
});

 代码写完之后可能会发现组件没有生效，页面只出来了一个内容

这时候我们只需要重新构建以下npm 或者重新编译一下代码就可以了

在这里vant官网有一个小坑 不过只要细心一点就发现了 就是他的代码演示里面用到的组件 他没有全写在引入示例里面

这时就可以正常使用了