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

9月前作者：北溪入江流分类：Toy博客阅读(70) 违法举报

这篇具有很好参考价值的文章主要介绍了微信小程序Vant组件配置及使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

1. 下载vant组件源码

通过git下载vant源码

git clone https://github.com/youzan/vant-weapp.git

将vant源码路径下的dist文件夹复制到微信小程序项目中

2. 使用vant组件

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

2.1 全局引入

在app.json下配置usingComponents配置项即可全局引入vant组件。
引入方式："van-组件名": "组件所在路径/index"

在微信小程序中使用vant,微信小程序,微信小程序,小程序文章来源地址https://www.toymoban.com/news/detail-545111.html

2.2 局部引入

对于不太常用的组件，可使用局部引入的方式进行引入
局部引入只需在wxml对应的json文件中配置usingComponents即可
局部引入的方式于全局引入相同

到了这里，关于微信小程序Vant组件配置及使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

走进小程序【八】微信小程序中使用【Vant组件库】

2023年04月15日
浏览(49)
微信小程序页面的跳转和导航的配置和vant组件

结论: navigateTo , redirectTo 只能打开非 tabBar 页面。 switchTab 只能打开 tabBar 页面。 reLaunch 可以打开任意页面。页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。调用页面路由带的参数可以在目标页面的 onLoad 中获取。 (1)当我们使用 redirectTo跳

2024年02月09日
浏览(52)
微信小程序使用vant组件样式未生效解决办法

1.删除小程序自带的样式首先在app.json里面删除这一行 2.清除缓存重新编译 3.重新构建npm 重新编译在工具里面

2024年02月15日
浏览(44)
微信小程序使用vant组件样式不生效的问题

方案一：官方文档有说明，将 app.json 中的 “style”: “v2” 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。方案二：网上说了很多解决方案，例如： 1、可能是布局样式有冲突推测可能是flex 布局 2、app.json中取消懒加载 …

2024年02月11日
浏览(72)
微信小程序使用vant组件所出现的一些问题

我在第一次使用vant小程序组件时，出现了不少问题首先，我是跟随官方文档一步一步来做的，但当我构建npm时发生了一些报错 1.发生错误 Error: C:Users86198WeChatProjectsminiprogram-1package.json 未找到 2.发生错误 Error: C:Users86198WeChatProjectsminiprogram-1package.json 对应的 node_modules 不

2024年01月23日
浏览(50)
微信小程序安装和使用 Vant Weapp 组件库

Vant 是一个轻量、可靠的移动端组件库，于 2017 年开源。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。在小程序项目上安装Vant Weapp,（你的电脑应该有npm环境才行）。 win + R 输入 npm -version 查看一下如果没有

2024年02月16日
浏览(67)
原生微信小程序使用 wxs；微信小程序使用 vant-weapp组件

在这里插入图片描述操作顺序：文档地址如果使用 typescript 需要操作步骤3，否则不需要操作 2.1 在根目录下操作 2.2 安装版本 2.3 构建包 - 详情-勾选使用 npm 2.4 使用 vant 组件

2024年02月11日
浏览(66)
微信小程序在使用vant组件库时构建npm报错

在跟着vant官方进行使用步骤一步步操作时，由于要构建NPM，但NPM包在App配置文件的外部所以在做下图这一步时：接着再进行npm构建时会报错解决方法：修改

2024年02月13日
浏览(51)
解决在HBuilderX里用uniapp引入vant后在微信小程序里没反应的问题

在HbuilderX里创建了个uniapp的项目，但是引入vant后，在微信小程序里运行没反应这是App.vue文件加了@import 巴拉巴拉那些问题就出在pages.json文件里，当我们用快捷输入的 usingComponenets 这个，就有问题了如果你不是这个原因，那就关了这篇文章吧如果对你有用，点个赞呗

2024年02月12日
浏览(57)
微信小程序使用vant组件的输入框搭配弹层选择器注意事项

先看下页面代码: wxml js 效果: 点击: 选完确认: 在做这个效果的时候,输入框 van-field 必须得加入 readonly 这个只读属性,不然会导致用户手机触发默认键盘遮挡你的弹窗和选择器内容影响体验. 也不要用 disabled 来禁用输入框,样式会变成禁用状态下的样式很难改动,只需要设置为只

2024年02月11日
浏览(57)