npm构建小程序需要下载node.js然后在文件上方目录输入cmd，剩下步骤如图所示：
或者登录 官网 有具体介绍： https://youzan.github.io/vant-weapp/#/home
下面介绍一些简单的组件：
JSON文件：
json文件为引入的组件：
{
"usingComponents": {
"MySwiper":"/components/MySwiper/MySwiper",
"van-button": "@vant/weapp/button/index",
"van-cell": "@vant/weapp/cell/index",
"van-cell-group": "@vant/weapp/cell-group/index",
"van-config-provider": "@vant/weapp/config-provider/index",
"van-icon": "@vant/weapp/icon/index",
"van-image": "@vant/weapp/image/index",
"van-row": "@vant/weapp/row/index",
"van-col": "@vant/weapp/col/index",
"van-popup": "@vant/weapp/popup/index",
"van-toast": "@vant/weapp/toast/index",
"van-transition": "@vant/weapp/transition/index"
}
}
wxml部分：
<!--pages/home/home.wxml-->
<van-transition name="fade-up" show="{{ true }}" custom-class="block">内容</van-transition>
<van-toast id="van-toast" />
<view class="van-hairline--bottom" style="height: 100px;">
123123123
</view>
<view class="van-multi-ellipsis--l3">
这是一段最多显示三行的文字，后面的内容会省略。
这是一段最多显示三行的文字，后面的内容会省略
这是一段最多显示三行的文字，后面的内容会省略
这是一段最多显示三行的文字，后面的内容会省略
</view>
<!-- <view class="van-multi-ellipsis--l2">
这是一段最多显示两行的文字，后面的内容会省略。
这是一段最多显示两行的文字，后面的内容会省略。
这是一段最多显示两行的文字，后面的内容会省略。
</view> -->
<!-- <view class="van-ellipsis">
这是一段宽度限制 250px 的文字，后面的内容会省略。
</view> -->
<van-cell title="展示弹出层" is-link bind:click="showPopup" />
<van-popup show="{{ show }}" bind:close="onClose"
position="top"
custom-style="height: 20%;text-align:center;">内容</van-popup>
<view style="padding:100px" bindtap="fn">内容</view>
<MySwiper slides="{{slides}}" bindchildChange="childChange"></MySwiper>
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
<van-cell-group>
<van-cell title="单元格" value="内容" />
<van-cell title="单元格" value="内容" label="描述信息" border="{{ false }}" />
</van-cell-group>
<van-icon name="close" />
<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
<van-icon name="chat" dot />
<van-icon name="chat" info="9" />
<van-icon name="chat" info="99+" />
<van-icon name="arrow-left" color="red" size="50px"/>
<van-image round lazy-load slot="loading" width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" />
<van-image use-error-slot>
<text slot="error">加载失败</text>
</van-image>
<van-row>
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
</van-row>
<van-row>
<van-col span="4">span: 4</van-col>
<van-col span="10" offset="4">offset: 4, span: 10</van-col>
</van-row>
<van-row>
<van-col offset="12" span="12">offset: 12, span: 12</van-col>
</van-row>
<van-row gutter="20">
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
</van-row>
wxss文件：//可引入全局
/* pages/home/home.wxss */
/* @import '@vant/weapp/common/index.wxss'; */
@import '/miniprogram_npm/@vant/weapp/common/index.wxss'
wxjs文件：
// pages/home/home.js
// import Toast from 'path/to/@vant/weapp/dist/toast/toast';
import Toast from '../../miniprogram_npm/@vant/weapp/toast/toast';
Page({
/**
* 页面的初始数据
*/
data: {
slides:[],
show:false
},
fn(){
wx.showToast({
title: 'title',
})
},
showPopup() {
this.setData({ show: true });
},
onClose(){
this.setData({ show: false });
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
Toast('我爱学前端')
this.getImage();
},
childChange:function(e){
wx.showToast({
title: e.detail.toString(),
icon:'none'
})
},
getImage: function () {
wx.request({
url: '。。。。。。。。。。。。‘//接口另找,
fail:(res)=>{
console.log(res)
},
success:(res)=>{
let { slides } = res.data;
this.setData({slides})
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
效果图：
日历组件：
JSON部分：
{
"usingComponents": {
"van-cell": "@vant/weapp/cell/index",
"van-calendar": "@vant/weapp/calendar/index"
}
}
wxml部分：
<!--pages/vantdemo/vantdemo.wxml-->
<van-cell title="选择单个日期" value="{{ date }}" bind:click="onDisplay" />
<van-calendar
type="range"
show="{{ show }}"
bind:close="onClose"
bind:confirm="onConfirm"
show-confirm="{{ true }}"
color="#07c160"
min-date="{{ minDate }}"
max-date="{{ maxDate }}"
confirm-text="完成"
confirm-disabled-text="请选择结束时间"
formatter="{{ formatter }}"
position="top"
max-range="{{ 2}}"
first-day-of-week="{{ 3 }}"
poppable="{{ true }}"
/>
js部分：
// pages/vantdemo/vantdemo.js
Page({
/**
* 页面的初始数据
*/
data: {
show: false,
date:'',
minDate: new Date('2022-3-1').getTime(),
maxDate: new Date('2022-3-5').getTime(),
formatter(day){
const month = day.date.getMonth() + 1;
const date = day.date.getDate();
if (month === 3) {
if (date === 1) {
day.topInfo = '赶集';
} else if (date === 3) {
day.topInfo = '出去爬山';
} else if (date === 11) {
day.text = '今天';
}
}
if (day.type === 'start') {
day.bottomInfo = '入住';
} else if (day.type === 'end') {
day.bottomInfo = '离店';
}
return day;
}
},
onDisplay() {
this.setData({
show: true
});
},
onClose() {
this.setData({
show: false
});
},
formatDate(date) {
date = new Date(date);
/* 2022-02-28 这种格式 */
return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
},
onConfirm(event) {
console.log(event)
let [start,end] = event.detail;
console.log(start,end)
this.setData({
show: false,
date: `${this.formatDate(start)}~${this.formatDate(end)}`
});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
效果图：
