Uniapp 开发微信小程序使用 Iconfont 底部 TabBar 不显示问题

最新推荐文章于 2025-05-09 15:22:06 发布

不二菜菜子

最新推荐文章于 2025-05-09 15:22:06 发布

阅读量330

点赞数 3

文章标签： uni-app 微信小程序小程序

本文链接：https://blog.csdn.net/guliang28/article/details/147786930

版权

在 Uniapp 开发微信小程序时，使用 Iconfont 作为底部 TabBar 图标不显示的问题，通常有以下几种原因和解决方案：

常见原因及解决方案

1. 图标格式问题

微信小程序 TabBar 只支持特定格式的图标：

必须使用 本地图片路径，不支持网络图片
推荐使用 png 格式
建议尺寸为 81px * 81px

解决方案：

如果必须使用 Iconfont，可以尝试将图标转为 base64 编码：

4. 使用 base64 编码

将 Iconfont 下载为 png 格式
放在项目的 static 目录下
在 pages.json 中引用本地路径

{
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "static/tabbar/home.png",
        "selectedIconPath": "static/tabbar/home-active.png"
      }
    ]
  }
}

2. 路径问题

确保图标路径正确，微信小程序要求路径必须从项目根目录开始。

3. 图标大小问题

如果图标尺寸过大或过小，可能导致显示异常。建议：

标准尺寸：81px * 81px
最大不超过 200px * 200px

{
  "iconPath": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."
}

5. 使用微信原生图标

微信小程序提供了一套原生图标，可以直接使用：

{
  "iconPath": "/path/to/icon",
  "selectedIconPath": "/path/to/selectedIcon",
  "iconfont": {
    "text": "图标对应文字",
    "selectedText": "选中时图标对应文字",
    "fontSize": "20px",
    "color": "#000000",
    "selectedColor": "#00FF00"
  }
}