微信小程序vant weapp组件库的使用

最新推荐文章于 2024-05-28 16:34:20 发布
最新推荐文章于 2024-05-28 16:34:20 发布
阅读量1.9k 收藏 3
点赞数 4
分类专栏： 微信小程序 前端开发常用工具 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44629323/article/details/107449951
版权
本文介绍了如何在微信小程序中使用 vant weapp 组件库，从去除 app.json 中的 'style': 'v2' 开始，逐步演示如何创建按钮、引入组件、添加图标以及自定义样式。通过在 app.json 和 wxml 文件中添加相应代码，实现了组件的显示和功能定制。
摘要由CSDN通过智能技术生成

上一篇文章我们安装了组件库，接下来让我们来使用这个组件库

1.首先我们先将app.json中的"sty1e”: "v2” 去除， 小程序的新版基础组件强行加上了许多样式，难以去除，不关闭将造成部分组件样式混乱
按ctrl+s保存快捷键
在这里插入图片描述

2.比如我们想弄一个按钮：
我们需要在新建的wxml文件中添加代码

<van-button type="primary">主要按钮</van-button>

按ctrl+s保存快捷键就会显示出来
但是这是你会发现没有显示按钮，因为并没有引入组件
在这里插入图片描述

3.这时我们只需要在app.json中添加代码：


                

                
                
        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  小小码农呀
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    4
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    3
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
vue移动端项目vant组件库之button

				
			

			

				

					笑望灬星辰
				

				

					05-31
					
					1万+
					
				

			

		

		

			
				
vue移动端项目vant组件库之button
vue移动端项目按需引入vant组件库
vant组件库官网
<template>
  <div class="box">
    <!--
      button 注意要点
      type   对应样式类名 如 .van-button--primary
      type="primary"  对应绿色
      type="info"  对应蓝色
      其他type 和element-ui是一样的
      没

			
		

	



                

              
                



	

		

			

				
					
Vant van-button去除边框，自定义样式，改变组件自带的样式属性

					
热门推荐

				
			

			

				

					z772330927的博客
				

				

					05-06
					
					2万+
					
				

			

		

		

			
				
van-button去除边框，自定义样式
基本语法
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<va...

			
		

	



                


  
              

                


	

		

			

				
					
小程序使用vant组件库

					
最新发布

				
			

			

				

					qq_61990666的博客
				

				

					05-28
					
					1216
					
				

			

		

		

			
				
使用变量可以在小程序也可在页面.在css内是在选择器下定义变量,如果是变量来设置样式的,最好以--开头,便于区分.然后需要的var(变量)会访问父组件,当前组件内的css内的这个变量的值在vant,wxss内也是一样.

			
		

	





	

		

			

				
					
Vant 使用 iconfont 自定义图标

				
			

			

				

					qq_33160523的博客
				

				

					11-24
					
					3077
					
				

			

		

		

			
				
vant官方文档
刚开始看官方文档不是很清楚，后面百度加上自己验证后才弄清楚使用方法
一、到iconfont下新建一个项目
https://www.iconfont.cn/



这里的Font Family就是对应vant的class-prefix属性，FontClass/Symbol 前缀设为Font Family后面加上’-
二、把所需的图标加入的新建的项目

选择对应图标加入购物车

点击右上角购物车然后加入新建的项目

下载然后把文件夹解压复制到项目src/下某个目录，（demo.css和demo

			
		

	



		

			
		



	

		

			

				
					
vant自定义引入iconfont图标以及字体

				
			

			

				

					weixin_61710685的博客
				

				

					03-17
					
					5129
					
				

			

		

		

			
				
修改想要了解vantUI的可以点击https://youzan.github.io/vant/#/zh-CN/intro因为vantUI给的图标非常少，为了满足自己的需求，就应该找到一种方法来向vant添加自己自定义的图标，对于自定义图标我想到一种引入vant引入iconfont图标的方法就是阿里的iconfont矢量图库。

			
		

	





	

		

			

				
					
Vant中＜van-button＞中icon的位置设置

				
			

			

				

					qq_56715703的博客
				

				

					03-13
					
					694
					
				

			

		

		

			
				
一般在按钮中加入icon，其位置都在左侧。我们可以用：van-position，改变图标展示位置。如：icon-position="right"

			
		

	





	

		

			

				
					
