使用uni-app + vant-weapp 发布到H5以及小程序遇到的问题

最新推荐文章于 2025-09-30 09:16:35 发布
原创 最新推荐文章于 2025-09-30 09:16:35 发布 · 3.4k 阅读 · 11 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app #小程序

本文讲述了在使用uni-app和vant-weapp开发多端移动商城时遇到的两个主要问题：H5编译报错和 vant-weapp 中 version.js 文件导致的错误。解决方案包括格式化icon组件的wxss文件和修改version.js文件以适应H5编译。尽管vant-weapp兼容小程序，但在H5端仍存在一些兼容性挑战，建议谨慎使用。

使用uni-app + vant-weapp 发布到H5以及小程序遇到的问题

项目开发： 多端使用的移动商城，可发布到 小程序 以及 H5

框架（uni-app） + ui (vant-weapp)

1、vant-weapp 引入

(github 上 下载 代码 vant-weapp)

 将dist文件置入wxcomponents中，并重命名为 vant

在这里插入图片描述

在pages.js中注册
（如果使用频率较高，可以在globalStyle中注册，如果使用不多，可以在pages使用页面注册即可）

在这里插入图片描述
在这里插入图片描述

编译到小程序没问题，但是编译到h5报错了！！！！

在这里插入图片描述

不知道大家有没有遇到过这个问题
解决办法就是将 wxcomponents > vant > icon中的 index.wxss 格式化一下就好了
这个问题解决了，以为就可以开心的开发了，但是 ！！！！ 问题又来了

在这里插入图片描述

  出现这个问题的原因是 
  在wxcomponents > vant > common文件里有个 version.js  
  这里 v1, v2编译到h5时 是undefined，所以会报错

在这里插入图片描述

  解决方法如下

在这里插入图片描述

   这样编译到小程序还是 h5 都可以啦！！

在这里插入图片描述

最后，其实vant-weapp 是兼容小程序的，编译到h5的话，还是会有很多坑，所以慎用

