uni app 小程序中的引用的iconfont图标后预览不出页面的问题

最新推荐文章于 2024-08-29 17:17:56 发布

lyh9503

最新推荐文章于 2024-08-29 17:17:56 发布

阅读量882

点赞数

分类专栏： uni小程序文章标签：小程序 html5 javascript

本文链接：https://blog.csdn.net/lyh9503/article/details/116484947

版权

uni小程序专栏收录该内容

4 篇文章 0 订阅

订阅专栏

之前引用了阿里的图标，发现小程序在预览的时候页面是空白的，只有在调试的时候才出现内容，

解决方法

用手机扫码预览小程序页面，点击页面右上角三个小点，选中开发调试功能，页面就出出现一个vConsole按钮，打开就能到报错信息，

原来是下载的iconfont包里面的js文件报错，将文件注释掉以后，页面还能显示图标，只是用图标的话没有影响，

这样预览就可以出现了内容了，

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

lyh9503

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

微信小程序/uni-app tabBar 页面传参问题

彭世瑜的博客

06-21

1583

先看下他们的文档1、微信小程序需要跳转的 tabBar 页面的路径 (代码包路径)（需在 app.json 的 tabBar 字段定义的页面），路径后不能带参数。2、uni-app需要跳转的 tabBar 页面的路径（需在 pages.json 的 tabBar 字段定义的页面），路径后不能带参数那么问题来了，我从tabA跳转到tabB怎么传参呢？

iconfont-preview:iconFont在线预览

04-02

功能简介 iconfont web在线预览工具，无需安装，打开即用。可预览本地ttf文件中定义的所有图标。也支持预览中的模式，unicode，字体类，符号。根据在线字体链接即可解析预览其定义的所有图标。需求背景本工具用于解决以下问题接手二手项目时，不清楚项目中定义了一些icon。接手二手项目，有时由于交接不到位，只能找到引用的css。但不清楚该图标库具体包含其中一个图标。导致二次开发时，不能很好地插入之前的图标，如果约会新图标，可能会重复定义。导致前后图标风格不统一。使用其外部样式库，成套的后台管理系统框架时。找到其图标的定义列表比较麻烦。需要先找到对应的官网，再找到其对图标。故笔者开发了这个iconfont在线预览工具，无需安装，打开web页面即可预览icon库。使用教程使用本地文件点击按钮选择ttf后缀文件解析成功点击具体图标，可复制该图标代码解析在线文

参与评论您还未登录，请先登录后发表或查看评论

IconFontPreview——一款预览IconFont的插件

weixin_34010566的博客

02-25

1327

背景使用过IconFont的应该都深有体会，每次使用IconFont的时候，由于不知道Unicode和Icon的对应关系，每次都要到对应的文件夹下找到默认生成的html文件，打开后才能寻找到我们需要的IconFont。而每次找文件这个过程真的很麻烦，而且当公司IconFont的版本更新的时候，这个路径也会相应改变，那就更痛苦了。为了解决这个问题，我就考虑能不能做一款预览IconFont的插件，...

uniapp icons图标不显示的问题解决

最新发布

lyz246859的博客

08-29

1067

如图所示在uniapp开发中突然发现icons组件不显示图标了，而且没什么报错这是为什么其实这最大的原因就是你上面的代码在取值上没有做好null的判断导致参数取值报错因此影响了页面正常的渲染导致下面的图标都不显示。

uniapp的项目不能在手机上进行预览

imkaifan的博客

04-23

1807

1、项目启动后 2、电脑和手机连接的是同一网络，那么在手机上打来Network链接也是可以打开进行一个预览的。但是事实上是打不开的。 3、解决方案，关闭防火墙。 4、成功了。

uniapp的uni-fab组件不显示图标，微信小程序「渲染层网络层错误」

cuilinlong的博客

08-13

2787

几次查找，原来是uni-fab图标的图片应该放在uni-fab的static的目录下，而不是该程序的static目录下。在HbuildX中运行一切正常，但是运行到微信小程序模拟器和发布小程序后就不显示图标，显示。而且uniapp官方的HelloUniapp小程序也不显示图标，难道是有Bug？重新复制图标到Uni-fab的Static目录下，再运行、发布，就可以实现了。威信搜索小程序：法务手册，查看实际运行效果！点击可展开一个图形按钮菜单。是见证成果的时候了，请看。组件名：uni-fab。...

[资料整理]在线预览iconfont文件包含的所有图标及代码

weixin_42105932的博客

09-28

2011

一、百度字体编辑器 http://fontstore.baidu.com/static/editor/index.html 可以在线上传本地ttf字体文件，预览图标和代码。但显示的图标代码是显示转了码的需要自己转换回去。另外打开本地文件的按钮间中会没反应 o(￣▽￣)ｄ二、网友momo707577045自己实现的小工具工具地址：http://blog.luckly-mjw.cn/tool-show/iconfont-preview/index.html segmentfault：...

HBuilderX+uni-app开发的支持小程序、安卓、IOS的电商程序，带后台

09-28

【标题】"HBuilderX+uni-app开发的支持小程序、安卓、IOS的电商程序，带后台" 这个项目基于HBuilderX和uni-app框架，旨在构建一个跨平台的电商应用程序，能够覆盖微信小程序、Android以及iOS等多个主流移动操作系统...

