### [小程序中怎么安装和使用UI组件库](https://www.prosaas.cn/article/16352)

**Published:** 2021-11-15T03:06:04

**Author:** 5201314

**Excerpt:** 本篇文章给大家分享一个小程序开发实战，介绍一下小程序中安装和使用UI组件库的方法，希望对大家有所帮助！前面介绍…

本篇文章给大家分享一个小程序开发实战，介绍一下小程序中安装和使用UI组件库的方法，希望对大家有所帮助！

![](https://img.php.cn/upload/article/000/000/024/6191ce04e9266981.jpg)

前面介绍了小程序开发的基础技能，比如`页面开发`、`组件开发`、`云开发`等，这些都是功能层面的。这篇我们单独通过一讲介绍一下小程序开发UI层面的技能，即使用UI组件库。【相关学习推荐：小程序开发教程】

使用UI组件库的好处不言而喻，可以统一我们小程序的整体UI风格，同时还可以大大节省开发小程序的时间。因为对于很多复杂的功能组件，自己要实现起来比较费时间，还容易存在各种功能缺陷。

## 实践

接下来我们就以 `vant` 这款UI组件库为例，介绍一下小程序如何使用UI组件库来提高开发效率。

### 安装组件库

使用组件库的第一步，就是将组件库集成进我们现有的小程序。

首先，我们在开发者工具中选择`终端`面板，并新建一个终端，这里的终端使用的就是你电脑自带的终端，比如Window系统中的命令行，或MacOS下的终端。

![](https://img.php.cn/upload/image/364/947/187/1636945254960214.png)

然后在终端内输入`npm -v`检查当前电脑是否装有`npm`工具，npm工具是用于下载网络软件包的工具，隶属于`Nodejs`，如果电脑上没有npm的话，可以先去下载 nodejs 并完成安装，安装后会自带npm。

![](https://img.php.cn/upload/image/145/440/214/1636945259403307.png)

当电脑拥有npm后，我们便可使用它来下载`vant`软件包到我们的小程序项目内，具体步骤参照 vant快速上手文档 操作即可。

在第一步成功后应该会看到类似下图所展示的样子

![](https://img.php.cn/upload/image/196/388/652/1636945263607018.png)

在第二步中我们按照指示，将`app.json`的`style:v2`进行删除

![](https://img.php.cn/upload/image/219/288/998/1636945268104697.png)

在第三步中我们按照指示，修改`project.config.json`如下

![](https://img.php.cn/upload/image/760/506/189/1636945273776670.png)

这里存在一个问题是，如果你是一个纯小程序项目，起初是不存在`package.json`文件的，所以这里配置中所指向的package.json文件会找不到。

我们可以使用`npm init -y`命令手动创建一个，结果如下

![](https://img.php.cn/upload/image/837/357/409/1636945278878983.png)

由于我们在创建package.json前进行了npm包的安装，所以这里还需要重新执行一遍`npm i @vant/weapp -S --production`以确保package.json文件中的`dependencies`一项有`@vant/weapp`。

第四步，也是最后一步，就是使用开发者工具顶部菜单栏中的`工具`\-`构建npm`对我们安装的npm包进行构建，这时候会提示报错，这是由于新版的小程序开发如vant文档所说，小程序对于npm包的解析目录如今变成了`miniprogram_npm`。

![](https://img.php.cn/upload/image/815/279/109/1636945282503212.png)

所以我们需要按照指示将`project.config.json`中`packNpmRelationList`下的`miniprogramNpmDistDir`一项修改为`./`，如下图所示。

![](https://img.php.cn/upload/image/631/995/430/1636945287578706.png)

然后我们重新使用开发者工具进行npm构建，完成后可以看到下图的样子，小程序目录中也自动增加了`miniprogram_npm`这一目录，专门用于管理所有的npm包。

![](https://img.php.cn/upload/image/194/762/690/1636945291175443.png)

> 这里的经验就是，小程序开发的规则可能会产生更新，当使用第三方工具与其集成时需要根据实际情况做配置上的灵活调整。

### 组件库使用

安装好组件库以后，我们便可以开始使用组件库中的所有组件。首先让我们先来改造一下之前的搜索输入框，改为使用vant所提供的搜索组件。

![](https://img.php.cn/upload/image/106/229/625/1636945296509640.png)

使用UI组件库的方式与使用我们自己开发的组件方式一致，都是先要在json文件中声明要引入的组件

![](https://img.php.cn/upload/image/548/703/527/1636945301718226.png)

vant的文档也提供了每个组件的引用方式，我们按照其指示操作即可。

![](https://img.php.cn/upload/image/895/154/994/1636945305168070.png)

记得修改json文件后要手动点击编译才能生效，不同于wxml和wxss文件的修改会通过热重载功能实时生效。

![](https://img.php.cn/upload/image/242/413/743/1636945309253184.png)

另外，对于搜索组件这样的组件，其属性中包含变量值的绑定，也就是`value`，它对应于搜索框中输入的内容，所以我们需要在js文件中声明一个用于存储这个值的变量以接收搜索框中输入的内容。

![](https://img.php.cn/upload/image/344/593/928/1636945316784034.png)

这样，我们就完成了搜索框的改造，也实践了UI组件库的使用。

接下来，我们可以阅读vant文档，通过组合各种组件库已有的组件，大大加快许多功能的开发。

## 总结

这一篇我们介绍了如何使用已有的UI组件库来提高我们开发小程序的效率，主要是`安装`和`使用`两个步骤。在下一篇中，我们将结合vant组件库的强大能力，来完成一个完整首页的功能实现。

更多编程相关知识，请访问：编程入门！！

以上就是小程序中怎么安装和使用UI组件库的详细内容，更多请关注知企PROSAAS其它相关文章！

**Categories:** 后端开发

---