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

这篇具有很好参考价值的文章主要介绍了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

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

iconparkn 微信小程不显示,微信小程序,小程序,前端,阿里云,javascript,vue.jsiconparkn 微信小程不显示,微信小程序,小程序,前端,阿里云,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日
    浏览(55)
  • 【微信小程序】使用和风天气接口api(全过程)——获取天气

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    2024年02月12日
    浏览(60)
  • 如何使用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日
    浏览(121)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包