解决方案：实现Vue3.2+Vant点击选中按钮，右下角显示三角形勾选 + 破碎图片占位

				
			

			

				

					白洞，白色的明天在等着我们
				

				

					04-10
					
					2034
					
				

			

		

		

			
				
对应到css的select部分，当选中时，为其渲染边框，颜色提示选中，然后渲染右下角的三角形和勾采用的是伪类元素：::before 和::after。在这里的::before和::after只代表渲染的顺序，先渲染红色三角再渲染勾能保证勾不会被遮盖，当然这里可以设计。给元素设置伪元素的时候，必须设置其content属性，浏览器才会将这些元素插入到选择的元素中。直接渲染勾到最高层，如此再更换::before和::after也无妨了。就可以渲染出一张灰色的空白图（也可以设计其他的）进行占位了。

			
		

	





	

		

			

				
					
vantUI底部tabbar自定义引用img图标

				
			

			

				

					草巾冒小子的博客
				

				

					01-31
					
					738
					
				

			

		

		

			
				
注意 · 显示正常：
关键词的使用，如上文提到的：

完结。

			
		

	





	

		

			

				
					
微信小程序使用Vant Weapp组件库的方法步骤

				
			

			

				

					12-11
				

			

		

		

			
				
通过以上步骤，你应该能够成功地在微信小程序中引入和使用 Vant Weapp 组件库。在开发过程中，记得时常查看 Vant Weapp 的官方文档，获取最新的组件用法和更新信息，以保持应用的稳定性和兼容性。同时，对于遇到的...

			
		

	





	

		

			

				
					
微信小程序引入vant-weapp

				
			

			

				

					01-03
				

			

		

		

			
				
1 在桌面新建demo文件夹，然后打开微信开发者工具，选择demo文件夹新建小程序项目 2 用cmd或者powershell找到该项目目录，在该目录下进行安装vant-weapp  步骤一 通过 npm 安装 # 通过 npm 安装 npm i @vant/weapp -...

			
		

	





	

		

			

				
					
微信小程序vant弹窗组件的实现方式

				
			

			

				

					10-15
				

			

		

		

			
				
【微信小程序vant弹窗组件的实现方式】  在前端开发中，弹窗组件是常见的交互元素，用于提供信息提示、用户确认、数据输入等场景。Vant Weapp 是由有赞团队开发的一款专为微信小程序设计的UI组件库，它提供了灵活、...

			
		

	





	

		

			

				
					
2020-09-30  **vant中van-icon使用自定义图标简单粗暴**

				
			

			

				

					weixin_45102016的博客
				

				

					09-30
					
					1101
					
				

			

		

		

			
				
vant中van-icon使用自定义图标简单粗暴
https://blog.csdn.net/weixin_42565137/article/details/95975966



			
		

	





	

		

			

				
					
uni-app + vant

				
			

			

				

					aibujin的博客
				

				

					04-29
					
					3696
					
				

			

		

		

			
				
uni-app  + vant
创建 uni-app
打开 Hbuilder 创建项目
Hbulder 下载地址： https://www.dcloud.io/


下载 vant 组件
下载地址 ：https://github.com/youzan/vant-weapp

创建组件存放目录 ，引入 vant 组件
在与 pages 同级目录创建 ’wxcomponents‘  文件夹，必须是这个名称；

在 ’wxcomponents‘ 下面创建 ’vant-weapp‘， 找到下载的 vant 组件，复

			
		

	





	

		

			

				
					
创建小程序及引入vant-weapp组件及使用云开发

				
			

			

				

					欢迎小伙伴们的评论和私信，工作日基本都会上来看看的哈
				

				

					09-02
					
					820
					
				

			

		

		

			
				
1.首先创建一个文件夹，用来存放小程序的文件，我一般在d盘创建个文件夹

2.然后双击打开 微信开发者工具，点击项目 -新建项目 ，然后就会出现个弹窗 创建小程序
写好 项目名称 找到刚才创建的文件夹的路径 AppID 可以去注册 也可以使用测试的，点击新建

3.鼠标右击pages，选择 新建文件夹  ，接着 在创建的文件夹上面 右击 ，选择   新建page，然后就会出现四个文件  分别是 .html，.wxss，.json，.js   ，html文件就是用来写html，wxss文件用来写css样式，j

			
		

	





	

		

			

				
					
