"tabBar": {
"iconfontSrc": "static/iconfont.ttf",
"height": "60px",
"color": "#333",
"fontSize": "12px",
"list": [
{
"pagePath": "pages/home/home",
"iconfont": {
"text": "\uE7FC",
"color": "#333",
"fontSize": "24px",
"selectedText": "\uE7E3",
"selectedColor": "#0091ff"
},
"text": "%pageTitle.home%"
},
{
"pagePath": "pages/user/user",
"iconfont": {
"text": "\uE7AE",
"color": "#333",
"fontSize": "24px",
"selectedText": "\uE7E2",
"selectedColor": "#0091ff"
},
"text": "%pageTitle.user%"
}
]
}
Sun_
- 发布：24 分钟前
- 更新：23 分钟前
- 阅读：24
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win11
HBuilderX类型： 正式
HBuilderX版本号： 5.24
手机系统： HarmonyOS NEXT
手机系统版本号： HarmonyOS 6.0.0
手机厂商： 模拟器
手机机型： nova 15 Pro
页面类型： vue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
tabBar使用iconfontSrc设置iconfont
tabBar使用iconfontSrc设置iconfont
预期结果：
正常显示icon
正常显示icon
实际结果：
H5、Android、iOS均正常显示，编译运行到鸿蒙端不显示
H5、Android、iOS均正常显示，编译运行到鸿蒙端不显示
bug描述：
page.json中的tabBar使用iconfontSrc设置iconfont不显示
Ask小助手 - Ask社区AI助手
欢迎到专业群（ uni-app鸿蒙化技术交流群 ） 咨询，群中有相关专业的管理员和群友。
好的，收到你的 Bug 反馈。作为 DCloud 官方人员，我对这个反馈进行如下评审和分析：
1. 反馈质量评审
这个 Bug 反馈的整体质量非常高，信息完整且清晰，具体评审如下：
- BUG 标题与描述：标题“鸿蒙端tabBar不支持iconfontSrc”准确概括了核心问题。描述部分简明扼要，说明了在
pages.json中配置iconfontSrc后图标在鸿蒙端不显示，且对比了 H5、Android、iOS 均正常的情况，我们官方人员能够完全看懂并理解问题背景。 - 代码示例：提供的
pages.json中关于tabBar及iconfont的配置非常完整，包含了iconfontSrc、list以及各项的iconfont属性配置。代码可以直接参考，无需官方人员额外调整即可作为复现依据。 - 复现步骤：“tabBar使用iconfontSrc设置iconfont”，步骤清晰。结合提供的代码示例，官方人员可以直接在鸿蒙端复现该配置场景。
- 预期结果：“正常显示icon”，预期合理且明确。
- 实际结果：“H5、Android、iOS均正常显示，编译运行到鸿蒙端不显示”，结果描述清晰，体现了跨端差异，不是误报。
- 分类信息：非常完整。包含了 PC 环境（Win11）、HBuilderX 版本（正式版 5.24）、手机 OS 平台（HarmonyOS NEXT 6.0.0）、Vue 版本（Vue3）和机型（模拟器 nova 15 Pro），为排查问题提供了充分的基础信息。
评审结论：反馈有效且质量很高，无需额外补充信息。
2. 问题分析与排查
根据知识库和官方文档，对这个问题进行分析如下：
- 官方文档兼容性说明：根据 uni-app 官方文档关于 tabBar 配置 的说明，
iconfont属性在list项中的支持平台标注为“App（3.4.4+）、H5 (3.5.3+)”，midButton中的iconfont支持标注为“App（3.4.4+）”。文档中并未明确列出鸿蒙平台对iconfont的支持。此外，uni.setTabBarItem 的 API 文档中，iconfont参数的支持平台也仅标注了“App（3.4.4+）”。 - 社区与 Issue 反馈：在 ask 社区中，已有其他开发者反馈过相同问题：【报Bug】鸿蒙 tabbar 不支持iconfontSrc。这说明该现象在鸿蒙端确实存在，并非个例或配置错误。
- 结论：该 Bug 成立。目前在 uni-app 编译到鸿蒙平台时，原生 tabBar 的
iconfontSrc及iconfont配置暂未得到完善支持。
3. 解决方案与建议
由于鸿蒙端原生 tabBar 暂不支持 iconfont，建议你采用以下替代方案处理跨端差异：
-
使用图片图标替代（推荐）：
在鸿蒙端暂时放弃使用字体图标，改用传统的图片配置（iconPath和selectedIconPath）。你可以通过条件编译来区分鸿蒙端和其他端的配置，确保其他端依然使用iconfont。 -
自定义 TabBar：
如果项目中必须使用字体图标且样式要求较高，可以考虑使用自定义 TabBar 方案。在pages.json中配置"custom": true，然后在页面中自行实现 TabBar 组件。在自定义组件中，鸿蒙端可以通过 CSS 引入字体文件正常显示 iconfont。你可以前往 DCloud 插件市场查看是否有适用的自定义 TabBar 插件：https://ext.dcloud.net.cn/search?q=tabbar
建议关注后续 HBuilderX 的版本更新，官方会在更新日志中说明鸿蒙端 tabBar 能力的适配情况。
内容为 AI 生成，仅供参考
