鸿蒙多功能工具箱开发实战(一)-项目架构设计与环境搭建前言随着鸿蒙生态的快速发展越来越多的开发者开始接触HarmonyOS应用开发。本文将以一个实用的多功能工具箱应用为例从零开始讲解HarmonyOS项目的架构设计与环境搭建过程。通过本系列文章你将掌握HarmonyOS应用开发的核心技术和最佳实践。一、项目概述1.1 项目定位鸿蒙多功能工具箱HarmonyToolBox是一款集成多种实用工具的应用涵盖计算、历法、换算、财务、行情、生活等多个领域。项目旨在提供日常高频使用的工具集合展示HarmonyOS开发的最佳实践作为学习鸿蒙开发的实战案例1.2 功能模块规划图1 功能模块分类工具列表说明计算工具亲戚称呼计算器、日期计算器、养老金计算器生活常用计算历法工具中华农历、黄历查询、节气查询传统历法功能换算工具长度/重量/面积/体积/温度/速度换算多维度单位换算财务工具个税计算、汇率换算、理财计算、房贷/车贷计算金融类计算行情工具今日金价、实时汇率实时数据展示生活工具每日语录、天气查询日常信息服务1.3 技术选型开发工具DevEco Studio 5.0 开发语言ArkTS ArkUI 系统版本HarmonyOS 4.0 (API 10) 构建工具Hvigor 状态管理State、Link、Provide/Consume 网络请求ohos.net.http 数据存储Preferences二、开发环境搭建2.1 安装DevEco Studio下载安装包访问华为开发者官网https://developer.huawei.com下载 DevEco Studio 最新版本建议5.0以上支持 Windows 和 macOS 系统安装配置# Windows系统安装后配置环境变量DEVECO_HOMEC:\Program Files\Huawei\DevEco Studio首次启动配置下载 HarmonyOS SDK选择 API 10配置 Node.js 环境DevEco会自动提示登录华为开发者账号2.2 SDK版本选择推荐配置HarmonyOS SDK: API 10 (HarmonyOS 4.0) Compile SDK: 10 Target SDK: 10 Minimum SDK: 10三、项目创建与结构解析3.1 创建项目打开 DevEco Studio → File → New → New Project选择Empty Ability模板配置项目信息配置项值Project nameHarmonyToolBoxBundle namecom.example.harmonytoolboxSave location自定义路径Compile SDKAPI 10ModelStage模型3.2 项目目录结构创建完成后的标准目录结构HarmonyToolBox/ ├── AppScope/ # 应用全局配置 │ ├── app.json5 # 应用配置包名、版本等 │ └── resources/ # 全局资源图标、字符串 │ ├── base/ │ │ ├── element/ │ │ │ └── string.json # 全局字符串资源 │ │ └── media/ # 全局媒体资源 │ └── rawfile/ # 原始文件资源 │ ├── entry/ # 主模块entry HAP │ ├── src/ │ │ └── main/ │ │ ├── ets/ # ArkTS源码目录 │ │ │ ├── entryability/ │ │ │ │ └── EntryAbility.ets # 应用入口 │ │ │ └── pages/ # 页面目录 │ │ │ └── Index.ets │ │ ├── resources/ # 模块资源 │ │ │ ├── base/ │ │ │ │ ├── element/ │ │ │ │ │ ├── color.json # 颜色资源 │ │ │ │ │ └── string.json # 字符串资源 │ │ │ │ ├── media/ # 图片资源 │ │ │ │ └── profile/ # 配置文件 │ │ │ │ └── main_pages.json # 页面路由配置 │ │ │ └── rawfile/ │ │ └── module.json5 # 模块配置 │ ├── build-profile.json5 # 构建配置 │ ├── hvigorfile.ts # Hvigor构建脚本 │ └── oh-package.json5 # 依赖配置 │ ├── build-profile.json5 # 项目构建配置 ├── hvigorfile.ts # 项目级构建脚本 ├── oh-package.json5 # 项目依赖配置 └── hvigor/ # Hvigor工具配置 └── hvigor-config.json53.3 关键配置文件详解3.3.1 app.json5 - 应用配置{ app: { bundleName: com.example.harmonytoolbox, // 应用包名唯一标识 vendor: example, // 开发者名称 versionCode: 1000000, // 版本号整数 versionName: 1.0.0, // 版本名称字符串 icon: $media:layered_image, // 应用图标 label: $string:app_name // 应用名称 } }3.3.2 module.json5 - 模块配置{ module: { name: entry, // 模块名称 type: entry, // 模块类型entry/feature/shared description: $string:module_desc, mainElement: EntryAbility, // 主Ability deviceTypes: [phone, tablet], // 支持设备类型 deliveryWithInstall: true, // 是否随应用安装 installationFree: false, // 是否免安装 pages: $profile:main_pages, // 页面配置 abilities: [ { name: EntryAbility, srcEntry: ./ets/entryability/EntryAbility.ets, description: $string:EntryAbility_desc, icon: $media:layered_image, label: $string:EntryAbility_label, exported: true, // 是否可被其他应用调用 skills: [ { entities: [entity.system.home], actions: [ohos.want.action.home] // 启动Action } ] } ] } }3.3.3 main_pages.json - 页面路由配置{src:[pages/Index,pages/calculator/RelativeCalculator,pages/calendar/LunarCalendar]}重要每个新页面都必须在此注册才能被路由访问3.3.4 build-profile.json5 - 构建配置{ app: { signingConfigs: [], // 签名配置 compileSdkVersion: 10, // 编译SDK版本 compatibleSdkVersion: 10, // 兼容SDK版本 products: [ { name: default, signingConfig: default } ] }, modules: [ { name: entry, srcPath: ./entry, targets: [ { name: default, applyToProducts: [default] } ] } ] }四、项目架构设计4.1 分层架构┌─────────────────────────────────────────┐ │ UI Layer (Pages) │ │ Index.ets, CalculatorPage.ets, ... │ ├─────────────────────────────────────────┤ │ Component Layer (组件) │ │ BottomNavBar, ToolCard, ... │ ├─────────────────────────────────────────┤ │ Common Layer (公共) │ │ AppConfig, Utils, Constants │ ├─────────────────────────────────────────┤ │ Service Layer (服务) │ │ HttpService, StorageService │ └─────────────────────────────────────────┘4.2 目录规划entry/src/main/ets/ ├── common/ # 公共模块 │ ├── AppConfig.ets # 应用配置主题、分类等 │ ├── Constants.ets # 常量定义 │ └── Utils.ets # 工具函数 │ ├── components/ # 公共组件 │ ├── BottomNavBar.ets # 底部导航栏 │ ├── ToolCard.ets # 工具卡片 │ └── Header.ets # 通用头部 │ ├── pages/ # 页面 │ ├── Index.ets # 主页 │ ├── CalculatorPage.ets # 计算工具分类页 │ ├── CalendarPage.ets # 历法工具分类页 │ ├── ConvertPage.ets # 换算工具分类页 │ ├── FinancePage.ets # 财务工具分类页 │ ├── MarketPage.ets # 行情工具分类页 │ ├── LifePage.ets # 生活工具分类页 │ │ │ ├── calculator/ # 计算工具详情页 │ │ ├── RelativeCalculator.ets │ │ ├── DateCalculator.ets │ │ └── PensionCalculator.ets │ │ │ ├── calendar/ # 历法工具详情页 │ │ ├── LunarCalendar.ets │ │ ├── HuangCalendar.ets │ │ └── SolarTerms.ets │ │ │ ├── convert/ # 换算工具详情页 │ │ ├── LengthConvert.ets │ │ └── ... │ │ │ ├── finance/ # 财务工具详情页 │ ├── market/ # 行情工具详情页 │ └── life/ # 生活工具详情页 │ ├── services/ # 服务层 │ ├── HttpService.ets # 网络请求服务 │ └── StorageService.ets # 数据存储服务 │ ├── models/ # 数据模型 │ └── ToolItem.ets # 工具项模型 │ └── entryability/ └── EntryAbility.ets # 应用入口4.3 命名规范类型规范示例页面PascalCase PageCalculatorPage.ets组件PascalCaseToolCard.ets服务PascalCase ServiceHttpService.ets工具PascalCase UtilsDateUtils.ets常量UPPER_SNAKE_CASETHEME_COLORS五、初始化核心配置5.1 创建应用配置文件创建entry/src/main/ets/common/AppConfig.ets// 工具分类枚举exportenumToolCategory{CALCULATORcalculator,CALENDARcalendar,CONVERTconvert,FINANCEfinance,MARKETmarket,LIFElife}// 分类信息接口exportinterfaceCategoryInfo{category:ToolCategory name:stringicon:stringcolor:string}// 主题颜色配置exportconstTHEME_COLORS{primary:#4A90E2,secondary:#50C878,background:#F5F5F5,card:#FFFFFF,text:#333333,textSecondary:#999999}// 获取分类列表exportfunctiongetToolCategories():CategoryInfo[]{return[{category:ToolCategory.CALCULATOR,name:计算,icon:,color:#4A90E2},{category:ToolCategory.CALENDAR,name:历法,icon:,color:#E74C3C},{category:ToolCategory.CONVERT,name:换算,icon:,color:#50C878},{category:ToolCategory.FINANCE,name:财务,icon:,color:#FFB347},{category:ToolCategory.MARKET,name:行情,icon:,color:#9B59B6},{category:ToolCategory.LIFE,name:生活,icon:,color:#1ABC9C}]}5.2 配置资源文件string.json - 字符串资源{string:[{name:app_name,value:多功能工具箱},{name:module_desc,value:多功能工具箱应用}]}color.json - 颜色资源{color:[{name:primary,value:#4A90E2},{name:start_window_background,value:#FFFFFF}]}六、运行与调试6.1 本地预览器DevEco Studio 提供了强大的预览器功能打开任意.ets页面文件右侧边栏点击Previewer实时预览UI效果6.2 模拟器运行点击Tools → Device Manager创建本地模拟器选择 Phone 类型点击运行按钮 ▶️6.3 真机调试连接华为手机/平板开启开发者模式和USB调试配置签名自动签名或手动签名点击运行七、小结本文介绍了鸿蒙多功能工具箱项目的整体架构设计与开发环境搭建包括✅ 项目功能规划与技术选型✅ DevEco Studio环境配置✅ HarmonyOS项目结构详解✅ 关键配置文件说明✅ 分层架构设计✅ 核心配置初始化下一篇文章将讲解底部导航栏的实现包括多分类切换、状态管理等核心功能。系列文章导航下期预告 鸿蒙多功能工具箱开发实战(二)-底部导航栏实现相关资源HarmonyOS官方文档ArkTS语言参考