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 文件夹中

uni-app引入vant Weapp_第1张图片

 

2、项目新建控件目录

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

uni-app引入vant Weapp_第2张图片

3、导入控件

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

uni-app引入vant Weapp_第3张图片

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

6、运行实例

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

登录

运行项目:

uni-app引入vant Weapp_第4张图片

 

你可能感兴趣的:(uni-app微信小程序)