介绍

Vant 是有赞前端团队开源的移动端组件库,于 2016 年开源,已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务,对外服务十多万开发者,是业界主流的移动端组件库之一。

开始

1.安装准备

需要安装node.js,请自行百度

2.创建微信小程序项目

请参考上一篇微信小程序学习(今日天气)

3.初始化

打开pages所在的文件夹,在此文件夹打开终端,输入npm init -y,执行完不要关闭窗口

4.安装Vant

继续输入npm i @vant/weapp -S --production

5.构建npm包

在微信开发者工具右边的 详情->本地设置 那里,勾选使用npm模块,之后 工具->构建npm

6.添加进.json文件

以添加一个button举例:
index.json中添加如下:

1
2
3
4
5
"usingComponents": {

"van-button": "@vant/weapp/button/index"

}

index.wxml中添加如下

1
<van-button type="primary">主要按钮</van-button>

保存并编译即可出现按钮

参考

对于其他组件,官方文档给予许多详细说明和具体使用案例,请移步参考使用