uni开发微信小程序引入和风天气第三方库 icon不显示问题处理（阿里等icon库同样的处理方式）

6月前作者：难度较大分类：Toy博客阅读(38) 违法举报

这篇具有很好参考价值的文章主要介绍了uni开发微信小程序引入和风天气第三方库 icon不显示问题处理（阿里等icon库同样的处理方式）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.首先下载和风天气字体包

npm i qweather-icons

2.在node_modules文件夹找 qweather-icons 下的ttf后缀的文件

iconparkn 微信小程不显示,微信小程序,小程序,前端,阿里云,javascript,vue.js

3. 转换base64_______ https://transfonter.org/

iconparkn 微信小程不显示,微信小程序,小程序,前端,阿里云,javascript,vue.js

下载后得到如下文件：

iconparkn 微信小程不显示,微信小程序,小程序,前端,阿里云,javascript,vue.js

复制该文件到工程中 iconparkn 微信小程不显示,微信小程序,小程序,前端,阿里云,javascript,vue.js 下一步复制qweather-icons.css 中红框内往下所有的代码，粘贴到转换base后的文件中，如下图

iconparkn 微信小程不显示,微信小程序,小程序,前端,阿里云,javascript,vue.js

最后再main.js中全局引入一下，就可以直接使用了

// 引入和风天气图标
import './style/iconfont/stylesheet.css';

工程中使用：文章来源地址https://www.toymoban.com/news/detail-859093.html

<i :class="'qi-' + now.icon"></i>

到了这里，关于uni开发微信小程序引入和风天气第三方库 icon不显示问题处理（阿里等icon库同样的处理方式）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

【微信小程序】引入第三方库poke对GZIP压缩数据进行解压

使用 npm 包管理工具：首先，在小程序的根目录下执行 npm init 初始化项目，生成 package.json 文件。然后，通过 npm 安装 pako： npm install pako 。接下来，在小程序的根目录下创建一个名为 miniprogram_npm 的文件夹。将 node_modules/pako 文件夹复制到 miniprogram_npm 文件夹中。在需要使用

2024年02月08日
浏览(46)
【微信小程序】使用和风天气接口api（全过程）——获取天气

介绍这里是小编成长之路的历程，也是小编的学习之路。希望和各位大佬们一起成长！以下为小编最喜欢的两句话：要有最朴素的生活和最遥远的梦想，即使明天天寒地冻，山高水远，路远马亡。一个人为什么要努力？我见过最好的答案就是：因为我喜欢的东西都很贵，

2023年04月08日
浏览(91)
微信小程序基于和风天气的天气预报（自动和手动定位）

目录前言效果图和风天气API获取微信小程序后台配置域名选择城市弹窗页面代码注意事项（谨记）最近在开发小程序，将自己写的分享给大家,希望能帮助到你们！网址链接：dev.qweather.com 我用的是和风天

2024年02月11日
浏览(38)
【微信小程序】从 npm 引入第三方依赖时提示依赖异常的解决方法

微信小程序不允许使用 Node.js 的内建模块。但是部分第三方依赖（如 crypto-js）在运行时会尝试引入 Node.js 内建模块（实际非强制调用），这一举动被微信开发工具误以为是未知的依赖调用。移除构建 npm 时生成的外部依赖项即可。 1. 找到并打开“/miniprogram_npm/crypto

2024年02月15日
浏览(47)
微信小程序第三方平台uni-app配置ext.json（超详细）

假如说，有多个业务，功能模式相同的公众号/小程序，如果只是小程序开发，那是不是需要复制多套代码，改appid信息，在微信公众号后台，配置域名服务器以及密钥等繁琐的信息，每改一个提交发布一次，进行重复的步骤。随着要维护的公众号/小程序数量逐步增加，需要投

2024年02月03日
浏览(122)
Flutter开发微信小程序实战：构建一个简单的天气预报小程序

微信小程序是一种快速、高效的开发方式，Flutter则是一款强大的跨平台开发框架。结合二者，可以轻松地开发出功能丰富、用户体验良好的微信小程序。这里将介绍如何使用Flutter开发一个简单的天气预报小程序，并提供相应的代码示例。在开始之前，确保你已经安装了Fl

2024年02月12日
浏览(52)
微信小程序开发--利用和风天气API实现天气预报小程序

本来是参照《微信小程序开发实战》做一个天气预报小程序的，实际运行的时候提示错误，code 400，参数错误。说明问题应该出在查询API的语句上，没有返回结果。查阅后才知道，可能书籍出版时间较早，现在的和风获取天气的API出现了一些调整，具体见实时天气 for API | 和

2023年04月27日
浏览(87)
uni-app开发微信小程序

编辑器：HubilderX 运行环境：微信开发者工具技术栈：uni-app + vue + uView + uCharts + LeanCloud 创建微信小程序项目时，我才用了vue前端框架 PS：用的是HbuilderX编辑器 1. 注册微信小程序注册完后，获取微信小程序的AppID，并在manifest.json文件配置； 2. 导入uView和uCharts组件库使用uni-

2024年02月16日
浏览(84)
前端Uni-app开发微信小程序|微信小程序手机商城

作者主页：编程指南针作者简介：Java领域优质创作者、CSDN博客专家、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、腾讯课堂常驻讲师主要内容：Java项目、Python项目、前端项目、人工智能与大数据、简历模板、学习资料、面试题库

2024年02月12日
浏览(53)
如何使用uni-app开发微信小程序

uni-app 是一个使用 Vue.js 开发所有前端应用的框架。开发者编写一套代码，可发布到 iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。详细的 uni-app 官方文档，请翻阅https://uniapp.dcloud.net.cn uni-app 官方推荐使用 HBuilderX 来开发 uni-ap

2024年02月10日
浏览(114)