微信小程序使用 Vant Weapp 组件库

497 阅读1分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

一、环境准备

检查是否具备 npm 环境。

Windows:打开 cmd 命令行工具,输入 npm -v 查看。 在这里插入图片描述 出现版本号则为已安装。

二、安装 Vant Weapp

在小程序根目录执行命令:

  1. 初始化 package.json
 npm init -y
  1. 下载 Vant Weapp
npm i @vant/weapp -S --production
三、微信开发者工具配置
  1. 使用 npm 模块

【微信开发者工具】-【详情】-【本地配置】-【使用 npm 模块】 在这里插入图片描述

  1. 构建 npm

【微信开发者工具】-【工具】-【构建 npm】

四、引入组件

这里以引入 button 组件为例,引入其它组件同理,在 app.json 中加入相应组件的引入即可:

"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}
五、使用组件

引入组件后,可以在 wxml 中直接使用组件:

<van-button type="primary">按钮</van-button>
六、其它

删除 app.json 中的 "style": "v2" 配置。

将 app.json 中的 "style": "v2" 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。

相关链接

1. Vant Weapp 官网 >>>

2. 微信小程序开发文档 >>>

3. 微信小程序 npm 支持 >>>