微信小程序，小程序的一种，英文名Wechat Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。对于开发者而言，微信小程序开发门槛相对较低，难度不及APP，能够满足简单的基础应用，适合生活服务类线下商铺以及非刚需低频应用的转换。

目录

下载Vant

下载地址 (国外，有时可能无法访问。)

引入

首先在和pages同级下建一个名为 wxcomponents的文件夹。然后将下载下来的文件夹解压后，找到文件中的 dist 文件。并将其复制到建好的文件夹下，并改名为 vant 。

配置

在 pages.json 中进行配置。

"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"usingComponents":{ //配置vant的组件
			"van-search": "/wxcomponents/vant/search/index"
		}
	}

需要注意的是：如果你的路径不是上面的，则需要将路径改成自己的！

再在 App.vue 的 style 标签中加入：

@import "/wxcomponents/vant/common/index.wxss"

使用

然后就能正常的在页面中进行使用。

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<button type="primary">点击</button>
		<van-search
		  value="sfdf"
		  shape="round"
		  background="#4fc08d"
		  placeholder="请输入搜索关键词"
		/>
	</view>
</template>

消息通知

除了配置 usingComponents 外，还另外需要导入：

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<button type="primary">点击</button>
		<van-search
		  value="sfdf"
		  shape="round"
		  background="#4fc08d"
		  placeholder="请输入搜索关键词"
		/>
		<button @click="showNotify">弹出提示</button>
		<van-notify id="van-notify" />
	</view>
	
</template>

<script>
import Notify from '@/wxcomponents/vant/notify/notify';
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
			showNotify() {
			       Notify({ type: 'primary', message: '通知内容' });
			    }
		}
	}
</script>

<style>

</style>

自定义选择器

Notify({
  message: '自定义节点选择器',  //弹出消息
  duration: 1000, //显示时间
  selector: '#custom-selector', //选择器
});

<!-- 在页面内添加自定义节点 -->
<van-notify id="custom-selector" />