uniapp引入vant-weapp时van-icon不能展示

最新推荐文章于 2024-05-17 14:32:46 发布
最新推荐文章于 2024-05-17 14:32:46 发布
阅读量2k 收藏
点赞数 1
文章标签： vue.js css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42510572/article/details/122299166
版权

在uniapp 3.1.22版本引入当前日期最新的vant-weapp1.10版本时发现van-icon出现图标不能展示的问题。
解决方案：在/wxcomponents/vant/dist/icon/index.wxss里寻找url字符，在括号内url地址添加"https:",重新运行项目即可。
代码图

多学习489
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序npm引入vant-weapp的踩坑记录
12-01
微信小程序项目使用npm安装vant-weapp的正确步骤  使用npm安装vant-weapp 到项目根目录下： npm i vant-weapp -S --production 然后再详情中选中使用npm模块，然后点击工具栏中的构建npm。本以为这样就可以安装成功了，结果 没有找到npm包 这让我纠结了一个早上。看了文档，琢磨了很久，最后研究出问题的关键。 第一步：使用cmd进入项目根目录：npm init 然后一直按回车 第二步：输入你要安装的文件（npm i vant-weapp -S --production ） 如果已经之前安装了vant-weapp的，就直接到工具栏中选中
微信小程序引入vant-weapp
01-03
选择位置新建项目，本文直接在桌面新建项目 1 在桌面新建demo文件夹，然后打开微信开发者工具，选择demo文件夹新建小程序项目 2 用cmd或者powershell找到该项目目录，在该目录下进行安装vant-weapp 步骤一 通过 npm 安装 # 通过 npm 安装 npm i @vant/weapp -S --production # 通过 yarn 安装 yarn add @vant/weapp --production # 安装 0.x 版本 npm i vant-weapp -S --production  3 构建npm包 步骤二 构建 npm 包 打开微信开发者工具，点击 
vant-weapp.zip
11-22
小程序使用vant-weapp框架确实便捷，但是官方生成的wxss文件单位都是px，和我们平时的rpx存在一些适配兼容问题，文件是 px转成rpx后的文件。
app.json: [“usingComponents“][“van-icon“]: “@vant/weapp/icon/index“ 未找到
lxyoucan的博客
10-17 678
微信小程序项目使用npm安装vant-weapp的正确步骤及错误处理方法。第2步 微信开发者工具中，在菜单栏中点“工具”->“构建npm”。做完这两步，上面的问题得到解决。Vant Weapp 官方文档。
微信小程序：外部字体引用以及遇到的一些问题（字体图标/字体文件）
热门推荐
weixin_39015132的博客
09-12 2万+
前言 设计稿中，有用到手机未内置的第三方字体。如何在微信小程序中使用呢？ 开始 触类旁通，小程序的wxss语法与css是一致的。我们首先想到的是@font-face{}。没错，它就是今天的主角~ 在正式开始之前，我们先来看看两个常见的概念： 字体文件：引用该类型文件，控制文字的显示形态。 字体图标：使用字体代替图标显示。 一开始，参照网上的方法，将对应的字体文件，上传到https://...
H5网页的Vant的Icon图标显示不出来
坐等夕阳落time的博客
12-14 6337
因为vue环境没弄好
UI设计中图标设计规范是什么
weixin_51686423的博客
10-26 1018
　　图标是UI设计中的点睛之笔，更是赋予了UI设计灵魂。很多小伙伴留言说不会做图标设计，所以今天胡老师今天谈谈图标设计。 　　图标是 UI 设计中必不可少的组成。通常我们理解图标设计的含义，是将某个概念转换成清晰易读的图形，从而降低用户的理解成本，提升界面的美观度。在我们的企业级应用设计范围中，图标在界面设计的诸多元素中往往只占了很小的比重，在调用时也会被缩到比设计稿小很多倍的尺寸，加上在图形素材极度丰富并且便于获取的今天，在产品设计体系中实现一套美观、一致、易用、便于延展的图标体系往往会被不小心忽略掉。
关于Vant Weapp中组件引入未找到的解决方案
佐斌的笔记簿
07-06 1万+
在开发微信小程序时，需要引入一些第三方UI库，这时就需要用到微信小程序的 UI，分享一些遇到的问题 Vant Weapp框架引入组件失败问题: 使用Vant 组件 [“usingcomponents”][“van-button”]: “@vant/weapp/button/index” 未找到： 当出现: vm192:2 miniproject/app.json: ["usingcomponents"]["van-button"]: "@vant/weapp/button/index" 未找到 解决方案
vant icon等需要组件使用本地图片时图片不显示的解决办法。
柠檬人的博客
01-05 3427
地址明明没有错，但是图片失效 检查时提示无法载入图片，这样只需要通过require引入就能解决问题
vant使用图片图标时不显示
chuxuezhe__1的博客
09-18 2479
在写项目时遇到了使用vant引用本地图片作为图标时，图标不显示的问题，代码如下： <van-cell-group v-for="(item,index) in list" :key="item.id+'id'"> <van-cell :icon="'../../assets/img'+item.id.slice(0,2)+'.png'"> {{item.goodName}} </van-cell> </van-cell-group> 从浏览器的调试器
vant-weapp-uniapp:vant-weapp的uniapp演示（仅微信小工具）
05-09
vant-weapp版本为1.6.7. vant weapp的组件库，都在工程的wxcomponents目录下。pages目录下是各个示例页面。 图片上传服务 提供了图片Nodejs服务 ，代码路径为\src\node-image-upload-server 安装npm包 npm install ...
a uniapp demo for vant-weapp示例.zip
02-04
uniapp版的vant微信小程序源码
uniapp引入Vant Weapp
m0_48259951的博客
03-24 700
在项目根目录下创建文件夹wxcomponents/vant，注意wxcomponents与pages同级。github官网下载代码包，解压，把解压文件夹里的dist 文件copy到第一步创建的vant文件里。里引入具体组件，可以局部引入也可以全局引入。uniapp引入Vant Weapp。uniapp自带的一些组建无法满足。局部引入： 在需要使用组件的。，引入Vant Weapp。
踩坑记录_vant图标字体不生效，显示成小方框□
Potry Code的博客
11-06 3431
在使用van组件库的时候，采用的官方推荐的自动按需引入方式。 结果发现官方的图标字体一直都不生效，显示成小方框□。查询资料的时候大多说的是再才导入样式即可，可是发现还是不行。 最终在看样式的时候发现图标字体变成了这个，和正常显示的font并不一样。 最终发现是在引入Reset CSS格式化浏览器默认样式代码的问题。 这将会导致vant的默认图标字体全部进行更改，从而没有效果。 当然，所以你可以选择将格式化字体样式的代码删除，或者这里也推荐使用normalize.css进行浏览器默认样式的清除。 采用自动
uniapp h5项目中使用vant Weapp图标组件报错问题（Module build failed from ./node_modules/postcss-loader/src/index）
qq_35430000的博客
06-15 1901
两种解决方式： ①找到vant安装目录，icon 下的 index.wxss文件，右键选择 重排代码格式，保存即可。 排列后变成这样 ② 如果不想改变代码格式 根据最后的报错信息，是在https://at.alicdn.com/t/font_2553510_7cds497uxwn.woff2?t=1621320123079这个文件下编号为 2553510 的字体出现了问题，代码拉到最后或者ctrl+f搜索2553510（2553510是我的编码，你的编码就搜索你的），在截图红框 那两个...
vue项目引入外部图标
xc9711的博客
09-05 5278
以vantui框架为例教大家vue项目如何引入外部图标
vant组件自定义图标打包后404线上无法显示
JUEESSS的博客
03-29 442
可能是路径问题，但是直接image是可以显示，在组件插槽里就是无法显示，不清楚原因，用uni.getImageInfo将图片链接转为本地链接就可以显示了
解决vant图标放正式环境不显示问题
qq_41283061的博客
07-07 1675
在mian.js导入 import ‘vant/lib/icon/local.css’
WEB转Flutter基础学习笔记（内含vue和flutter对比）
最新发布
小易不止于搬砖的博客
05-17 663
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
uniapp引入vant-weapp
07-28
在uniapp中引入vant-weapp组件库可以通过以下步骤进行配置。首先，在需要使用组件的页面的style中设置usingComponents引入vant-weapp组件的路径。例如，在pages数组中的某个页面的style中添加以下代码： ``` "usingComponents": { "van-button": "/wxcomponents/vant-weapp/button/index", "van-sidebar": "/wxcomponents/vant-weapp/sidebar/index", "van-sidebar-item": "/wxcomponents/vant-weapp/sidebar-item/index", "van-icon": "/wxcomponents/vant-weapp/icon/index" } ``` 其中，"van-button"、"van-sidebar"、"van-sidebar-item"和"van-icon"是你想要引入的vant-weapp组件的名称，后面的路径是组件的相对路径。你可以根据自己的需要引入不同的组件。 另外，还需要在全局配置文件中的usingComponents中添加vant-weapp组件的路径。例如，在配置文件中的pages数组中的某个页面的style中添加以下代码： ``` "usingComponents": { "van-button": "/wxcomponents/vant-weapp/button/index" } ``` 这样就完成了在uniapp中引入vant-weapp组件库的配置。你可以根据需要在不同的页面中引入不同的vant-weapp组件。 #### 引用[.reference_title] - *1* *3* [uni-app引入vant Weapp](https://blog.csdn.net/YNEWA/article/details/106056610)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [uniapp引入Vant Weapp](https://blog.csdn.net/m0_48259951/article/details/129733632)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值