是个前端
关注
uniapp 微信小程序和h5共用vant weapp记录
luoob假的开发者哈哈哈
01-24 2498
从 uniapp 官方可知在 HbuilderX 2.4.7起，h5 和 小程序的组件实现了共享 uniapp 引入 vant weapp 在项目目录 在项目目录下新建 wxcomponents 文件夹 如果是通过 HbuilderX 建的项目，则在项目根目录新建 wxcomponents 文件夹 如果是通过脚手架创建的项目，在 src 目录中新建 wxcomponents 文件夹 进入 vant 组件官网 vant 入口 通过 npm/yarn 下载下来或者直接到 github 找到构建好的
uni-app 多端操作引入vant 避坑亲测版~
a895544608的博客
02-10 2898
uni-app 小程序 h5引入vant 实测版！
uniapp写h5/小程序引入vant-weapp步骤以及报错
qq_16828495的博客
12-06 2721
1.下载vant-weapp的dist文件 2.在项目中创建一个文件叫wxcomponents，注意这个文件和page文件平级，引入dist 注意文件名一定要是wxcomponents（莫名其妙的坑）， 3.APP.VUE里引入样式 4.pages.json全局注册 5.报错引入css报错 index.wxss里的 url(前面加空格全局替换(引入的字体图标路径有问题
Uniapp 微信小程序使用 Vant Weapp 完整指南
最新发布
热爱编码，享受创造
09-30 1202
Uniapp 集成 Vant Weapp 微信小程序组件库指南 本指南详细介绍了如何在 Uniapp 项目中集成和使用 Vant Weapp 组件库： 环境配置 - 通过 npm 安装 Vant Weapp 并进行微信开发者工具和 Uniapp 项目配置 组件引入 - 提供全局引入、页面级引入和使用 easycom 三种方式 基础使用 - 以按钮组件为例展示基础用法和不同状态配置 表单实战 - 演示表单组件的综合应用，包括输入验证和选择器 Vant Weapp 提供了丰富的 UI 组件
taro-vant:基于taro2进行多端组件开发，迁移vant-weapp的组件库，兼容h5，微信小程序端，支付宝小程序端
03-17
芋头 基于taro2进行多端组件开发，迁移vant-weapp的组件库，兼容h5，微信小程序端，支付宝小程序端。 安装 npm i taro-vant yarn add taro-vant 使用前需要配置 因为我希望这个组件是可以用小程序原始组件混合编写的，但是嵌套的Taro build -ui生成出来的组件是不行的（我看taro-ui的编译配置方式，测试配置之后结果）， 所以研究了几天弄了一个taro的配置和插件，因此并发症的组件和自己项目写的代码一样进行编译。 因为为什么使用.temp文件夹，是因为taro的临时文件夹名称也是.temp，所以这个一般都会写入.gitignore，而这个文件夹应该是不需要添加到版本管理中的。 注意：小程序中，修改了webpack配置resolve.symlinks resolve.symlinks: false ，不知道这个是否会影响 // con
uniapp的h5端和小程序端同时引入vant-weapp和遇到的报错
weixin_44730534的博客
11-24 2308
uniapp的h5端和小程序端同时引入vant-weapp和遇到的报错 “usingComponents”: { “van-button”: “/wxcomponents/vant/button/index”, “van-cell”: “/wxcomponents/vant/cell/index”, “van-cell-group”: “/wxcomponents/vant/cell-group/index”, “van-icon”: “/wxcomponents/vant/icon/index”,
uniapp做小程序和H5页面用vant还是vant-weapp
小耳朵晨晨
01-08 9885
如果只写h5那么用vant, 写小程序就用vant-weapp。 vant-weapp不兼容H5 。 只兼容 微信小程序和app. 建议用uniapp的内置ui.兼容多个平台 社区问题的地址：https://ask.dcloud.net.cn/article/35489 ...
uniapp项目h5端使用vant组件
jdsfui的博客
01-19 8356
在做uniapp项目时由于vant组件小程序和h5组件是不通用的，所以vant组件在h5中要单独引用。 1.首先使用npm i @vant/weapp -S --production 安装vant的组件包，安装成功后结构目录如下 2.我们在全局中引用vant组件，找到main.js文件，在文件中添加一下代码 import Vant from 'vant'; import { Toast } from 'vant'; Vue.use(Vant); 3.进行了以上操作后我们只需要在所用到的页面中直接使用组件
uni-app + vue3.x + typescript + @vant_weapp + vite搭建的小程序项目模板
09-18
通过配置manifest.json，开发者可以一键发布到iOS、Android、Web（包括H5）以及各种小程序平台。在uni-app中，可以轻松编写一次代码，发布到多个平台，极大提升了开发效率。 TypeScript的集成使得uni-app项目在类型...
uni-app中使用vant-weapp
Smile_ping的博客
03-12 6324
uni-app中使用Vant-Weapp组件 文章目录uni-app中使用Vant-Weapp组件前提1. 创建wxcomponents文件夹2. pages.json引入组件3. 组件中使用通过`easycom`将其精简为一步关于组件选择 Vant-Weapp官方文档 注意： uni-app 支持在 App 和 小程序 中使用小程序自定义组件，从HBuilderX2.4.7起，H5端也可以运行微信小程序组件。 前提 先下载vant-weapp， 解压文件， 找到dist目录 下载Vant-Wea
Uniapp 集成 Vant-weapp
shmily的博客
01-11 7571
目录1.先正常创建一个uniapp项目2.从github下载vant包，zip格式的3.项目根目录下新建wxcomponents/@vant 两个文件夹文件夹 4.把下载好的压缩包解压，放在刚才创建好的@vant文件下，并重命名为weapp5.App.vue中引入vant的样式 6.在pages.json文件下的 "globalStyle" 下的"usingComponents" 中按需引入7.页面中使用，如果没有样式从uniapp重启微信小程序总结： vant组件包https://github.com/
基于uni-app和vant的快递寄送与物流设置Vue设计源码
02-07
uni-app作为一个使用Vue.js开发所有前端应用的框架，能够编译到iOS、Android、H5、以及各种小程序等多个平台，极大地方便了开发者进行跨平台应用开发。而vant则是由有赞前端团队开源的一套基于Vue 2.0的移动端组件库...
Uni-APP+Vite+Vue3+TS+Vant 搭建项目
weixin_42479305的博客
09-20 7367
Uni-APP+Vite+Vue3+TS+Vant 创建移动端项目（h5、微信小程序、APP）
uniapp导入使用vant-weapp组件
cuilinlong的博客
05-13 4079
将npm或刚下载的文件vant-weapp中的dist文件夹复制到wxcomponents文件夹中，并将dist文件夹重命名为vant。安装完毕后会出现node_modules目录，及vant的weapp文件夹。右键单击项目目录，使用命令行窗口打开所在目录，在终端输入命令，安装vant。方法二：通过GitHub下载vant-weapp，完成后解压。方法一：如果电脑已经安装了node，可以通过npm安装。在项目根目录下创建wxcomponents文件夹。在相应页面中使用vant组件。
记录vant weapp 小程序组件库遇到的坑以及ios和安卓兼容问题 SubmitBar
Taurus_666
07-30 7760
组件一：SubmitBar 提交订单栏IOS不显示，安卓正常 前情提要（可忽略） 因为项目比较着急，正好这个组件跟设计图类似，欣喜万分，拿来即用。然鹅，现实跟想象中真是完全不同。 IOS上完全不展示这个组件，安卓正常。苦恼万分，想着只是css问题（想着vant不可能有这种不显示的bug），浪费半天时间，无果。第二天头脑清醒的把组件拿到别的页面尝试，竟然能展示。 问题及解决 最终，判定是因为SubmitBar 放在了tab标签里面。如果放在tab里面IOS就会有问题，放在外层就正常。 组件二: flex布
uniapp使用 Vant Weapp 组件
weixin_43837268的博客
09-15 2900
背景 开发一个新项目, 用到uni-app , 一开始想用 uni ui, 可是文档不方便,而且很多组件也没有. 因为不需要太多端, 所以使用 vant-weapp ui框架 可支持微信小程序等. 问题 使用第三方组件 我把 vant 下载到 src目录下 wxcomponents 文件夹 src/wxcomponents/vant 在页面中使用这些组件, 网上看的方法都是 (可能我没找到) 要在 页面json里面配置然后才能在页面中使用. 觉得这样超级麻烦啊, 页面跳来跳去的... 办法 既
UniApp开发H5引入Vant
Master_Tang的博客
10-19 2922
第一步：下载安装vant 第二步：main.ts引入Vant 不管是js还是ts，Vue.use()他就对了也可以结构后按需导入 第三步：App.vue中引入全局样式，两种import都试试，里面坑多 第四步：就可以使用它了Vant 3 - Lightweight Mobile UI Components built on VueLightweight Mobile UI Components built on Vuehttps://vant-contrib.gitee.io/vant/#/
关于uniapp引入Vant Weapp第三方组件，遇到的问题和解决方式
inticaler的博客
01-27 5391
1.在根目录下创建wxcomponents 2.引入vant weapp 1.我们到https://github.com/youzan/vant-weapp下载最新的压缩包 2.解压，将里面的dist文件夹复制粘贴到wxcomponents目录下,并改名为vant 3. 在根目录下App.vue中引入UI样式index.wxss，如下图 @import "/wxcomponents/vant/common/index.wxss"; 4. 在pages.json页面将vant的组件.
uni-app小程序使用vant组件
09-13
uni-app是一个跨平台的开发框架，可以用于开发小程序、H5、App等多端应用。而vant是一个基于Vue.js的移动端组件库，提供了丰富的UI组件和交互效果。 要在uni-app小程序中使用vant组件，可以按照以下步骤操作： 1. 在uni-app项目中安装vant组件库。可以通过命令行执行以下指令安装： ``` npm install vant ``` 2. 在uni-app项目的`main.js`文件中引入vant组件库： ```javascript import Vue from 'vue'; import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); ``` 3. 在需要使用vant组件的页面中，按需引入所需的组件。例如，在某个页面的`<script>`标签中可以这样引入Button组件： ```javascript import { Button } from 'vant'; export default { components: { [Button.name]: Button } } ``` 4. 在页面的模板中，使用引入的vant组件即可。例如，可以在模板中使用Button组件： ```html <template> <div> <van-button type="primary">按钮</van-button> </div> </template> ``` 通过以上步骤，你就可以在uni-app小程序中使用vant组件了。当然，除了Button组件外，你还可以按照同样的方式引入和使用vant提供的其他组件。希望对你有帮助！如有更多问题，请继续提问。
评论 13
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值