小程序vant-weapp-商品卡片列表
用过小程序的几个框架,最后还是选择了用vant-weapp,喜欢这款框架的原因,可能就是它里面的组件很多,很丰富,够用,在我的业务场景里面,大部分的需求都是可以在这个框架里面找到,不用自己大费周章的写代码,只需要去文档里面,拿到组件出来,稍微的修改一下样式,就可以完成自己的工作,这大概就是它吸引我的地方啦。
当然选择要慎重哟,这个框架最适合的就是做商城项目购物车,订单,商品导航都是现成的呀
所以我就选择了用这款框架做日常开发啦。在开发的过程中我会不间断的记录一下这个框架的使用~小程序使用轻量、可靠的小程序 UI 组件库 vant-weapp~~
Github源码:https://github.com/youzan/vant-weapp
中文文档:https://vant-contrib.gitee.io/vant-weapp/#/intro
1:打开微信开发者工具,填写自己的appid和项目名称,选择不使用云服务,新建一个项目。
![](/assets/blank.gif)
![](/assets/blank.gif)
2:右击在选择在终端打开
![](/assets/blank.gif)
进入项目的根目录底下,注意,一定要进入根目录哦,使用cd ../返回上一级目录~
![](/assets/blank.gif)
3:小程序已经支持使用 npm 安装第三方包,
这里通过 npm 安装
1、第一步:npm init2、第二步:npm install --production3、第三步: npm i @vant/weapp -S --production或者 npm i vant-weapp -S --production
![](/assets/blank.gif)
![](/assets/blank.gif)
![](/assets/blank.gif)
这里需要注意一下
npm i vant-weapp -S --production或者npm i @vant/weapp -S --production
引入的区别
使用npm i vant-weapp安装的时候,到时候在在app.json或index.json中引入组件,需要使用这样的路径
{"usingComponents": {"van-button": "../../miniprogram_npm/vant-weapp/button/index"}
}
使用npm i @vant/weapp安装的时候,到时候在在app.json或index.json中引入组件,需要使用这样的路径(推荐,因为这个可以直接抄文档,不需要改变引入路径的~)
{
"usingComponents": {"van-button": "@vant/weapp/button/index"
}
}
4:在微信开发工具执行npm 构建,点击工具里面,构建npm
![](/assets/blank.gif)
构建过程需要等待一会儿,不要捉急
![](/assets/blank.gif)
构建完会生成一个miniprogram_npm文件夹
如果构建完如果编译报错,再构建一次就好了
![](/assets/blank.gif)
话不多说,来看看小程序vant-weapp的渲染商品卡片列表使用
先看一下官方文档是给到的效果哦https://vant-contrib.gitee.io/vant-weapp/#/card
文档里面的代码就很简单
<van-cardnum="2"tag="标签"price="10.00"desc="描述信息"title="商品标题"thumb="{{ imageURL }}"
><view slot="footer"><van-button size="mini">按钮</van-button><van-button size="mini">按钮</van-button></view>
</van-card>
效果是这样的:
![](/assets/blank.gif)
http://www.taodudu.cc/news/show-7201366.html
相关文章:
- vue展示信息卡片_vue组件系列-气泡卡片
- 最好看的TabBar(Vue)
- uniapp里适合添加的一些好看的图片片
- css实现好看的card展示效果
- html最美观的卡片列表,信息列表效果:卡片、列表切换(HTML+CSS+JS案例)
- 好看的卡片阴影
- 【每日一练】15—CSS实现好看的卡片效果
- 化妆品网址大全
- UNITY TMP
- 【报错记录】SpringBoot中MultipartFile上传报/tmp/tomcat.***.tmp (No such file or directory)
- 【UGUI】二、Text(TMP) 文本
- python tmp
- /tmp 和 /var/tmp 的区别
- fast-tmp入门
- UGUI -TextMeshPro(TMP) 多材质
- TMP协议
- TMP的阴影性能如何
- Unity TextMeshPro(TMP) 动态效果
- Linux中最低调、最易让人忽视的tmp目录,原来用处那么大!
- 最不喜欢过年的人
- 月圆向吉,花开见喜 | 元宵节快乐!
- 吃梨后感
- 美不胜收
- 为什么不胜任的人,反而获得晋升?
- 数据库概述_07
- 基于mongodb的动态表单实现
- Node+express+ejs+mysql制作查询数据呈现前端页面
- 怎样给自己的网站加一个网址,然后让别人访问呢?
- 计算机意外地重新启动或遇到错误。Windows安装无法继续。若要安装Windows,请单击“确定”重新启动计算机,然后重新启动安装
- 怎样把python和pip加到环境变量,然后可以在cmd里面启动
小程序vant-weapp-商品卡片列表相关推荐
- 微信小程序Vant Weapp里面Calendar 日历组件不显示的问题
想用Vant Weapp弄个弹出日历选择日期的组件,但是发现按照Vant Weapp里面的文档复制粘贴就翻车了. 复制粘贴后小程序界面空空如也,啥都没有. 百度了一番也没有帖子写这个问题,然后我就只能 ...
- 小程序Vant Weapp的Dialog使用before-close
结合使用了组件调用和异步关闭,vant官方文档好像没有考虑过这个问题,参考了大佬的写法 小程序 van-dialog确认时阻止弹窗关闭 Vant/Weapp/Dialog/before-close的用 ...
- 微信小程序——Vant Weapp的初步使用说明
在微信工程目录下 在终端中输入npm init(初始化设置) 不用输入继续回车(全部默认即可) 整个步骤结束以后它会在\miniprogram目录下生成两个json文件 不用去修改它自动生成的文件,接 ...
- 微信小程序 - Vant weapp UI 框架环境搭建详细教程(Window)
前言 强烈推荐您打开 官方文档,对照着本教程一起对比搭建坏境. 自从 2022 年开始,小程序做了很多改变和升级, 导致网上很多搭建教程文章的教程失效了,本文来做最新的教程. 第一步 为了更贴合新手, ...
- 微信小程序 Vant Weapp 引入Dialog的使用
首先在当前目录的JOSN文件里 "usingComponents": {"van-dialog": "@vant/weapp/dialog/index ...
- 小程序Vant Weapp的DropdownMen下拉菜单自定义标题
虽然官方文档没有给出这种样式的,但这次的下拉菜单的自由度还是比较大一点的,可以自定义标题,只要加个change事件就可以更改了. 参考:Vant Weapp的DropdownMenu 下拉菜单官方文档 ...
- 小程序canvas绘制商品海报实现分享朋友圈
小程序canvas绘制商品海报实现分享朋友圈 效果图: 实现步骤就是点击生成图片 在canvas画布中画出一张海报 然后保存在本地 在imags标签中展示,此处尽可能的把canvas组件隐藏 但是不能 ...
- 小程序团购商品CPS接入,实现达人分佣模式
1.短视频平台生态本地服务达人数量众多,为小程序的访问提供了先天的粉丝基础: 2.全屏短视频对本地生活中的潮生活和新体验提供了转化形式: 3.将传统的以"需求"为导向改变为了以&q ...
- 小程序/Vant UI 实现文件的上传
小程序/Vant UI 实现文件的上传 第一次接触小程序上传的时候,自己经过一些实验测试并记录下来以供大家学习. 使用vant UI的官网地址:Vant Weapp - 轻量.可靠的小程序 UI 组件 ...
- 完美解决小程序一维数组循环渲染列表不够用问题
完美解决小程序一维数组循环渲染列表不够用问题 参考文章: (1)完美解决小程序一维数组循环渲染列表不够用问题 (2)https://www.cnblogs.com/jessical626/p/6363 ...
最新文章
- 联想微型计算机2005款配置,2005款联想43厘米液晶显示屏,55寸液晶屏价格
- 计算机找不到管理无线网络,电脑wifi密码忘了 并且找不到管理无线网络该怎么处理?...
- PRISM ‘VS100COMNTOOLS’ not set. Cannot set the build environment
- 物联网大数据平台软件开发架构案例解析
- 人工智能指用计算机,人工智能测试题..doc
- 【leetcode】动态规划优秀题目
- 【VRP】基于matlab模拟退火算法求解单中心的车辆路径规划问题【含Matlab源码 1340期】
- windows charles 使用教程
- JMeter自动化测试工具超详细基础讲解(一)
- 设计思维(Design Thinking)
- 数据蜂巢架构演讲之路读后感
- Java使用map接收时间格式是Wed Sep 14 00:00:00 CST 2022这种解决办法
- 终于找到了PyMuPDF不能提取文字的原因……它只是个包装
- 元学习:Meta-Learning in Neural Networks: A Survey
- android 怎么刷新view,android – 如何在ViewPager中刷新当前视图
- 不做etl sql 怎么直接取_不管茄子怎么做,直接下锅是大错!多加1步,茄子更入味,不变色...
- android发送微信请求失败,安卓微信浏览器POST请求发不出去。
- Redis系列教材 (四)- Jedis 教程
- acwing 2. 01背包问题
- 涉嫌侵犯FinFET专利,韩国科技院把三星、高通及GF告上法庭