微信小程序底部tabBar不显示图标

现场还原

在设置微信小程序底部tabBar导航图标时,无论如何操作均无法显示在界面上

在这里插入图片描述

解决思路

问题1 图标类型

一开始以为不支持png类型,但查看官方API仅提示ICON尺寸大小

打开其他项目可以正常展示,排除图标类型问题

iconPath	string	否	图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。 当 position 为 top 时,不显示 icon。

问题2 图标路径设置问题

按住ctrl 和 鼠标左键点击 均可跳转查看对应图标 说明资源路径无问题

 "iconPath" : "/images/b_2.png","iconPath" : "images/b_2.png",

问题3 pages和tabBar中定义第一个页面不一致

有网友描述是
app.jsonpages中的第一个页面不是tabBar配置中list[0]的第一个页面大导致

模拟示例:

  "pages":["pages/index/index","pages/welcome/welcome","pages/cart/cart","pages/type/type","pages/details/details","pages/home/home","pages/logs/logs"],"tabBar": {"color": "#AAAAAA","selectedColor": "#F20A0A","borderStyle": "black","backgroundColor": "#ffffff","list": [{"pagePath": "pages/type/type","text": "类型","iconPath" : "/images/b_2.png","selectedIconPath" : "/images/b_5.png"},{"pagePath": "pages/index/index","text": "首页","iconPath" : "images/b_1.png","selectedIconPath" : "images/b_5.png"},{"pagePath": "pages/details/details","text": "详情","iconPath" : "images/b_3.png","selectedIconPath" : "images/b_5.png"},{"pagePath": "pages/cart/cart","text": "购物车","iconPath" : "images/b_4.png","selectedIconPath" : "images/b_5.png"},{"pagePath": "pages/home/home","text": "我的","iconPath" : "images/b_5.png","selectedIconPath" : "images/b_5.png"}]},

效果展示:

顺序互不干涉 是可以显示的!!!

在这里插入图片描述

