uniapp开发微信小程序笔记8-uniapp使用vant框架

2024-11-27 06:58:00

前言：其实用uni-app开发微信小程序的首选不应该是vant，因为vant没有专门给uni-app设置专栏，可以看到目前Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。

但是我之前维护了一个使用vant的老项目，所以码一篇使用vant的基础教程，以作记录

一、下载vant依赖包

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

二、项目中引入vant

在uni-app项目根目录中创建一个文件夹“wxcomponents”，再新建一个文件夹“@vant”，再新建一个文件夹“weapp”（这样的目录结构是为了和官网推荐保持一致到时候好复制，不想这样写也OK）

再将下载好的vant文件里面的dist的内容拷贝到“wxcomponents”里面

三、使用vant组件

在uni-app中，要使用vant的任何组件，都需要先在pages.json文件中引入对应的组件

引入方式分为两种：

全局引入
局部引入

首先在官网中选择你要使用的组件，官网地址：Vant Weapp - 轻量、可靠的小程序 UI 组件库

1、全局引入

pages.json：

将你想要用的组件引入语句复制进去，注意我们和官网稍有不同，我们外层还有个wxcomponents文件夹

"globalStyle": {
        //全局引入第三方的UI框架
        "usingComponents": {
            //需要什么组件就引入什么组件
            "van-loading": "wxcomponents/@vant/weapp/loading/index"
        }
    },

2、局部引入

pages.json：在pages里面配置，写法不变

"pages": [ 
		//...
		{
			"path": "pages/mine/mine",
			"style": {
				"navigationBarTitleText": ""
			},
			//引入第三方的UI框架
			"usingComponents": {
				 "van-notify": "wxcomponents/@vant/weapp/notify/index"
			}
		}
	],

四、使用组件

将官网中的演示代码复制过来即可

<van-loading /> <van-loading type="spinner" />

五、举例使用Rate评分组件，对比官网代码和uni-app代码

官网代码：

<van-rate value="{{ value }}" bind:change="onChange" />

可以看到官网的示例代码是原生微信小程序的代码，这个时候就不能一味的只复制了，

需要改成：

<van-rate :value="value" @change="onChange" />

这样看着就清楚多了

码农公寓