抖音小程序使用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,之后再使用就没问题了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/12917.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

怎么把3d模型导出cad立面---模大狮模型网

在设计工作中,将3D模型导出到CAD软件并生成立面图是一项常见但关键的任务。这不仅有助于更好地展示设计方案,还能方便后续的工程制图和施工。本文将介绍如何通过3ds Max软件将3D模型导出到CAD软件,并生成高质量的立面图,为您提供实…

现货正泰漏电小型断路器NXB-32LE-C16 30MA1P+N原装正品NXB-40L

品牌:CHNT/正泰 型号:NXBLE 额定电流:25A,16A,20A,40A,32A 漏电保护器类型:2P 产地:中国大陆 电压:1000V及以下 极数:3P,4p,2P,1PN 电源方式:交流电 3C证书编号:…

大模型时代下的先行者:景联文科技引领数据标注新时代

在大模型时代,数据标注不再是简单的分类标注,而是一项融合了技术革新、专业技能、法律合规和精细化管理的综合性任务,对推动AI技术的发展和落地应用具有重要意义。 景联文科技作为AI基础行业的数据供应商,可协助人工智能企业解决整…

easyx快速入门1

1.基本说明 EasyX 是针对 C 的图形库,可以帮助 C/C 初学者快速上手图形和游戏编程。 比如,可以基于 EasyX 图形库很快的用几何图形画一个房子,或者一辆移动的小车,可以编写俄罗斯方块、贪吃蛇、黑白棋等小游戏,可以练…

fl studio试用版文件保存无法打开??一个方法教你免费打开!

前言 当下,各款编曲软件五花八门,而这其中最有声誉的必为FL Studio莫属 这个软件呢国人习惯叫他水果,拥有强大的录音、编曲、混音等功能,所以广受音乐圈欢迎。如今,大部分水果一旦有编曲所需,一般都要使用…

CSS 根据子元素选择父元素,并设置父元素的样式

场景举例&#xff1a;当子元素有增加了一个class时&#xff0c;需要影响其父元素的样式 可以使用":has"伪类来实现选择父元素的效果 <style>.parent:has(.child){background-color: #eee;}p{width:100px;border:1px solid #000;} </style> <body>…

人机协同中的比较、调整与反转

人机协同是指人与机器之间的合作关系&#xff0c;通过共同努力实现特定任务的目标。在人机协同中&#xff0c;存在着比较与调整的过程&#xff0c;这是为了实现更好的合作效果和任务完成质量。 比较是指人与机器在任务执行过程中对彼此的表现进行评估和比较。这可以通过对机器的…

vue+ts+vite+pinia+less+echarts 前端可视化 实战项目

1.初始化前端 输入 npm init vuelatest 命令 然后 选择需要的插件2.构建完成后 在终端切换到vue-project文件夹下 npm install 下载依赖 3.下载 less样式 npm install less less-loader -D 4.下载axios npm install axios 5.下载echarts npm install echarts -S 6.引入中国…

战网国际服加速器用哪个好 暴雪战网好用加速器介绍

战网国际版&#xff0c;又称Battle.net环球版&#xff0c;是暴雪娱乐操盘的全球性游戏互动平台&#xff0c;它跨越地理界限&#xff0c;服务于全球游戏爱好者。与地区限定版本相异&#xff0c;国际版赋予玩家自由进入暴雪旗下众多经典游戏的权利&#xff0c;无论身处何方&#…

对比测评3款BI分析工具

前不久&#xff0c;一位准备入职阿里的学弟问我&#xff0c;他要做电商数据分析&#xff0c;电商有庞杂的标签、模型、数据和业务逻辑&#xff0c;菜鸟应该要具备什么样的分析能力啊&#xff1f; 我看了他的岗位职责&#xff0c;主要是负责经营决策支持、专题分析和数据看板搭…

leetcode-字符串变形-104