uniapp中使用vant-weapp

				
			

			

				

					黎小小的博客
				

				

					07-12
					
					1706
					
				

			

		

		

			
				
【代码】uniapp中使用vant-weapp。

			
		

	





	

		

			

				
					
微信小程序 vant 样式覆盖与定制主题

				
			

			

				

					平凡
				

				

					10-08
					
					6881
					
				

			

		

		

			
				
微信小程序中使用vant，组件样式修改方法

			
		

	





	

		

			

				
					
van-icon自定义图标的引入

				
			

			

				

					liangzg
				

				

					04-22
					
					2363
					
				

			

		

		

			
				
van-icon自定义图标的引入1.打开iconfont官网2.将需要引入的图标添加入库3.将已经入库的图标添加至项目（如果还没有项目需要创建）4.复制代码在浏览器打开5.将内容全部复制6.在本地应用中新建css文件，并把内容拷入，把css文件引入到mian.j中7. 页面van-icon中使用
1.打开iconfont官网
https://www.iconfont.cn/
2.将需要引入的图标添加入库

3.将已经入库的图标添加至项目（如果还没有项目需要创建）

4.复制代码在浏览器打开

5.将内容全部

			
		

	





	

		

			

				
					
vant+vue（自定义单选、复选按钮图标以及扩大单选按钮范围）

				
			

			

				

					DW14687的博客
				

				

					04-02
					
					5762
					
				

			

		

		

			
				
vant+vue（自定义单选、复选按钮图标以及扩大单选按钮范围）
主要记录vant和vue使用过程中遇见的问题以及解决方案

文章目录vant+vue（自定义单选、复选按钮图标以及扩大单选按钮范围）前言一、单选按钮图标自定义？二、第一步1.html部分2.data引入自定义图标3.扩大单选按钮可点击范围总结


前言
有些时候我们想自己定义单选按钮图标，以及扩大单选按钮的范围，例如在制作九宫格的时候，那么下面我们来讲讲怎样自定义按钮图标，本文章基于vant和vue来写

一、单选按钮图标自定义？
单选和复选

			
		

	





	

		

			

				
					
Vant基础

				
			

			

				

					weixin_52966724的博客
				

				

					04-28
					
					4412
					
				

			

		

		

			
				
一.介绍

1.Vant 是一个轻量、可靠的移动端组件库，于 2017 年开源。

2.目前 Vant 官方提供了Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护React 版本和支付宝小程序版本。

3.它对我们初学者来说简单快捷体积小，最重要的是它是全中文文档并且有PC端与移动端两个版本



二.快速上手

1.安装

（1）通过 npm 安装

在现有项目中使用 Vant 时，可以通过npm进行安装：


# Vue 3 项目，安装最新版 Vant
npm i v...

			
		

	





	

		

			

				
					
微信小程序vant weapp源码

				
			

			

				

					05-02
				

			

		

		

			
				
vant weapp是一个基于微信小程序的组件库，旨在为开发者提供高质量、易用的UI组件，包括常见的表单、列表、弹窗、导航等组件。该组件库源码开放，提供给开发者自由参考、学习和使用。

vant weapp的源码包括两个部分，一个是组件库的JS代码，另一个是组件库的CSS代码。在使用vant weapp时，需要将这两部分的代码导入到小程序的相应目录下，并在页面中引入相关组件的JS和CSS文件。引入后，就可以使用vant weapp提供的组件和功能了。

让我们来看一下vant weapp的组件库源码具体包含哪些内容。首先，它提供了一系列常见的UI组件，比如Button按钮、Card卡片、Cell单元格、Icon图标、Switch开关、Tab标签页等等。这些组件不仅外观精美，而且封装了常见的逻辑，使用者只需要传入相应的配置即可快速使用。

另外，vant weapp也提供了一些工具类组件，如Toast轻提示、Dialog弹窗、Loading加载等待等。这些组件在实际开发中，也是经常使用的，通常需要在各种场景下进行调用。

总之，vant weapp的源码为我们提供了高质量的微信小程序UI组件库，并且还提供了丰富的工具类组件，可以快速地搭建小程序界面并实现各种交互。无论是入门级开发者还是高级开发者，都可以从中受益良多，提升自己的小程序开发技能。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值