问题4 真机调试图片超200K或文件超上限2M

  • 真机调试文件超2M(message:Error: 代码包大小为2100 kb,上限为 2048 kb,请删除文件后重试。

如果小程序端文件超大。如果是在4M以内,可以更换微信开发者版本解决。

详情 -> 本地设置勾选 ->  预览及真机调试时主包、分包体积上限调整为4M

在这里插入图片描述

问题5 重启微信开发者工具

比较尴尬的是,一顿操作猛如虎,一看战绩零杠五!!!

上面所有的操作全部执行了一遍后,点击刷新界面,小程序还是无反应!!!

后面不小心勿关了编辑工具,重启后,发现一切又正常啦!

总结

可能是以下几个原因导致底部tabBar不显示图标:

  • 图标路径错误:请检查图标路径是否正确,建议使用相对路径。

  • 图标大小不符合要求:请确保图标大小符合微信小程序的要求,建议使用官方提供的图标模板。

  • tabBar配置错误:请检查tabBar的配置是否正确,包括图标路径、选中态图标路径、文字等。

  • 页面路径错误:请检查页面路径是否正确,如果路径错误,可能会导致tabBar不显示。所指向的页面未进行页面注册。

  • 编程界玄学薛定谔的bug 重启软件或电脑 解决99%问题

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/155957.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

easy code 模板案例 (author作者 修改+swagger-ui+mybatis plus)

pojo ##引入宏定义 $!{define.vm} ##使用宏定义设置回调(保存位置与文件后缀) #save("/pojo", ".java") ##使用宏定义设置包后缀 #setPackageSuffix("pojo") ##使用全局变量实现默认包导入 $!{autoImport.vm} import ja…

基于全息感知的智慧高速IT设施监控运维方案

作为智能交通的重要细分领域,建设智慧高速是实施交通强国战略的重要基础。在信息化时代,交通行业已经依托信息化建设取得了显著的成果,其中以收费网络、办公网络、监控网络和通讯网络为基础的网络架构已经形成,并且正在逐步完善网…

【算法|滑动窗口No.1】leetcode209. 长度最小的子数组

个人主页:兜里有颗棉花糖 欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 兜里有颗棉花糖 原创 收录于专栏【手撕算法系列专栏】【LeetCode】 🍔本专栏旨在提高自己算法能力的同时,记录一下自己的学习过程,希望…

Unity ToLua热更框架使用教程(1)

从本篇开始将为大家讲解ToLua在unity当中的使用教程。 Tolua的框架叫LuaFramework,首先附上下载链接: https://github.com/jarjin/LuaFramework_UGUI_V2 这个地址的是UGUI的。 下载完之后导入项目,首先,我们要先让这个项目跑起…

统一机器人描述格式——URDF

URDF(Unified Robot Description Format,统一机器人描述格式)是ROS中一个非常重要的机器人模型描述格式,ROS同时也提供URDF文件的C解析器,可以解析URDF文件中使用XML格式描述的机器人模型。 在使用URDF文件构建机器人模…

Centos8 openjdk升级

1、卸载旧版本 sudo dnf remove java-1.8.0-openjdk 2、搜索新版本 yum search java-11-openjdk3、安装新版本 dnf install java-11-openjdk.x86_644、验证新版本 java -version

光纤激光切割机如何高效的切割铜等高反材料

高反射材料的切割过程往往具有挑战性,对于许多光纤激光切割设备厂商而言都是难以解决的问题。但是作为铜、铝、金等常见的高反射性材料又需要在日常生产中经常进行加工处理。 很多厂家解决的办法之一就是采用相应的辅助气体。在光纤激光切割机切割铜时,辅…

【智慧燃气】智慧燃气解决方案总体概述--终端层、网络层

关键词:智慧燃气、智慧燃气系统、智慧燃气平台、智慧燃气解决方案、智慧燃气应用、智能燃气 智慧燃气解决方案是基于物联网、大数据、云计算、移动互联网等先进技术,结合燃气行业特征,通过智能设备全面感知企业生产、环境、状态等信息的全方…

【机器学习 | 回归问题】超越直线:释放多项式回归的潜力 —— 详解线性回归与非线性 (含详细案例、源码)

🤵‍♂️ 个人主页: AI_magician 📡主页地址: 作者简介:CSDN内容合伙人,全栈领域优质创作者。 👨‍💻景愿:旨在于能和更多的热爱计算机的伙伴一起成长!!&…

【前端小技巧】如何使用 Eolink Apilkit 调用 Mock ?

在开发过程中,进度比较赶的情况下,前端人员当页面写完时,后台的接口还没写完,等要交付的时候后端才把接口给你,这个时候就很尴尬。 这个时候 Mock 就可以很好的解决这个问题,前端团队可以在 API 还没开发完…

SAP内部转移价格(利润中心转移价格)的条件

SAP内部转移价格(利润中心转移价格) SAP内部转移价格(利润中心转移价格) SAP内部转移价格(利润中心转移价格)这个听了很多人说过,但是利润中心转移定价需要具备什么条件。没有找到具体的文档。…

应用在自动跟随行李箱领域中的国产蓝牙芯片

自动行走行李箱,又名“蓝牙行李箱”,是一种全自动的机械化行李箱。将三个蓝牙信号感应装置安装在一个特制的行李箱里面,这些装置接收到智能手机发出的蓝牙信号后,可通过一个计算机微处理器控制安装在行李下方的履带移动。自动行走…

深度学习基础知识 学习率调度器的用法解析

深度学习基础知识 学习率调度器的用法解析 1、自定义学习率调度器**:**torch.optim.lr_scheduler.LambdaLR2、正儿八经的模型搭建流程以及学习率调度器的使用设置 1、自定义学习率调度器**:**torch.optim.lr_scheduler.LambdaLR 实验代码: i…

精益生产与MES生产管理系统相互融合

近年来,精益生产理念在企业管理中越来越受欢迎。它强调以最小的浪费,在最短的时间内,生产出高质量的产品。这一理念的实施手段包括准时制生产方式、适时生产方式等,消除浪费、看板、快换工装等都是精益提高的工具方针。 然而&…

公网环境下如何内网穿透读写本地群晖NAS文件?

File Station 是 群晖Synology NAS 的集中化文件管理工具。我们可以在局域网内登陆nas web界面通过 File Station管理群晖nas中的文件,如果我们在户外,有读写家中群晖nas中文件的需求怎么办? 本教程解决的问题是: 人在户外&#…

常见的Web安全漏洞(2021年9月的OWASP TOP 10)

聊Web安全漏洞,就不得不提到OWASP TOP10。开放式Web应用程序安全项目(OpenWeb Application Security Project,OWASP)是一个开源的、非营利的组织,主要提供有关Web应用程序的实际可行、公正透明、有社会效益的信息&…

标题:协同云办公:打破传统模式,提升工作效率!

随着科技的迅速发展,传统办公模式已经难以满足现代企业的需求。为了提高工作效率和协作能力,越来越多的企业开始采用协同云办公。协同云办公通过云计算、大数据等技术,打破了传统办公模式的束缚,为企业带来了前所未有的便捷与高效…

Unity基础课程之物理引擎8-扔保龄球游戏案例(完)

三个脚本: 1.给求添加力 2.分数管理器 3.检测是否发生碰撞 ----------------------------------------------- 脚本源码 1.给求添加力 using System.Collections; using System.Collections.Generic; using UnityEngine;public class RoleControl : MonoBeha…

易点易动设备管理系统:打通采购管理的智能化设备管理解决方案

在现代企业的运营中,设备管理是一个关键的环节。传统的设备管理方法往往效率低下,导致设备故障频发、巡检和维修工作不协调,备件管理不规范。为了解决这些问题,我们引入了易点易动设备管理系统,它能够全面管理设备的生…

DataPath实现渐变效果

Android的vector矢量图很好用,可以画出保证清晰度的任意图形。但是Android Nougat之前的VectorDrawable不支持渐变色,如果要使用渐变色就要使用png图片或者自定义GradientDrawable。这么明显的不足,肯定是要修补上呀,API 24中的Ve…