请先了解vant在各小程序的兼容情况

vant微信小程序版dist组件库来源，复制这个dist到自己的uniapp微信小程序项目哦！
vant组件生态
uniapp小程序组件

前置条件

已完成微信小程序的vant组件按需引入
已有wxcomponents > vant > dist 组件

温馨提示

pages.json > globalStyle > usingComponents 条件编译

        // #ifdef MP-WEIXIN"usingComponents": {"van-empty": "/wxcomponents/vant/dist/empty/index"},// #endif// #ifdef MP-BAIDU"usingComponents": {"van-empty": "/swancomponents/vant/dist/empty/index"},// #endif// #ifdef MP-TOUTIAO"usingComponents": {"van-empty": "/ttcomponents/vant/dist/empty/index"},// #endif

微信小程序包在unpackage > dist > dev(建议) > mp-weixin
可单独转换wxcomponents文件夹
示例转换使用的是v2版vant组件
不建议在项目内直接运行以下命令
非100%兼容，请检查后再上线项目
本文不予回复任何评论，谢谢

兼容到百度swan自定义组件

链接: wx2

复制微信小程序包（未压缩代码的开发包）到文件夹mp-weixin
新建文件夹mp-baidu
安装转换工具
npm i wx2
管理员cmd进入
cd node_modules/.bin
运行命令行
wx2 微信小程序目录字节跳动小程序目录 --target=swan
wx2 …/…/mp-weixin …/…/mp-baidu --target=swan
将目标文件夹中wxcomponents重命名为swancomponents，复制到项目中

兼容到抖音tt自定义组件

链接: wx-to-tt

复制微信小程序包（未压缩代码的开发包）到文件夹mp-weixin
新建文件夹mp-toutiao
安装转换工具
npm i wx-to-tt
管理员cmd进入
cd node_modules/.bin
运行命令行
wx2tt -i [微信小程序目录] -o [字节跳动小程序目录]
wx2tt -i …/…/mp-weixin -o …/…/mp-toutiao
将目标文件夹中wxcomponents重命名为ttcomponents，复制到项目中

uniapp平台使用vant组件按需引入，并兼容到微信、百度、抖音小程序相关推荐

2023年最新最全uniCloud入门学习，零基础入门到实战项目 uni-admin打造uniapp网页后端微信支付宝抖音小程序后端 unicloud数据后台快速打造uniapp小程序项目
今天开始带着大家一起零基础学习uniCloud,在下面的课程中我们就简称uniCloud为cloud吧.我这里从零基础开始教大家,后面可以带大家简单的做一个实战项目.所以不用担心自己没有基础,跟着石头 ...
uni-app日历组件（calendar），兼容安卓、ios、微信、百度、抖音小程序
uni-app日历组件,兼容安卓.ios.微信.百度.抖音小程序效果图插件连接如何使用参数说明事件效果图插件连接插件链接: https://ext.dcloud.net.cn/plug ...
uniapp生成抖音小程序问题记录
input标签在ios不显示在开发工具和安卓上input标签可以正常显示,但是在ios上发现input标签不显示. 解决办法:给input加上宽度: 原因大概是抖音小程序的input输入框没有宽度, ...
pb程序怎么发布到iis_怎么使用抖音小程序第三方平台系统开发制作发布抖音小程序+教程...
怎么使用抖音小程序第三方平台系统开发制作发布抖音小程序+教程抖音短视频APP发布<2019年抖音数据报告>显示,其日活跃用户已经于2020年1月达到4亿,抖音APP受到广大用户追捧的同时 ...
Uniapp壁纸小程序源码/双端微信抖音小程序源码
正文: Uniapp壁纸小程序源码,双端微信抖音小程序源码. WordPress后台的小程序.为一些做壁纸类自媒体的朋友解决变现难的问题抖音壁纸常见的图片取号码,微信的壁纸公众号小程序均可使用该小程 ...
uni-app转抖音小程序在ios中input标签的问题
一.input标签在ios不显示本人开发中用uni-app转字节小程序的,发现在开发工具和安卓上input标签可以正常显示,但是在ios上发现input标签不显示. 解决办法:给input加上宽度: ...
抖音小程序微信小程序五角星型评分插件自定义分数组件
使用方法: 第一步.在需要使用的页面配置json中引入: 第二步.在wxml中写入以下代码第三步.参数解释 bindsit:是指点击组件后触发的函数,其中detail返回为{fs:1,fstotal ...
抖音小程序Tiktok开发教程之基础组件 02 rich-text 富文本组件
什么是rich-text组件? rich-text富文本组可以支持显示html和css等复杂标签效果 rich-text 富文本组件运行效果 text组件如何使用呢? 首先,在ttml界面中添加下面代 ...
uniapp抖音小程序发布激励广告
1.点击按钮 <template><view><button @click="showVideo()">点击看 ...

uniapp平台使用vant组件按需引入，并兼容到微信、百度、抖音小程序

uniapp平台使用vant组件按需引入，并兼容到微信、百度、抖音小程序

请先了解vant在各小程序的兼容情况

前置条件

温馨提示

兼容到百度swan自定义组件

兼容到抖音tt自定义组件

uniapp平台使用vant组件按需引入，并兼容到微信、百度、抖音小程序相关推荐

最新文章

热门文章