从新建文件夹开始，用一个项目实战讲透uni-app鸿蒙开发到上架全流程(多图、细节)

分类：鸿蒙Next

鸿蒙next 鸿蒙征文

一、前言

用一个实战出发，结合自身从开发到上架的全过程经验，尽可能细致地描述每一个“关键步骤”。不管是刚接触鸿蒙开发的新手，还是已有经验的开发者，都希望能从本篇文章中受益。

需求制定
要开发一个应用，首先要明白自己想要做什么。这包括确定应用的功能、用户需求等。只有明确了需求，开发应用才能有方向。可以参考多款竞品，也可以发给AI分析应用功能，如：我想要开发一款专注于健康饮食的应用，提供丰富的营养成分查询、多种健康计算工具、个性化食谱推荐等功能，帮助用户科学管理饮食健康。这时候就可以把需求发给AI帮忙分析落地功能
技术选型
uni-app 对鸿蒙的良好支持，选择使用 uni-app + Vue 3 作为开发框架。同时利用uni-ui官方组件库，快速搭建应用界面。

一、开发前的准备

在这一章节中，将讲述使用 uni-app 开发鸿蒙 App 的前置工作，供开发者参考。

1.1 开发环境的搭建

软件环境
- 操作系统：Windows 10
- 浏览器：版本 142.0.7444.60（正式版，64 位）
  
  说明：虽然是开发鸿蒙 App，但在一些样式调试或隐性数据操作中，先使用浏览器能更快定位问题。在 uni-app 的加持下，浏览器中的表现与鸿蒙上基本一致（除部分鸿蒙特性外）。
HBuilder X：4.76（截至发稿我已升级至 4.84，适配了很多鸿蒙相关更新，未更新的同学请及时更新）
DevEco Studio：5.1.1 Beta（实战项目环境）/ 6.0.0 Release（新项目推荐）

兼容性参考：官方文档（点此前往）
下载地址：DevEco Studio 下载（点此前往）

1.2 技术栈

- 前端框架：uni-app + Vue 3（Composition API，`<script setup>`）  
- UI 组件：uni-ui  
- 数据存储：Pinia（[参考文档](https://uniapp.dcloud.net.cn/tutorial/vue3-pinia.html#%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86-pinia)）

1.3 鸿蒙环境及模拟器

打开 DevEco Studio 并创建空白项目

点击【工具】→【设备管理器】选择一个 API 19 及以上的设备下载并安装

二、项目创建

2.1 创建项目

打开 HBuilder X：点击左上角【文件】→【新建】→【uni-app】→【uni-app 项目】
填写项目名称（建议英文或数字，不要使用中文）
选择框架：Vue 3（默认）
点击【完成】，创建项目
注意：
- 项目名称不能使用中文
- 项目必须使用 Vue 3
- 详见：注意事项（官方文档）

至此，你已经创建好了一个空的 uni-app 项目，现在可以先运行到模拟器上查看效果。

2.2 运行项目

在上述环节中，你已经下载好了一个模拟器，此时可在 DevEco Studio 的【设备管理器】中启动模拟器。

待模拟器启动完成以后，回到 HBuilder X：点击【项目】→【运行】→选择模拟器→【运行】。
win端选择强制继续运行

等待运行完成，你会看到应用已在模拟器中自动启动。

接下来就是完成代码的编写工作，以下是我的项目架构设计，采用经典的TabBar结构，完美适配鸿蒙设计规范

food-health/  
├── components/          # 自定义组件  
├── pages/              # 页面文件  
├── static/             # 静态资源  
│   ├── data/           # 数据文件  
│   ├── images/         # 图片资源  
│   └── styles/         # 样式文件  
│       ├── tailwind.scss  
│       └── iconfont.css  
├── utils/              # 工具函数  
│   ├── formatUtils.js  # 格式化工具  
│   └── helper.js       # 辅助函数  
├── uni_modules/        # uni-app 插件模块  
├── App.vue             # 应用入口  
├── main.js             # 主入口文件  
├── manifest.json       # 应用配置  
└── pages.json          # 页面路由配置