Uniapp项目中解决一个比较典型的图标渲染问题：原生 tabBar（pages.json 里配置的那种）

文章目录

- 一，问题复现
- 二，原因分析
- [三，H5 浏览器问题](#三，H5 浏览器问题)
- - 3.1，修复方法一
  - 3.2，修复方法二

一，问题复现

niapp项目中出现以下问题：项目运行后，初始tabbar的每个图标都显示正常，但是一点击某个tabbar图标，另外的有的就不显示图标，「初始都正常、点一下后另外几个反而消失」

二，原因分析

这是用原生 tabBar（pages.json 里配置的那种）时比较典型的图标渲染问题。「初始都正常、点一下后另外几个反而消失」基本可以排除"路径完全写错"（那样一开始就不显示），更像是切换时重绘/重新加载图标失败。按出现概率从高到低排查：

图标尺寸或体积不标准（最常见）。uni-app 原生 tabBar 图标官方建议 81×81px、单张 ≤ 40KB、PNG。如果你后来替换过图标，尺寸过大或几张大小不一，切换重绘时就可能"有的加载得出、有的加载不出"。我生成的那套图标是符合规范的，先确认是不是换成了自己的大图。
我在 pages.json 给 tabBar 设了自定义 "height": "56px" 和 "fontSize": "10px"。个别端/编译器版本对自定义高度的重绘兼容不好，会让图标区域渲染异常。先把这两行删掉用默认值跑一遍，看是否恢复------这是针对当前这份配置最值得先试的一步。
编译缓存 / HBuilderX 版本问题。这类"切换后图标丢失"在某些 HBuilderX 版本确实是已知 bug。处理办法：关掉运行 → 删除项目里的 unpackage/dist 缓存目录 → 升级 HBuilderX 到最新版 → 重新编译运行。
真机/小程序的路径大小写。pages.json 里写的 home.png 必须和文件名大小写完全一致。Windows 下 H5 预览不区分大小写所以看着正常，到真机/小程序就可能个别图标失效。

建议顺序：先试第 2 条（去掉自定义 height/fontSize），不行再清缓存升级（第 3 条）。

上面都试过还不行，最稳的兜底是改用自定义 tabBar（"custom": true + 一个自绘的底部导航组件），用 image 标签自己渲染图标，彻底绕开原生 tabBar 的这个渲染问题。

三，H5 浏览器问题

诊断了H5标签栏图标消失的路由配置问题。

H5 的话，问题基本可以锁定在我给的路由配置上------是 manifest.json 里 H5 路由用了 history 模式 + 相对 base 导致的。

原理是这样：我在 manifest.json 写了

json 复制代码

"h5": {
  "router": { "mode": "history", "base": "./" }
}

history 模式下，点 tabBar 切页时浏览器地址会从 .../ 变成 .../pages/activity/activity 这种真实路径。而 tabBar 图标是相对路径 static/tabbar/xxx.png，它会跟着当前 URL 路径去解析，切页后就被解析到 .../pages/activity/static/tabbar/xxx.png 这种不存在的地址，于是 404、图标消失。这正好解释了"一开始（根路径下）都正常、一点击切页就有的没了"，剩下没消失的多半是浏览器缓存还在。

3.1，修复方法一

最简单------把 H5 路由改回默认的 hash 模式，地址栏 # 前的路径始终不变，相对资源就不会错：

json 复制代码

"h5": {
  "router": { "mode": "hash", "base": "/" }
}

3.2，修复方法二

如果你确实要用 history 模式（比如为了 SEO/美观 URL），那就把 base 设成绝对路径 "/"，并保证项目部署在域名根目录下：

json 复制代码

"router": { "mode": "history", "base": "/" }

改完清掉 unpackage/dist 缓存重新运行即可。

核心就是 manifest.json 里 H5 路由从 history 改成了 hash，切页后图标的相对路径就不会再错位。