安裝
Vant 有針對小程序的版本,通過npm安裝:
npm i @vant/weapp -S --production
構建 npm
安裝 Vant Weapp 后需要構建 NPM,在菜單的【工具】選項中選擇【構建 NPM】:
使用組件
抖音小程序和微信小程序還是有一些差別的,在抖音小程序中要用 Vant 組件,需要使用絕對路徑引入,在你需要使用組件的頁面 .json
文件中引用:
{"usingComponents": {"van-button": "../../miniprogram_npm/@vant/weapp/button/index","van-calendar": "../../miniprogram_npm/@vant/weapp/calendar/index","van-dialog": "../../miniprogram_npm/@vant/weapp/dialog/index"}
}
引用組件樣式
在要使用組件的頁面 .ttss
文件引入相應的組件樣式:
@import '../../miniprogram_npm/@vant/weapp/calendar/index';
@import '../../miniprogram_npm/@vant/weapp/overlay/index';
@import '../../miniprogram_npm/@vant/weapp/dialog/index';
這里有個小細節:在使用彈框等帶有蒙層的組件時,需要在樣式文件中引用 Vant 的 overlay 組件樣式,否則是沒有蒙層的
使用問題
Vant Weapp 中一些組件使用了微信的 wx.nextTick
方法,如 dialog
組件,這時直接使用會發現報錯。
需要到 node_modules
> @vant
> weapp
> lib
目錄下的對應組件 js 文件中將 wx.nextTick
方法替換成 setTimeout
方法。
如 dialog
組件:
修改完成后需要重新構建NPM,之后再使用就沒問題了。