微信小程序 引入 vant weapp 以及引入后的使用

个人觉得有赞的组件库写的比微信官方的weuii好，文档更全面一些，还有它的示例代码的运行结果直接展示在网页上.

如何引入vant

官方文档写的很清楚，一步一步照着来就行

第一步npm 安装

# 通过 npm 安装
npm i @vant/weapp -S --production

# 通过 yarn 安装
yarn add @vant/weapp --production

# 安装 0.x 版本
npm i vant-weapp -S --production

微信开发者工具里写在npm 的代码写在【终端】这个窗口里面，在【调试器的旁边】

第二步 修改 app.json

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

第三步 修改 project.config.json

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

这两个属性原本就有，直接替换掉就行

第四步 构建 npm 包

打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件

完成这些后，发现引入组件会报错。所以需要后续的步骤

第五步 新建 miniprogram文件夹 将miniprogram-npm 移动到该文件夹

第六步 引入使用

在index.json中

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

在index.wxml中

<van-button type="primary" bindtap="test">按钮</van-button>

一般这样就能使用了

涉及到弹窗这类组件，还需要多个步骤，例如引入Toast

第一步 在index.json中引入

  "usingComponents": {
    "van-toast": "/miniprogram/miniprogram_npm/@vant/weapp/toast/index"
  }

第二步 在index.js中引入

import Toast from '../../miniprogram/miniprogram_npm/@vant/weapp/toast/toast';

注意：这里好像只能使用相对地址逐层往上，不能直接从根目录开始

第三步 在index.js中定义使用

  test:function(){
    Toast.fail('请选择答案');
  },

需要将Toast放在函数中才能使用，执行该函数，显示弹窗

参考资料：
官方文档
好心人的博客