微信小程序Vant组件配置及使用

微信小程序Vant组件配置及使用

Vant Weapp 官网文档:介绍 - Vant Weapp (gitee.io) Vant Weapp GitHub地址:youzan/vant-weapp: 轻量、可靠的小程序 UI 组件库 (github.com)

本教程使用下载代码方式引入vant组件

1. 下载vant组件源码

  1. 通过git下载vant源码
git
git clone https://github.com/youzan/vant-weapp.git
  1. 将vant源码路径下的dist文件夹复制到微信小程序项目中

2. 使用vant组件

  1. app.json下的"style": "v2"去除,微信小程序在新版基础组件中强行加了许多样式,若不去除该内容,会造成组件部分样式混乱
  2. 在引入vant组件时,只能根据需要,一个组件一个组件往配置项里面添加,无法一次将所有组件全部引入

2.1 全局引入

  1. app.json下配置usingComponents配置项即可全局引入vant组件。
  2. 引入方式:"van-组件名": "组件所在路径/index"
json
1
2
3
"usingComponents": {
    "van-vutton": "/dist/button/index"
}

2.2 局部引入

  1. 对于不太常用的组件,可使用局部引入的方式进行引入
  2. 局部引入只需在wxml对应的json文件中配置usingComponents即可
  3. 局部引入的方式于全局引入相同
陕ICP备2023020057号
Built with Hugo
主题 StackJimmy 设计