微信小程序引入和风天气图标库

这篇具有很好参考价值的文章主要介绍了微信小程序引入和风天气图标库。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

npm导入和风天气的图标库后使用没有效果,就在网上查询了下怎么解决,然后动手尝试一下。

参考文章

步骤

1. 下载图标文件(链接),解压后大致这样

微信小程序引入和风天气图标库

微信小程序引入和风天气图标库

2. 在transfonter网站将需要的图标字体转成Base64,在font\fonts文件下

选择上传

微信小程序引入和风天气图标库

微信小程序引入和风天气图标库

下载

微信小程序引入和风天气图标库

3. 解压后把stylesheet.css复制到小程序的某个文件夹下

微信小程序引入和风天气图标库

4. 将和风图标文件font下qweather-icons.css中的@font-face删除后保存,可以移动到刚才stylesheet.css的同级

微信小程序引入和风天气图标库

5. 改这两个文件后缀为wxss,并在app.wxss中引入

文件结构

微信小程序引入和风天气图标库

引入

微信小程序引入和风天气图标库

测试使用

微信小程序引入和风天气图标库

能正常显示

微信小程序引入和风天气图标库

完成!文章来源地址https://www.toymoban.com/news/detail-760448.html

到了这里,关于微信小程序引入和风天气图标库的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 微信小程序开发--利用和风天气API实现天气预报小程序

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

    2023年04月27日
    浏览(87)
  • 微信小程序使用字体图标——链接引入

    目录 1.下载字体图标  1.选择需要的图标加入购物车添加到项目 2.查看项目  3.生成在线链接   4.复制生成的链接 等下放到iconfont.json中​编辑 2.引入链接 1.下载  2.生成iconfont.json文件 3. 在iconfont.json中 放入生成的链接 4.需要重新编译小程序之后在终端执行 5.在app.json中引入字

    2024年02月16日
    浏览(187)
  • 微信小程序引入外部矢量图标(阿里巴巴矢量图标)

      进入阿里巴巴矢量图标库 搜索想要的矢量图标并加入购物车,点击右上角购物车 将图标添加至项目 更改项目设置 将字体格式设置为TTF Base64   点击下载至本地  在微信小程序中新建文件夹  将下载到本地的文件中的iconfont.css拖拽到微信小程序新建的文件夹中  更改后缀名

    2024年02月16日
    浏览(68)
  • 微信小程序(十二)在线图标与字体的获取与引入

    注释很详细,直接上代码 上一篇 新增内容: 1.从IconFont获取图标与文字的样式链接 2.将在线图标配置进页面中(源码) 3.将字体配置进页面文字中(源码) 4.css样式的多文件导入 获取链接 1.获取图标链接 登入IconFont 点击跳转 温馨提醒:之后生成的图标名会以这里设定的名字

    2024年01月24日
    浏览(48)
  • 微信小程序:简单实现查看天气小程序

    首先注册和风天气账号,创建一个免费版的项目,准备好api接口,查看自己的key 如果想获取某个城市天气信息就必须知道这个城市的location和key去请求 那么官方也提供了获取地址location的api,调用即可,其中location和key必填,location支持文字、以英文逗号分隔的经度,纬度坐标

    2024年02月13日
    浏览(61)
  • 微信小程序—天气预报查询

    前不久用安卓做了个天气预报,麻烦的要死,故想体验一下微信小程序开发(其实没有可比性) 发现了一个免费的天气接口 天气接口api 地址:http://wthrcdn.etouch.cn/weather_mini?city=城市名称 (1)index.wxml文件 (2)index.wxss文件 (3)index.js文件 主要是实现三个动作 一个是初始化加

    2024年02月12日
    浏览(44)
  • 微信小程序 - 简易天气预报

    预览图:   1:WXML: 2:WXSS: 3:JS: 4:下载地图包: 不了解的可以通过这个链接查看,其中有关于小程序定位的内容,本章也使用到过:微信小程序获取位置信息_微信小程序获取当前位置_鸢与浅忆的博客-CSDN博客  5:app.json: 和page、window同级 该项目使用的接口为nowapi平台提

    2024年02月06日
    浏览(87)
  • 微信小程序天气预报实战

    api接口用的和风天气 代码如下 // pages/weather/weather.js Page({   /**    * 页面的初始数据    */   data: {     apiKey: \\\"1f5e75b8a3f0472aaf2f618268b30b4e\\\",     City: \\\'\\\',     Country:\\\'\\\',     locationid:\\\"\\\",     latlongFlag: false   },   /**    * 生命周期函数--监听页面加载    */   onL

    2024年02月19日
    浏览(40)
  • “微天气” - 一个基于微信小程序的智能天气预报体验

    微信小程序是一种不用下载就能使用的应用,也是一项创新,经过将近两年的发展,已经构造了新的微信小程序开发环境和开发者生态。微信小程序也是这么多年来中国IT行业里一个真正能够影响到普通程序员的创新成果,已经有超过150万的开发者加入到了微信小程序的开发

    2024年02月09日
    浏览(45)
  • 微信小程序之天气查询小案例

    本次小项目是关于微信小程序-动态查询天气(墨迹天气Api) 此次案例分为以下几个准备方面: 一.准备方面: (1)如何发起请求?查看文档:RequestTask | 微信开放文档 (2)如何获取定位信息?查看文档:wx.getLocation(Object object) | 微信开放文档 (3)如何控制页面来实现数据实时渲染?查看文档:

    2024年02月11日
    浏览(39)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包