uni-app引入vant Weapp

目录

 

目录

前言

工具

方法

         1、下载Vant Weapp源码

2、项目新建控件目录

3、导入控件

4、pages.json 配置

5、配置全局样式

6、运行实例

---

---

前言

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

此组件只兼容微信小程序和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 文件夹中

 

2、项目新建控件目录

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

3、导入控件

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

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全局样式：

<style>
	/*每个页面公共css */
	@import "wxcomponents/vant-weapp/common/index.wxss";
</style>

6、运行实例

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

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

运行项目：