【微信小程序】基础篇 -- 使用 npm 包 - Vant Weapp（四十一）

• 💌 所属专栏：【微信小程序开发教程】

• 😀 作  者：我是夜阑的狗🐶

• 🚀 个人简介：一个正在努力学技术的CV工程师，专注基础和实战分享 ，欢迎咨询！

• 💖 欢迎大家：这里是CSDN，我总结知识的地方，喜欢的话请三连，有问题请私信 😘 😘 😘
  
  

您的点赞、关注、收藏、评论，是对我最大的激励和支持！！！🤩 🤩 🤩

---

前言

  大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第41篇文章;
  今天开始学习微信小程序的第22天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。
  专栏地址：【微信小程序开发教程】， 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。
  如果文章有什么需要改进的地方还请大佬不吝赐教👏👏，【源代码下载地址】。

---

一、使用 npm 包 - Vant Weapp

  前面对学习到的自定义组件等相关内容进行了一个总结。接下来就来学习小程序中的使用 npm 包 - Vant Weapp。话不多说，让我们原文再续，书接上回吧。
  目前，小程序中已经支持使用 npm 安装第三方包，从而来提高小程序的开发效率。但是，在小程序中使用 npm 包有如下 3 个限制：

• 不支持依赖于 Node.js 内置库的包。
• 不支持依赖于浏览器内置对象的包。
• 不支持依赖于 C++ 插件的包。

  由于限制太多，所以能供小程序使用的包基本上为数不多。

1、Vant Weapp

  Vant Weapp 是有赞前端团队开源的一套小程序 UI 组件库，助力开发者快速搭建小程序应用。它所使用的是 MIT 开源许可协议，对商业使用比较友好，更多详细内容可以看一下 官方文档地址。

2、安装 Vant 组件库

  在小程序项目中，安装 Vant 组件库主要分为如下 4 步：

• Step 1、 通过 npm 安装（建议指定版本为@1.3.3，以防出现不必要的问题）。

通过 npm 安装

npm i @vant/weapp -S --production

通过 yarn 安装

yarn add @vant/weapp --production

安装 0.x 版本

npm i vant-weapp -S --production

  安装之前，要确认是否有包配置管理文件，没有的话需要初始化包管理配置文件，初始化指令：npm init -y 。

  初始化包配置文件成功之后就会出现这个文件。

  接下来就是通过命令来安装 npm 包了，这里要指定安装版本为 1.3.3。

  安装成功之后就会出现该文件夹。

• Step 2、 修改 app.json。

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

• Step 3、 修改 project.config.json

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

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

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

• Step 4、 构建 npm 包。

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

  在开发者工具版本1.06.2301160下，是没有看到 使用npm模块 这个选项的。

  如果你使用 typescript 开发小程序，还需要做如下操作，以获得顺畅的开发体验。详细的操作步骤，可以参考 Vant 官方提供的 快速上手教程。

3、使用 Vant 组件

  安装完 Vant 组件库之后，可以在 app.json 的 usingComponents 节点中引入需要的组件，即可在 wxml 中直接使用组件。这里以 button 组件为例，因为 button 使用的比较频繁，所以比较适合全局引用。具体代码如下：

app.json

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

message.wxml

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

  可以来看一下运行效果：

4、定制全局主题样式

  Vant Weapp 使用 CSS 变量来实现定制主题。 关于 CSS 变量的基本用法，请参考 MDN 文档 。

  在 app.wxss 中，写入 CSS 变量，即可对全局生效，具体代码如下：

message.wxml

<van-button type="primary">van按钮</van-button>
<van-button type="danger">按钮2</van-button>

app.wxss

page{
  --button-danger-background-color:#C00000;
  --button-danger-border-color:#D60000;
}

  看到这里就会有疑问了，为什么要使用page 节点？为了让这些变量全局生效，要定义在根节点，而页面的根节点就是 page。为什么要这么命名？所有可用的颜色变量，请参考 Vant 官方提供的 配置文件 。

  可以来看一下运行效果：

---

总结

  感谢观看，这里就是使用 npm 包 - Vant Weapp的介绍使用，如果觉得有帮助，请给文章点个赞吧，让更多的人看到。🌹 🌹 🌹

  也欢迎你，关注我。👍 👍 👍

  原创不易，还希望各位大佬支持一下，你们的点赞、收藏和留言对我真的很重要！！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。🎉

更多专栏订阅:

• 😀 【LeetCode题解（持续更新中）】
• 🌼 【鸿蒙系统】
• 👑 【Python脚本笔记】
• 🚝 【Java Web项目构建过程】
• 💛 【微信小程序开发教程】
• ⚽ 【JavaScript随手笔记】
• 🤩 【大数据学习笔记（华为云）】
• 🦄 【程序错误解决方法（建议收藏）】
• 🚀 【软件安装教程】

订阅更多，你们将会看到更多的优质内容！！