题目要求 思路 1.首先根据ASCII的规则&#xff0c;把字符串大小写替换&#xff0c;空格保持不变 2.将整个字符串进行翻转 3.以空格为区间&#xff0c;将区间内的字符串进行翻转&#xff0c;其中翻转的函数reverse() 代码实现 class Solution { public:string trans(string s…

【C语言】通讯录系统实现

目录 1、通讯录系统介绍 2、代码分装 3、代码实现步骤 3.1制作菜单函数以及游戏运行逻辑流程 3.2、封装人的信息PeoInfo以及通讯录Contact结构体类型 3.3、初始化通讯录InitContact函数 3.4、增加联系人AddContact函数 3.5、显示所有联系人ShowContact函数 3.6、删除联系人D…

Shell之常用命令

目录 1.排序工具--sort命令 1.1 快读查找一个目录中最大文件 2.去重工具--uniq命令 2.1 分析判断远程登录错误次数&#xff0c;禁止该用户远程登录 3.修改工具--tr命令 4.列截取工具--cut命令 5.分割文件工具--split命令 6.合并文件列--paste命令 7.扫描工具--eval命令…

【Linux】常用指令、热键与权限管理

一、常用指令 &#xff08;1&#xff09;ls 功能&#xff1a;列出指定目录下的所有子目录与文件 用法&#xff1a;ls &#xff08;选项&#xff09; &#xff08;目录或文件名&#xff09; 常用选项&#xff1a; -a&#xff1a;列出目录下的所有文件&#xff0c;包括隐藏…

c语言中数字字符串和数字互转

#include <getopt.h> #include <stdio.h> #include <stdlib.h>#define MAX_PATH 256 char filename[MAX_PATH 5]; int main(int argc, char** argv) {//数字字符串转数字const char* kk "689";int zhi atoi(kk) 8;//数字字符串转doubledoub…

代码随想录训练营Day 29|力扣39. 组合总和、40.组合总和II、131.分割回文串

1.组合总和 题目链接/文章讲解&#xff1a; 代码随想录 视频讲解&#xff1a;带你学透回溯算法-组合总和&#xff08;对应「leetcode」力扣题目&#xff1a;39.组合总和&#xff09;| 回溯法精讲&#xff01;_哔哩哔哩_bilibili 代码&#xff1a;&#xff08;未剪枝版 &#xf…

ChatGPT未来可能应用于iPhone?

苹果接即将与OpenAI达成协议 ChatGPT未来应用于iPhone 前言 就在5月11日&#xff0c;苹果公司正与OpenAI进行深入讨论&#xff0c;计划在其最新的iOS操作系统中整合OpenAI的先进技术。这一举措是苹果公司在为其产品线融入更先进的人工智能功能所做努力的一部分。 目前情况双方…

vue2 八大组件通信,父子通信,跨层级通信,事件总线,vuex等

文章目录 什么是组件通信&#xff1f;父子通信流程propsProps 定义Props 作用特点数组写法对象写法&#xff08;props校验&#xff09;简写只验证数据类型&#xff1a;完整写法&#xff0c;完整的验证&#xff1a; props父向子传值用props父传子在子组件中修改props $emit子向父…

自定义 Gradle 插件进行统一的静态代码分析

静态代码分析是一项了不起的技术, 它能让代码库更易于维护. 但是, 如果你在不同的版本库中拥有多个服务(可能由不同的团队开发), 如何才能让每个人都遵循既定的代码风格呢? 一个好办法是将所有规则封装在一个插件中, 该插件会在每个项目构建时自动执行所需的验证. 因此, 在本…

最新版rancher环境配置安装和集群搭建详细教程记录

&#x1f680; 作者 &#xff1a;“二当家-小D” &#x1f680; 博主简介&#xff1a;⭐前荔枝FM架构师、阿里资深工程师||曾任职于阿里巴巴担任多个项目负责人&#xff0c;8年开发架构经验&#xff0c;精通java,擅长分布式高并发架构,自动化压力测试&#xff0c;微服务容器化k…