如何在applet中安装和使用UI组件库(applet UI组件库)

本文将和大家分享一个小程序开发的实践经验，介绍在小程序中安装和使用UI组件库的方法。希望对你有帮助！

小程序开发的基本技能，如页面开发、组件开发、云开发等。，都是前面介绍过的。这些都是功能层面的。本文将介绍开发小程序UI的技巧，即使用UI组件库。【相关学习推荐:小程序开发教程】

使用UI组件库的好处不言而喻，可以统一我们小程序的整体UI风格，同时可以大大节省开发小程序的时间。对于很多复杂的功能组件，需要很长时间才能实现，也存在各种功能缺陷。

练习接下来，我们将以vant，UI组件库为例，介绍小程序如何利用UI组件库提高开发效率。

安装和使用组件库的第一步是将组件库集成到我们现有的applet中。

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

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

当电脑有了npm，我们就可以用它把vant软件包下载到我们的小程序项目里。具体步骤请参考vant的快速入门文档。

第一步成功后，您应该会看到如下所示的内容。

第二步，我们按照说明删除app.json的style:v2。

在第三步中，根据说明，我们修改project.config.json如下

这里有一个问题。如果是纯小程序项目，一开始是没有package.json文件的，所以这里的配置中指向的package.json文件是找不到的。

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

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

第四步也是最后一步，使用开发者工具顶部菜单栏中的Tool - Build npm来构建我们安装的npm包。此时，系统会提示您报告错误。这是因为新版本的小程序开发就像vant document一样，小程序解析npm包的目录现在是miniprogram_npm。

因此，我们需要将project.config.json中packNpmRelationList下的item miniprogramNpmDistDir更改为。/如下图所示。

然后，我们重用开发人员工具来构建npm。完成后，我们可以看到下图。miniprogram_npm目录会自动添加到applet目录中，该目录专用于管理所有npm软件包。

元件库的使用元件库安装好之后，我们就可以开始使用元件库中的所有组件了。首先，我们对之前的搜索输入框进行改造，改用vant提供的搜索组件。

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

Vant的文档还提供了对每个组件进行报价的方法。我们可以按照它的指示去做。

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

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

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

接下来可以阅读vant文档，结合各种组件库的现有组件，大大加快了很多功能的开发速度。

综上，我们介绍如何利用现有的UI组件库来提高开发小程序的效率，主要包括安装和使用两个步骤。在下一篇文章中，我们将结合vant组件库的强大功能，完成一个完整主页的功能实现。

有关编程的更多信息，请访问:编程入门！！以上是如何在小程序中安装和使用UI组件库的细节。请多关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 如何在小程序中安装和使用UI组件库（如何介绍小程序组件）

本文由主机参考刊发，转载请注明：如何在applet中安装和使用UI组件库(applet UI组件库) https://zhujicankao.com/75971.html