uni-app之微信小程序实现‘下载+保存至本地+预览’功能

qq_50276105的博客

07-27

1万+

代码打包编译在微信开发者工具，调得通，手机（ios\安卓）真机调试也能调通，但是，PC端微信小程序真机调试的时候，能保存但是预览失败。uni.downloadFile()+uni.openDocument() —— 预览临时文件下的文件（仅保存在tmp文件夹）；3、同样的代码运行在微信开发者工具上，代码变化且报错，那是因为链接并非本地页面而是远程服务获取的图片链接。1、下载(缓存，是个临时文件，未保存)：uni.downloadFile()—— 预览长久文件下的文件（仅保存在store文件夹）。

【uni-app】uni-app实现聊天页面功能（小程序）——布局篇

热门推荐

hanachann的博客

04-11

1万+

在工作中使用uni-app参与开发一个小程序，其中要写一个简单的聊天页面，虽然功能不多（只有一个发送文字的功能），但是其中的细节比较多，也踩过很多坑，特此记录下来。要实现的页面如图所示，该篇主要讲讲如何布局（参考了很多文章之后根据页面需求进行一个整合）。

uni-app：微信小程序分享页面到微信好友和朋友圈

彭世瑜的博客

08-24

8091

添加生命周期函数就生效，可以自定义 onLoad(){}, /* * uniapp微信小程序分享页面到微信好友 */ onShareAppMessage() {}, /* * uniapp微信小程序分享页面到微信朋友圈 */ onShareTimeline() {}, 参考 uni-app学习：uniapp微信小程序分享页面到微信好友和朋友圈。 ...

iconfont：react-native-macos字体图标预览工具的字体文件预览器

02-05

Iconfont-字体图标预览工具已上架Mac App Store 需要macOS 10.11+ 支持拖拽放置，右键打开.ttf文件。可直接复制unicode编码。名称和unicode映射的文件，名称自动转为驼峰命名。是.ttf文件的预览器。您可以拖放一个或多个.ttf文件。您可以复制映射的文本和json。 &#x0078和\u0078 Unicode对开发人员非常有用。字体图标网站（图标字体库）预习屏幕截图使用本项目基于，所有请确保你已安装react-native-macos。安装依赖包： $ cd iconfont $ npm install 直接使用

iconfont字体库图片查看工具

01-27

开发过程中为了减少android 的app体积，对色调单一的图片可以使用iconfont代替，通过工具查看iconfont的代号，方便在代码中使用，通过工具也可以修改字体库的代号。

在uni-app中引用iconfont,和遇到图标引入不显示的问题记录

weixin_42674490的博客

06-30

2563

1.在iconfont.css中，需要使*~@* 将路径添加完整如： @font-face { font-family: "iconfont"; /* Project id 2642111 */ src: url('~@/static/fonts/iconfont.woff2?t=1625021641165') format('woff2'), url('~@/static/fonts/iconfont.woff?t=1625021641165') format('woff'),

解决uni-app无法使用icon-font彩色图标(Symbol方式)

FantasyWeirdo的博客

07-08

1991

解决uni-app无法使用icon-font彩色图标(Symbol方式)

uniapp预览pdf安卓打不开，可以直接新建commonwebview来跳转外部链接浏览pdf

weixin_49524349的博客

05-10

1885

项目场景：uniapp预览pdf安卓打不开，可以直接新建commonwebview来跳转外部链接浏览pdf 例如：uniapp里跳转外部链接问题描述例如：uniapp打开pdf安卓打不开，网上看了很多方法，都说安卓需要先下载再预览，但是本地测试调用uni.downloadFile访问生产服务器的文件会报错跨域，直接打包放生产运行控制台能返回success里的’下载成功‘，但实际上并没有下载文件解决方案：提示：不使用uni.downloadFile下载文件；进入资讯详情页A面先判断平台，如果是安

微信小程序iconfont不显示解决

liusunquan123的博客

03-29

1万+

小程序中用到了 iconfont，但是一次更新图标库后，很多 icon不显示了。原因：iconfont 之前下载下来是把 woff 文件转成 base64，项目中也一直使用 woff 转成的 base64；目前 iconfont 下载下来后的 iconfont.css中是把 woff2文件转成 base64。解决方法：使用https://transfonter.org/将 woff 文件转成 ...

uniapp搭建小程序项目并使用iconfont图标库

weixin_42342008的博客

11-10

621

uniapp小程序使用iconfont图标库

uniapp 打包后icon不显示

LJJONESEED的博客

04-02

4147

在矢量图网站下载之后，放到目录下，必须在app.vue中引入图标，我在页面上引入的在手机端没有显示出来。（我自己的是改了这个就好了，但是我看大家说还需要改下面的，如果没好的话可以改改下面的试试）还有的可能是icofont.css的路径问题。把路径改一下，改成这样的。有的可能还需要改，官网是这么说的，具体的还得看自己的代码。 ...

uni-app小程序核心功能封装教程

uni-app提供了便捷的调试工具，可以在HBuilderX中直接预览和调试小程序。打包时，开发者需要按照不同平台的要求，配置好相应的编译选项，然后通过IDE将代码打包成可在相应平台上运行的应用包。发布到平台前，还需...