小程序学习：使用有赞UI组件

最新推荐文章于 2025-07-10 17:12:17 发布

原创最新推荐文章于 2025-07-10 17:12:17 发布 · 4.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

小程序专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了如何从GitHub下载Vant Weapp源码，并将其集成到小程序中。通过复制dist文件夹并重命名，再在json文件中配置组件路径，即可在wxml中使用各种按钮组件，包括默认、主要、信息、警告和危险按钮。

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

1、下载源码

https://youzan.github.io/vant-weapp/#/intro
从github上下载源码：https://github.com/youzan/vant
将dist文件夹复制到小程序pages同级目录下，重命名为vant

2、配置组件

在需要使用组件的页面的json文件中引入配置，例如index.json：

"usingComponents": {
  "van-button": "../../vant/button/index"
}

3、使用组件

在wxml文件中直接使用组件，如index.xwml:

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