npm構(gòu)建小程序需要下載node.js然后在文件上方目錄輸入cmd，剩下步驟如圖所示：
或者登錄 官網(wǎng) 有具體介紹： 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">內(nèi)容</van-transition>
<van-toast?id="van-toast"?/>
<view?class="van-hairline--bottom"?style="height:?100px;">
123123123
</view>
<view?class="van-multi-ellipsis--l3">
??這是一段最多顯示三行的文字，后面的內(nèi)容會省略。
??這是一段最多顯示三行的文字，后面的內(nèi)容會省略
??這是一段最多顯示三行的文字，后面的內(nèi)容會省略
??這是一段最多顯示三行的文字，后面的內(nèi)容會省略
</view>
<!--?<view?class="van-multi-ellipsis--l2">
??這是一段最多顯示兩行的文字，后面的內(nèi)容會省略。
??這是一段最多顯示兩行的文字，后面的內(nèi)容會省略。
??這是一段最多顯示兩行的文字，后面的內(nèi)容會省略。
</view>?-->
<!--?<view?class="van-ellipsis">
??這是一段寬度限制?250px?的文字，后面的內(nèi)容會省略。
</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;">內(nèi)容</van-popup>
<view?style="padding:100px"?bindtap="fn">內(nèi)容</view>
<MySwiper?slides="{{slides}}"?bindchildChange="childChange"></MySwiper>
<van-button?type="default">默認(rèn)按鈕</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="內(nèi)容"?/>
??<van-cell?title="單元格"?value="內(nèi)容"?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({
????/**
?????*?頁面的初始數(shù)據(jù)
?????*/
????data:?{
????????slides:[],
????????show:false
????},
????fn(){
????????wx.showToast({
??????????title:?'title',
????????})
????},
????showPopup()?{
????????this.setData({?show:?true?});
????},
????onClose(){
????????this.setData({?show:?false?});
????},
????/**
?????*?生命周期函數(shù)--監(jiān)聽頁面加載
?????*/
????onLoad:?function?(options)?{
????????Toast('我愛學(xué)前端')
????????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})
????????????}???
????????})
????},
????/**
?????*?生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
?????*/
????onReady:?function?()?{
????},
????/**
?????*?生命周期函數(shù)--監(jiān)聽頁面顯示
?????*/
????onShow:?function?()?{
????},
????/**
?????*?生命周期函數(shù)--監(jiān)聽頁面隱藏
?????*/
????onHide:?function?()?{
????},
????/**
?????*?生命周期函數(shù)--監(jiān)聽頁面卸載
?????*/
????onUnload:?function?()?{
????},
????/**
?????*?頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
?????*/
????onPullDownRefresh:?function?()?{
????},
????/**
?????*?頁面上拉觸底事件的處理函數(shù)
?????*/
????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="請選擇結(jié)束時間"?
????formatter="{{?formatter?}}"?
????position="top"
????max-range="{{?2}}"
????first-day-of-week="{{?3?}}"?
????poppable="{{?true?}}"
/>
js部分：
//?pages/vantdemo/vantdemo.js
Page({
????/**
?????*?頁面的初始數(shù)據(jù)
?????*/
????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)}`
????????});
????},
????/**
?????*?生命周期函數(shù)--監(jiān)聽頁面加載
?????*/
????onLoad:?function?(options)?{
????},
????/**
?????*?生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
?????*/
????onReady:?function?()?{
????},
????/**
?????*?生命周期函數(shù)--監(jiān)聽頁面顯示
?????*/
????onShow:?function?()?{
????},
????/**
?????*?生命周期函數(shù)--監(jiān)聽頁面隱藏
?????*/
????onHide:?function?()?{
????},
????/**
?????*?生命周期函數(shù)--監(jiān)聽頁面卸載
?????*/
????onUnload:?function?()?{
????},
????/**
?????*?頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
?????*/
????onPullDownRefresh:?function?()?{
????},
????/**
?????*?頁面上拉觸底事件的處理函數(shù)
?????*/
????onReachBottom:?function?()?{
????},
????/**
?????*?用戶點擊右上角分享
?????*/
????onShareAppMessage:?function?()?{
????}
})
效果圖：
