小程序引用vant weapp

Vant Weapp地址：https://youzan.github.io/vant-weapp/#/intro

一、微信小程序--引入第三方框架 Vant (配合vsCode)

引用步骤原文链接：https://blog.csdn.net/doinb_6/article/details/107021939
1.1、根目录新建文件夹miniprogram (为引入vant 做准备)

image.png

1.2、右键miniprogram文件夹，选在在终端打开
输入命令：npm init（记得以管理员身份运行开发工具）,然后一直回车，直至在miniprogram文件夹下，生成package.json文件。

image.png

1.3、安装依赖
通过npm安装,执行以下命令
1：npm install --production
2: npm i @vant/weapp -S --production

image.png

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

image.png

1.5、将 app.json 中的 "style": "v2" 去除，小程序的[新版基础组件https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#style]强行加上了许多样式，难以去除，不关闭将造成部分组件样式混乱。

1.6、成功

——————————————————————————————————————————————

二、常用设置

1、常用的样式放在app.json中 ,例如：button

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

2、页面单独引用组件

2.1、Html

  危险按钮
  内容

2.2、Json

"usingComponents": {
    "van-popup": "../../miniprogram/miniprogram_npm/@vant/weapp/popup"
  }

2.3、js 备注：如果不显示，可能要单独再引用该组件的js

//获取应用实例
const app = getApp()
Page({
  data: {
    show: false,
  },

  onLoad: function () {
 
  },
  showPopup() {
    this.setData({ show: true });
  },
  onClose() {
    this.setData({ show: false });
  },
})