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

最新推荐文章于 2024-07-07 09:33:08 发布
最新推荐文章于 2024-07-07 09:33:08 发布
阅读量2.9k 收藏 10
点赞数 9
文章标签： uni-app 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HWJBJ/article/details/112938332
版权
本文讲述了在使用uni-app和vant-weapp开发多端移动商城时遇到的两个主要问题：H5编译报错和 vant-weapp 中 version.js 文件导致的错误。解决方案包括格式化icon组件的wxss文件和修改version.js文件以适应H5编译。尽管vant-weapp兼容小程序，但在H5端仍存在一些兼容性挑战，建议谨慎使用。
摘要由CSDN通过智能技术生成

使用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和遇到的报错
weixin_44730534的博客
11-24 2052
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”,
Uni-APP+Vite+Vue3+TS+Vant 搭建项目
weixin_42479305的博客
09-20 4322
Uni-APP+Vite+Vue3+TS+Vant 创建移动端项目（h5、微信小程序、APP）
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还是vant-weapp
小耳朵晨晨
01-08 9612
如果只写h5那么用vant, 写小程序就用vant-weapp。 vant-weapp不兼容H5 。 只兼容 微信小程序和app. 建议用uniapp的内置ui.兼容多个平台 社区问题的地址：https://ask.dcloud.net.cn/article/35489 ...
uniapp小程序中引入vantweapp
最新发布
ITshayebuhui的博客
07-07 633
方式一:可以从github上下载这个插件方式二:使用HBuilderX，“工具”---“插件安装”---“安装新插件”---“前往插件市场安装”---“搜索”，此时插件市场可能为空，修改筛选条件就出来了，使用HBuilderX软件导入。
uniapp 微信小程序和h5共用vant weapp记录
luoob假的开发者哈哈哈
01-24 2123
从 uniapp 官方可知在 HbuilderX 2.4.7起，h5 和 小程序的组件实现了共享 uniapp 引入 vant weapp 在项目目录 在项目目录下新建 wxcomponents 文件夹 如果是通过 HbuilderX 建的项目，则在项目根目录新建 wxcomponents 文件夹 如果是通过脚手架创建的项目，在 src 目录中新建 wxcomponents 文件夹 进入 vant 组件官网 vant 入口 通过 npm/yarn 下载下来或者直接到 github 找到构建好的
uniapp写h5/小程序引入vant-weapp步骤以及报错
qq_16828495的博客
12-06 2399
1.下载vant-weapp的dist文件 2.在项目中创建一个文件叫wxcomponents，注意这个文件和page文件平级，引入dist 注意文件名一定要是wxcomponents（莫名其妙的坑）， 3.APP.VUE里引入样式 4.pages.json全局注册 5.报错引入css报错 index.wxss里的 url(前面加空格全局替换(引入的字体图标路径有问题
UniApp开发H5引入Vant
Master_Tang的博客
10-19 2605
第一步：下载安装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/#/
uni-app整合vant、nuxt
hahahhahahahha123456的博客
04-30 2988
创建uni-app移动端项目使用uni-cli下载 vue create -p dcloudio/uni-preset-vue my-project 下载Nuxt框架 ,无需使用create-nuxt-app. 脚手架 yarn add nuxt 配置package.json文件 { "name": "my-app", "scripts": { "dev": "nuxt", "build": "nuxt build", "generate": ...
uni-app使用Vant组件
hahahhahahahha123456的博客
11-19 8099
前言 vant ui有h5版和微信小程序版。其h5版只能用于h5，其微信小程序版（vant weapp）可用于微信和App，从uni-app 2.4.7起，H5和QQ小程序也支持了微信小程序组件。 使用步骤 下载代码 在项目根目录下新建wxcomponents目录 ，此目录应该与components目录同级。 直接通过git下载vant-weapp最新源代码，并将dist目录拷贝到新建的wxcomponents目录下，并重命名dist为vant-weapp。 在...
Taro引入vant Weapp的方法
01-08
Taro(V2.0.5)中引入Vant Weapp，（需下载资源到项目中：大小约322KB） 需如下几步： 1.在/src/components下新建文件夹vant-weapp 2.在github上找到Vant-weapp下载文件包，将对应的dist文件夹下内容复制到新建的vant-weapp文件夹下。 （下载vant-weapp方式，编辑器终端输入：git clone https://github.com/youzan/vant-weapp.git ） 3.在Pages或components对应文件的config.usingComponents中，配置每个页面所需要的组件。(注：无法在app
uni-app 多端操作引入vant 避坑亲测版~
a895544608的博客
02-10 2012
uni-app 小程序 h5引入vant 实测版！
关于uniapp引入Vant Weapp第三方组件，遇到的问题和解决方式
inticaler的博客
01-27 4694
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的组件.
uniapp怎么引入vant
qq_52845451的博客
03-15 1414
uniapp怎么引入vant
uniapp小程序之weapp引入无效，报错
8月13日
12-27 1575
没事弄个uniapp小程序玩，然后在引入weapp出现各种bug，也不算是bug，但是，也困扰我好久了 出现引入的组件报错，一直在报错 解决办法： 主要是因为没有看一篇文档https://uniapp.dcloud.io/frame?id=%e5%b0%8f%e7%a8%8b%e5%ba%8f%e7%bb%84%e4%bb%b6%e6%94%af%e6%8c%81 里面主要介绍了在各种项目中，这...
uniapp项目h5端使用vant组件
jdsfui的博客
01-19 7651
在做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.进行了以上操作后我们只需要在所用到的页面中直接使用组件
H5引入vant报错和样式失效
Nine_91的博客
05-14 4322
1.vant引入报错（Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')） 原因：vant引入顺序在vue引入前 修改顺序后可正常使用 2.vant组件样式失效 首先检查是否引入了vant样式，确认路径 引入样式后 vant标签写在body里但没有<div>包裹样式会失效（避坑点） 如图样式失效 放到<div>里面样式恢复 ...
uniapp导入使用vant-weapp组件
cuilinlong的博客
05-13 1753
将npm或刚下载的文件vant-weapp中的dist文件夹复制到wxcomponents文件夹中，并将dist文件夹重命名为vant。安装完毕后会出现node_modules目录，及vant的weapp文件夹。右键单击项目目录，使用命令行窗口打开所在目录，在终端输入命令，安装vant。方法二：通过GitHub下载vant-weapp，完成后解压。方法一：如果电脑已经安装了node，可以通过npm安装。在项目根目录下创建wxcomponents文件夹。在相应页面中使用vant组件。
uni-app小程序使用vant组件
09-13
uni-app是一个跨平台的开发框架，可以用于开发小程序、H5、App等多端应用。而vant是一个基于Vue.js的移动端组件库，提供了丰富的UI组件和交互效果。 要在uni-app小程序中使用vant组件，可以按照以下步骤操作： 1. ...
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值