uni-app引入vant Weapp

妖狐艹你老母 2023-03-13 05:26 61阅读 0赞

**目录**

前言

工具

方法

1、下载Vant Weapp源码

2、项目新建控件目录

3、导入控件

4、pages.json 配置

5、配置全局样式

6、运行实例

--------------------

# 前言 #

vant Weapp 是有赞专为微信小程序适配的一套UI组件 [详情查看官网][Link 1]

此组件只兼容微信小程序和app，有跨端需求的请做好适配

此文是关于uni-app在HBuliderX中如何引入vant Weapp

# 工具 #

1.  HBuliderX
2.  微信开发者工具

# 方法 #

在小程序中，是通过控件调用的方式调用vant，所以只需要把所需的Vant Weapp控件导入我们的项目中

### 1、下载Vant Weapp源码 ###

这里通过git方式下载最新的Vant Weapp得源码

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

下载好源码后，控件在 ***/vant-weapp/dist*** 文件夹中

![20200511164825150.png][]

# #

## 2、项目新建控件目录 ##

在uni-app项目的根目录新建 ***/wxcomponents/vant-weapp *** 用于存放控件

![20200511164540549.png][]

### **3、导入控件** ###

回到vant-weapp源码 ***/dist*** 文件夹中，将所有控件复制粘贴到uni-app项目

![20200511165802565.png][]

### 4、`pages.json` 配置 ###

配置上 **usingComponents**

{
    	"pages": [
            {
                "path" : "pages/login/login",
                "style" : {
    				"navigationBarTitleText": "登录",
    				 // 使用小程序组件
    				"usingComponents": {
    					"van-button": "/wxcomponents/vant-weapp/button/index"
    				}
    			}
            }
        ],
    	"globalStyle": {
    		"navigationBarTextStyle": "white",
    		"navigationBarTitleText": "uni-app",
    		"navigationBarBackgroundColor": "#007AFF",
    		"backgroundColor": "#FFFFFF"
    	}
    }

### 5、配置全局样式 ###

在App.vue中配置上vant全局样式：

![20200719120534523.png][]

### 6、运行实例 ###

回到项目页面，这里我们随便写一个vant 按钮

<van-button round plain type="primary" size="large" open-type="getUserInfo" lang="zh_CN" @getuserinfo="onGotUserInfo">登录</van-button>

运行项目：

![20200511170424406.png][]

[Link 1]: https://youzan.github.io/vant-weapp/#/intro
[20200511164825150.png]: /images/20230312/123f777d32c74b87887b410bc15ccb9d.png
[20200511164540549.png]: /images/20230312/446689d0db2d4ed3aacb7fc4c083d1b3.png
[20200511165802565.png]: /images/20230312/0df354fc4b834652973e90425db4f329.png
[20200719120534523.png]: /images/20230312/c2ff0a0f01c5428b84a858837fe97f52.png
[20200511170424406.png]: /images/20230312/8dcbddf9f000461da8459fbca29b13d4.png