抖音小程序使用Vant

安装

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，之后再使用就没问题了。

picker 组件空白

使用 picker 组件的时候，会发现有值，但是显示空白，需要找到 node_modules > @vant > weapp > lib > picker-column > index.wxs 文件，然后修改 wrapperStyle 函数：

主要是把 px 单位加上，之后重构npm。
接着在你引用 picker 组件的页面样式文件中加上：

.van-picker__mask{
  background-size: 100% 110px;
}
.van-picker__frame.van-hairline--top-bottom{
  height: 44px;
}

至此，picker 组件就能正常使用了。