uni-app的使用分享(三)插件的使用

最新推荐文章于 2025-06-19 00:07:19 发布

原创最新推荐文章于 2025-06-19 00:07:19 发布 · 1.7w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

uni-app 同时被 2 个专栏收录

7 篇文章

订阅专栏

微信小程序

6 篇文章

订阅专栏

本文介绍如何在uni-app项目中引入并使用Vant组件库，通过具体步骤和示例代码，展示如何配置和使用Vant的button组件，帮助开发者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue中插件是我们非常喜欢的一个功能，它可以帮助我们快速开发我们的项目。在小程序中也有相应的功能。首先，我们先的了解一下什么是自定义组件。

开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。

在uni-app中,引入方式则是需要在项目根目录下创建一个名字为wxcomponents的文件夹，在里面创建一个名为vant的文件夹，这里我们以vant组件为例子，介绍一下vant插件在uni-app中的使用。

首先，去vant官网下载小程序版本，然后能达到里面的dist文件夹，复制到vant文件夹下面。

然后，在page.json中配置，这里我们引入button

{
            "path" : "pages/index/index",
            "style" : {
                "navigationBarTitleText" : "首页",
                "enablePullDownRefresh" : true, //开启下拉刷新
                "onReachBottomDistance" : 50，
				"usingComponents" : {
				   "van-button" : "/wxcomponents/vant/dist/button/index",
				}
            }
        },

然后在index中使用，

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

此时就可以预览到效果啦。