微信小程序中使用Vant Weapp组件--以card为例

最新推荐文章于 2025-06-20 18:35:35 发布
原创 最新推荐文章于 2025-06-20 18:35:35 发布 · 6.2k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#微信小程序

本文介绍了微信小程序使用Vant组件的构建环境搭建方法。包括在小程序根目录用cmd命令安装，在微信开发者工具中构建npm，还提到构建时可能出现的报错及解决办法，构建成功后项目根目录会多出可识别的npm第三方库目录，最后说明了调用组件的配置。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、构建环境：

Vant Weapp官网文档：

https://youzan.github.io/vant-weapp/#/quickstart

1、方法一注意要在微信小程序根目录下安装；用cmd命令（用production会节省下载的资源）

Ps：Node.js有一个很棒的包管理系统NPM。通过运行“npm install 包名”几乎可以安装任何包/库

2、在微信开发者工具中构建npm

相关npm可见微信小程序官网文档

https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html

3、出错界面

构建npm包的时候有 node_modules 目录 的报错。如果创建的是云开发项目</

最低0.47元/天 解锁文章

200万优质内容无限畅学
uniapp小程序中引入vantweapp
ITshayebuhui的博客
07-07 1659
方式一:可以从github上下载这个插件方式二:使用HBuilderX，“工具”---“插件安装”---“安装新插件”---“前往插件市场安装”---“搜索”，此时插件市场可能为空，修改筛选条件就出来了，使用HBuilderX软件导入。
微信小程序 + vant组件van-card 图片解析不到
dmyc1027的博客
05-21 3089
在使用vant组件制作微信小程序项目时，遇到了图片解析不到的问题。 场景如下： 在页面中，应用了vant组件库中的van-card,组件中将图片路径传给van-card中的thumb属性，即可在左侧位置显示出图片，目标效果如下： 这时遇到了解析不到图片的问题。 在card组件中，thumb中传递的图片路径并不是对于本页面的相对位置，而是/miniprogram_npm/@vant/weapp/card的相对位置，从组件目录中解析图片。 随后，我在目录某个位置创建了myImage文件夹，并且通过
微信小程序卡片滑动组件mp-swipe-card-master.zip
09-25
微信小程序卡片滑动组件mp-swipe-card-master.zip
Vue2.5学习笔记（二）深入了解组件
Zijeak的博客
09-08 4339
1.组件使用的细节 1.2 子标签内使用组件 假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。 为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref
微信小程序如何引入Vant? 并使用vant的垂直slider
最新发布
克里斯蒂亚诺更新的博客
06-20 256
提醒：Element UI 不支持 微信小程序，所以使用vant。但是这个node_modules不能支持使用，需要要构建一下！构建的配置：（默认）
组件切换_小程序卡片切换效果组件wxCardSwiper
weixin_32685145的博客
01-07 535
wxCardSwiper小程序卡片切换效果组件. 支持异步添加卡片数据, 手势滑动触发.源码地址: https://github.com/doterlin/wxCardSwiper使用方法将本项目文件中的components/cardSwiper文件夹复制到你项目的目录下，然后在页面的json配置及页面引入。自定义组件的引入和使用请参考官方文档。 本项目包含组件和页面demo，可直接运行(上滑翻到...
微信小程序 slot 插槽使用
热门推荐
风的轻扬
12-13 1万+
在组件模板中可以提供一个 &lt;slot&gt; 节点，用于承载组件引用时提供的子节点。 1、单个slot，代码示例： &lt;!--第一步：封装组件，components/music/index.wxml--&gt; &lt;!--components/music/index.wxml--&gt; &lt;view&gt; &lt;text&gt;我是标准的&lt;/text&g...
微信小程序——自定义组件
weixin_61972561的博客
05-03 1411
微信小程序——自定义组件的创建
微信小程序Vant Weapp的案例
weixin_45861658的博客
11-10 2165
微信小程序中的页面传值问题 1.页面跳转后，我成功获取到一个值（title），title的值关联到云开发数据库goods集合中的goodsname字段。 求指教怎么以传过来的title值进行分类查询显示到前端的view。以下代码是查询所有数据的。 const db = wx.cloud.database({}); const cont = db.collection('goods'); Page(...
微信小程序：vant weapp组件库在mpvue中实践
繁华落尽
01-03 4984
Vant Weapp 是有赞移动端组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。 官方文档 前言 除了Vant WeappUI组件库之外，还有一些其他热门组件库可供选择。 WeUI : WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含but...
微信小程序自定义card图文组件
菜鸟老五
05-20 2445
//组件wxml <view class="home-party" style="padding-top:10px;"> <view> <view class="home-party-title">{{name}}</view> <view class="home-party-subtitle">{{title}}</view> <span class="iconfont icon- jiant...
【亲测免费】 探秘`wxCard`: 微信小程序的高效卡片管理解决方案
gitblog_00020的博客
04-20 843
探秘wxCard: 微信小程序的高效卡片管理解决方案 在微信小程序开发中，我们经常需要处理各种卡片样式的数据展示，而wxCard就是专为此场景设计的一个轻量级、高性能的组件库。它提供了一套简洁且易于定制的卡片组件，能够帮助开发者快速构建美观且响应式的页面。 技术解析 wxCard基于微信小程序原生API进行开发，利用其强大的自定义组件特性，实现卡片组件的高度可配置性。以下是其核心技术特点： 组件...
微信小程序 vant-weapp 实现多选标签
Jessieeeeeee的博客
08-06 1840
配置 vant-weapp 步骤见：https://jessieeeeee.xyz/2020/08/12/vantweapp-install/ demo.json 记得在 json 文件中引用 vant-weapp 的 tag 组件： { "usingComponents": { "van-tag": "@vant/weapp/tag/index" } } demo.wxml 在 wxml 文件中搭建页面基础结构： <!--pages/demo/demo.wxml--> &l
vant weapp - Card 商品卡片 (修改标题与金额中间间距太大问题)
资深程序员
09-30 7090
前言 最近在使用 Vant-weapp 小程序组件，使用 Card 组件想实现这样一个界面： 在官方文档中给出的示例配置中，你根本无法调整中部宽度。。 解决方案 调整如下三个类，具体看下方代码： .van-card__bottom：金额 / 虚拟价格 / 数量，那一块容器。 .van-card__img：图像容器。 .van-card__thumb：左侧容器(图像) /* 金额/虚拟价格 - 上浮 */ .van-card__bottom{ padding-bottom: 80rpx!import
微信小程序-mpVue+vantWapp——路由跳转
m0_60893808的博客
12-25 309
2.navigator标签：不能跳转tabBar页面。1.a标签：不能跳转tabBar页面。
CT前瞻（二）：Vant4实战之Card卡片与Cell单元格
黛琳ghz的博客，期待你的关注。
04-18 6491
最近在项目开发和学习的过程中，涉及到了Vant UI（简称Vant）的使用，主要还是涉及到了Card卡片和Cell单元格的使用，这个系列的文章就简单记录一下这个实战过程和学习经历，这篇文章介绍关于Card卡片和Cell单元格的实战案例。
小程序vant-weapp-商品卡片列表
祈澈菇凉
12-03 5107
用过小程序的几个框架，最后还是选择了用vant-weapp，喜欢这款框架的原因，可能就是它里面的组件很多，很丰富，够用，在我的业务场景里面，大部分的需求都是可以在这个框架里面找到，不用自己大费周章的写代码，只需要去文档里面，拿到组件出来，稍微的修改一下样式，就可以完成自己的工作，这大概就是它吸引我的地方啦。 当然选择要慎重哟，这个框架最适合的就是做商城项目购物车，订单，商品导航都是现成的呀 所以我...
vue前端之基于vant-ui的card卡片组件的商品购物车修改的简单实现、复选框批量选择、全选反选按钮
bentou_的博客
04-09 1万+
vue前端之基于vant-ui的商品购物车的简单实现
在vue脚手架环境利用vant组件简单实现移动端购物商城系统
weixin_48771583的博客
11-14 2966
用vue脚手架创建好项目，进行以下操作 ①下载vant插件 在终端或cmd中运行 npm i vant -S 在main.js中全局配置vant import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); ②下载安装axios 在终端或cmd中运行 npm install axios -S 在main.js中全局配置axios import axios from 'axios' Vue.prototype.$axios .
微信小程序中vant组件的引用与API封装技巧
Vant Weapp是专为微信小程序设计的一套组件库，它基于 Vant 组件库，但针对微信小程序的开发环境进行了适配和优化。Vant Weapp 提供了包括按钮、表单、导航等多个方面的组件，开发者可以根据自己的需要进行引用和...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值