抖音小程序使用Vant

admin2024-05-15  1

安装

Vant 有针对小程序的版本,通过npm安装:

npm i @vant/weapp -S --production

构建 npm

安装 Vant Weapp 后需要构建 NPM,在菜单的【工具】选项中选择【构建 NPM】:

抖音小程序使用Vant,在这里插入图片描述,第1张

使用组件

抖音小程序和微信小程序还是有一些差别的,在抖音小程序中要用 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 Weapp 中一些组件使用了微信的 wx.nextTick 方法,如 dialog 组件,这时直接使用会发现报错。
需要到 node_modules > @vant > weapp > lib 目录下的对应组件 js 文件中将 wx.nextTick 方法替换成 setTimeout 方法。
dialog 组件:

抖音小程序使用Vant,在这里插入图片描述,第2张

修改完成后需要重新构建NPM,之后再使用就没问题了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!