uni-app X 鸿蒙应用开发：tabBar 底部导航栏实现

tabBar 配置

使用条件编译为鸿蒙平台单独配置：

// #ifndef APP-HARMONY
"tabBar": {
  "color": "@tabBarColor",
  "selectedColor": "@tabBarSelectedColor",
  "borderStyle": "@tabBarBorderStyle",
  "backgroundColor": "@tabBarBackgroundColor",
  "list": [
    {"pagePath": "pages/tabBar/home", "iconPath": "@tabBarHomeIconPath", "selectedIconPath": "@tabBarHomeSelectedIconPath", "text": "首页"},
    {"pagePath": "pages/tabBar/zhihu", "iconPath": "@tabBarZhiHuIconPath", "selectedIconPath": "@tabBarZhiHuSelectedIconPath", "text": "日报"},
    {"pagePath": "pages/tabBar/mine", "iconPath": "@tabBarMineIconPath", "selectedIconPath": "@tabBarMineSelectedIconPath", "text": "我的"}
  ]
}
// #endif
// #ifdef APP-HARMONY
"tabBar": {
  "color": "@tabBarColor",
  "selectedColor": "@tabBarSelectedColor",
  "borderStyle": "@tabBarBorderStyle",
  "backgroundColor": "@tabBarBackgroundColor",
  "list": [
    {"pagePath": "pages/tabBar/home", "iconPath": "static/ic_tab_home.png", "selectedIconPath": "static/ic_tab_active_home.png", "text": "首页"},
    {"pagePath": "pages/tabBar/zhihu", "iconPath": "static/ic_tab_ribao.png", "selectedIconPath": "static/ic_tab_ribao_active.png", "text": "日报"},
    {"pagePath": "pages/tabBar/mine", "iconPath": "static/ic_tab_me.png", "selectedIconPath": "static/ic_tab_active_me.png", "text": "我的"}
  ]
}
// #endif

4. 配置 theme.json

在 theme.json 中定义 tabBar 相关的主题变量，支持浅色和深色模式：

{
  "light": {
    "navigationBarTextStyle": "white",
    "navigationBarBackgroundColor": "#007AFF",
    "backgroundColorContent": "#efeff4",
    "tabBarPagebackgroundColorContent": "#efeff4",
    "backgroundColor": "#efeff4",
    "backgroundTextStyle": "dark",
    "tabBarColor": "#7A7E83",
    "tabBarSelectedColor": "#007AFF",
    "tabBarBorderStyle": "black",
    "tabBarBackgroundColor": "#F8F8F8",
    "tabBarHomeIconPath": "static/ic_tab_home.png",
    "tabBarHomeSelectedIconPath": "static/ic_tab_active_home.png",
    "tabBarZhiHuIconPath": "static/ic_tab_ribao.png",
    "tabBarZhiHuSelectedIconPath": "static/ic_tab_ribao_active.png",
    "tabBarMineIconPath": "static/ic_tab_me.png",
    "tabBarMineSelectedIconPath": "static/ic_tab_active_me.png"
  },
  "dark": {
    "navigationBarTextStyle": "white",
    "navigationBarBackgroundColor": "#1F1F1F",
    "backgroundColor": "#1F1F1F",
    "backgroundColorContent": "#646464",
    "tabBarPagebackgroundColorContent": "#1F1F1F",
    "backgroundTextStyle": "light",
    "tabBarColor": "#cacaca",
    "tabBarSelectedColor": "#007AFF",
    "tabBarBorderStyle": "white",
    "tabBarBackgroundColor": "#1F1F1F",
    "tabBarHomeIconPath": "static/ic_tab_home.png",
    "tabBarHomeSelectedIconPath": "static/ic_tab_active_home.png",
    "tabBarZhiHuIconPath": "static/ic_tab_ribao.png",
    "tabBarZhiHuSelectedIconPath": "static/ic_tab_ribao_active.png",
    "tabBarMineIconPath": "static/ic_tab_me.png",
    "tabBarMineSelectedIconPath": "static/ic_tab_active_me.png"
  }
}

技术要点

1. 条件编译

uni-app X 支持条件编译，可以为不同平台编写不同的代码。例如为鸿蒙平台配置专门的 tabBar。

2. 主题变量

通过 theme.json 定义主题变量，实现统一的主题管理，支持浅色和深色模式切换。

3. 图标资源

tabBar 图标资源放在 static 文件夹下，包括默认状态和选中状态的图标。

平台差异处理

• 鸿蒙平台：uni-app X 将代码编译为 ArkTS，实现原生性能。单独配置了 tabBar，使用了直接的图标路径引用。
• 其他平台：Android、iOS、Web、小程序上使用了主题变量来引用图标路径，方便管理主题。

优势分析

相比原生 ArkUI 开发，uni-app X 实现 tabBar 有以下优势：

1. 跨平台：一套代码可在鸿蒙、Android、iOS、Web 和小程序运行。
2. 开发效率高：使用 Vue 语法，学习成本低。
3. 原生性能：编译为各平台原生代码，性能一致。
4. 配置简单：通过 pages.json 配置即可实现 tabBar。
5. 主题管理：支持通过 theme.json 统一管理主题。

总结

通过本文的介绍，我们了解了如何使用 uni-app X 在鸿蒙平台上实现 tabBar 底部导航栏。uni-app X 提供了简洁的配置方式，通过 pages.json 和 theme.json 即可完成 tabBar 的配置，相比原生 ArkUI 开发更加简单高效。同时，uni-app X 支持跨平台开发，大大提高了开发效率。