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

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

项目概述

本文基于 uni-app X 技术栈，介绍在鸿蒙平台上实现 tabBar 底部导航栏的方法。uni-app X 是 DCloud 推出的新一代跨平台开发框架，支持将代码编译为多个平台的原生代码，包括 Android、iOS、鸿蒙 Next、Web 和小程序。

• Android：编译为 Kotlin
• iOS：编译为 Swift
• 鸿蒙 Next：编译为 ArkTS
• Web/小程序：编译为 JS

在 Android 平台，uni-app X 的工程被整体编译为 Kotlin 代码，本质上是换了 Vue 写法的原生 Kotlin 应用，性能与原生一致。

实现步骤

1. 环境准备

下载安装 HBuilderX 最新版本及 DevStudio 最新版本。

2. 目录结构准备

打开 HBuilderX 新建项目，选择 uniapp-x 模板。关键目录如下：

pages/
└── tabBar/
    ├── home.uvue      # 首页
    ├── zhihu.uvue     # 日报页
    └── mine.uvue      # 我的页面
static/
├── ic_tab_home.png        # 首页默认图标
├── ic_tab_active_home.png # 首页选中图标
├── ic_tab_ribao.png       # 日报默认图标
├── ic_tab_ribao_active.png# 日报选中图标
├── ic_tab_me.png          # 我的默认图标
└── ic_tab_active_me.png   # 我的选中图标

3. 配置 pages.json

在 pages.json 中定义页面和 tabBar。uni-app X 支持条件编译，可为不同平台配置不同的 tabBar 参数。

页面配置

{
  "pages": [
    {
      "path": "pages/tabBar/home",
      "style": {
        "navigationBarTitleText": "首页",
        "backgroundColorContent": "@tabBarPagebackgroundColorContent"
      }
    },
    {
      "path": "pages/tabBar/zhihu",
      "style": {
        "navigationBarTitleText": "日报",
        "backgroundColorContent": "@tabBarPagebackgroundColorContent"
      }
    },
    {
      "path": "pages/tabBar/mine",
      "style": {
        "navigationBarTitleText": "我的",
        "backgroundColorContent": "@tabBarPagebackgroundColorContent"
      }
    }
  ]
}

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 支持跨平台开发，大大提高了开发效率。