【微信小程序】-vant 库的使用

在小程序开发过程中，如果对UI效果没有特殊诉求的话，一般官方提供的组件都能够满足我们的需求，但对于一些比较酷炫的效果，就需要自己自己去增加自定义组件来实现了，为了提高效率，我们可以导入使用 vant 来进行开发。
vant 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，官方链接：https://youzan.github.io/vant-weapp/#/intro

安装

• 1、方式一. 通过 npm 安装 (推荐)

小程序已经支持使用 npm 安装第三方包，详见 npm 支持
直接在命令行执行 npm i vant-weapp -S --production 即可。

• 2、方式二.下载代码进行导入

直接通过 git 下载 Vant Weapp 源代码，并将dist或lib目录拷贝到自己的项目中
git clone https://github.com/youzan/vant-weapp.git

image.png

使用

• 1、引用组件

引入组件
以 Button 组件为例，只需要在*.json中配置 Button 对应的路径即可。
如在index.json里面增加
"usingComponents": { "van-button": "../../dist/button/index" }

• 2、使用组件

引入之后，可以在 wxml 中直接使用组件
<van-button type="info">我是按钮</van-button>，van-button支持的样式有如下几种，至于那种样式对应的是哪个类型，直接查看官方文档即可。

image.png