前言
小伙伴们大家好，我是小溪，见字如面。近半年身边有不少朋友提及和问到关于uni-app和鸿蒙的问题，本人之前也没有接触过uni-app，对鸿蒙也了解的甚少，这次使用Antigravity编辑器基于uni-app x开发并上线了一款Harmony-Next应用记录一下开发过程。
前置条件
- DevEco Studio 6.0
- HBuilder X 4.87
准备工作
创建鸿蒙应用
到华为AppGallery Connect官网创建一个应用，用于后续服务集成、真机调试和上线。
AppGallery Connect官网：developer.huawei.com/consumer/cn...
首次进入AppGallery Connect需要先进行登录授权，登录授权完成后即可进入AppGallery Connect首页
点击【开发与服务】，点击【添加项目】创建一个项目分组用于管理项目，后续会用到
回到AppGallery Connect首页，点击【证书、APP ID和Profile】切换到【APP ID】,点击【新建】创建一个App ID（应用包名）
选择应用类型，填写应用名称、应用包名信息，点击【下一步】
应用所属项目这里选择前面创建的项目分组
配置相关开发能力套件，配置完后保存
应用包名创建完后，切换到【App与元服务】，点击【新建发布】新建一个应用
- 应用包名：选择上一步创建的包名
- 应用名称：应用的中文名称
- 支持设备：应用支持的设备类型
- 默认语言：应用程序默认使用的语言
点击【确认】进入到应用详情，应用详情页面包含应用的相关配置，务必完善所有必填项，例如应用的图标、分类、标签等等
配置证书和Profile
证书和Profile是为鸿蒙应用真机开发调试、发布提供的配置，只有 私钥、证书 和 描述文件 完全匹配才能正确的构建和发布鸿蒙应用。
在创建证书和描述文件之前需要生成私钥和证书请求文件，打开DevEco Studio，点击【构建】【生成私钥和证书请求文件】
如果之前没有创建过p12文件，点击【New】新建一个，选择【Key store file】存储路径，输入 字符+数字 密码
⚠️注意：如果这里创建的p12文件不带 .p12后缀，可以手动添加后缀名（本人macOS系统需要手动添加才能正常创建和识别）
p12创建完成后会回显对应信息，此时还需要设置私钥的Alias（别名），可以按环境设置为 debugKey、releaseKey 也可以自定义为自己好记忆的别名
点击【Next】进入下一步，这里CSR的存储路径和p12的存储路径注意事项一样
点击【Finish】完成创建后，我们可以得到如图所示的文件目录
回到AppGallery Connect，点击【证书、APP ID和Profile】切换到【证书】，如果没有对应证书点击【新增证书】创建一个证书，填写证书名称，选择证书类型，选择在DevEco Studio中创建的 .csr证书请求文件
⚠️注意：如果这里创建的p12文件不带 .p12后缀，可以手动添加后缀名（本人macOS系统需要手动添加才能正常创建和识别）
创建完成后，点击【下载】将证书下载到本地
接着切换到【Profile】创建描述文件，点击【添加】创建一个新的描述文件，选择应用、Profile名称、发布类型和对应证书
创建完成后，点击【下载】将描述文件下载到本地，至此证书准备工作就算完成了
uni-app项目配置
uni-app目前支持 uni-app 和 uni-app x，uni-app x是下一代uni-app，包括uts语言、uvue渲染引擎、uni的组件和API、以及扩展机制。
uni-app官网地址：doc.dcloud.net.cn/uni-app-x
创建uni-app x项目
打开HBuilder X，点击【新建】【项目】创建一个新项目
选择项目路径，输入项目名称，注意勾选【uni-app x】选项，点击【创建】创建项目
创建完成后，我们将得到如下文件结构的项目
项目配置
打开项目的【manifest.json】文件，切换到【鸿蒙App配置】，填写应用包名、配置证书、图标配置和启动图配置
发布证书配置如下所示，调试证书配置类似只是选择的证书和描述文件是对应调试的文件
配置完成后，证书配置状态会显示已配置
项目开发
项目开发部分就比较容易了，主力还是AI，可以类似如下提示词+Vibe Coding完成项目开发，这里就不具体展开了
markdown
# 跳跳糖启蒙屋 - 产品需求规格说明书 (PRD)
| 项目 | 内容 |
| :--- | :--- |
| **应用名称** | 跳跳糖启蒙屋 |
| **目标用户** | 0-6岁学龄前儿童 |
| **开发技术** | HTML5 + CSS3 + Vanilla Javascript (无框架原生开发) |
| **屏幕方向** | **竖屏 (Portrait)** |
| **核心理念** | 先认知（输入），后逻辑（输出），护眼防沉迷 |
| **文档版本** | V1.0 (Final) |
---
## 1. 产品架构图 (Functional Map)
应用分为三大核心模式，难度呈阶梯状递增：
1. **基础模式 (Level 1)**：**认知输入**。通过多感官卡片学习事物名称、拼音和特征。
2. **进阶模式 (Level 2)**：**视觉逻辑**。通过游戏互动锻炼观察力、辨别力和分类能力。
3. **高级模式 (Level 3)**：**思维逻辑**。通过推理游戏锻炼因果关系、数理逻辑和规律排序。
---
## 2. 详细功能需求
### 2.1 基础模式：沉浸式认知 (Flashcards)
*此模式不设"通关解锁"，旨在自由探索与学习。*
* **交互形式**：大卡片展示 + 左右切换 + 点读互动。
* **内容分类**（7大类）：
* 颜色、形状、交通工具、动物世界、水果、蔬菜、人物/职业。
* **卡片元素构成**：
1. **核心视觉**：高清卡通图/实物图（居中，巨大）。
2. **文字信息**：
* **拼音**：位于汉字上方（如 `xióng māo`），等宽字体。
* **汉字**：正楷大字（如 `熊 猫`）。
3. **语音功能**：点击喇叭图标，播放标准普通话读音。
4. **知识拓展**：底部显示一句话简短描述（如"它有两个黑眼圈，最爱吃竹子"），支持点击朗读。
* **操作逻辑**：
* 点击"下一页/上一页"或左右滑动切换卡片。
* 学完该分类最后一张卡片时，弹出引导："学完啦！去进阶模式玩游戏吧？"
### 2.2 进阶模式：视觉观察游戏 (Visual Games)
*此模式引入"关卡解锁"机制。*
* **目标**：锻炼眼脑手协调与视觉辨析。
* **关卡设置**：每种玩法 12 关，难度递增。
* **玩法类型**：
1. **辨识题 (点一点)**：
* 语音指令："找出红色的气球"。
* 屏幕显示 3-4 个不同颜色的气球，点击正确的一个。
2. **找大小 (比一比)**：
* 屏幕显示大、中、小三个同类物体。
* 指令："哪一个是最大的？"
3. **影子配对 (拖一拖)**：
* 上方显示黑色剪影（目标），下方显示彩色物体（源）。
* 将彩色物体拖入对应的影子中。
4. **找不同 (眼力大挑战)**：
* 上下排列两张看似相同的图片，找出 1-3 处不同点。
### 2.3 高级模式：思维逻辑游戏 (Logic Games)
*此模式引入"关卡解锁"机制。*
* **目标**：锻炼推理、归纳和生活常识。
* **关卡设置**：每种玩法 12 关，难度递增。
* **玩法类型**：
1. **常识关联 (配对)**：
* **机制**：逻辑连线（替代记忆翻牌）。
* 场景：上方显示"下雨云朵"，下方选项"雨伞、墨镜、风扇"。
* 操作：将"雨伞"拖给"云朵"。
2. **规律排序 (填一填)**：
* 序列：`苹果 - 香蕉 - 苹果 - [?]`。
* 操作：在下方选项中选出下一个物体。
3. **部分猜整体 (推理)**：
* 显示"兔子的长耳朵"局部图。
* 提问："这是谁的耳朵？"
* 选项：兔子、猫、老虎。
### 2.4 护眼卫士 (System Feature)
* **触发机制**：应用启动后全局计时，累计 **20分钟** 强制触发。
* **表现形式**：
* 全屏覆盖绿色森林背景或闭眼休息插画。
* 文案："眼睛累啦，休息一下，看看远处吧~"
* **解锁方式**：
* 为了防止幼儿误关，采用**"长按按钮 3 秒"**解锁，或**"滑动解锁"**。
* 解锁后计时器归零，重新计时。有一点值得说明的是，如果项目中使用了加载HTML的场景，需要将HTML资源放到 hybrid/html 目录下
项目预览与调试
开发过程中预览与调试是必不可少的环节，HBuilder X中也提供了多样化的预览调试功能，使用uni-app开发的应用有个好处就是大部分功能都是可以直接在web中预览的。点击【运行】选择【运行到内置浏览器】可以在内置浏览器中直接预览效果
预览效果如下
鸿蒙模拟器预览仍需要借助DevEco Studio，打开DevEco Studio，点击【No Devices】选择【设备管理】进入设备管理页面
没有创建过模拟器，可以点击【新建模拟器】创建一个新的模拟器，创建完成后点击【启动】按钮启动模拟器
模拟器启动成功后，回到HBuilder X，点击【运行】【运行到鸿蒙】
选择模拟器，点击【运行】
运行成功后，效果如下：
应用打包
项目开发完成后就可以执行打包了，HBuilder X提供了方便的打包入口，点击【发行】【App-Harmony本地打包】选择【生成安装包】执行打包
打包完成后，在控制台会输出打出来的安装包路径
发布应用
进入应用详情，选择【版本信息】新建一个版本，点击【上传】会跳到【软件包管理】页面上传安装包
上传完成后，等待平台检测
检测完成后，再次点击【版本选取】选择上传的最新版本
补充应用截图、隐私协议及其他必填项
最后点击【提交审核】提交华为审核，审核完成后即可看到版本已上线状态
写到最后
审核完成即可在【华为商城】输入"跳跳糖启蒙屋"查找应用安装，安装完成后同意协议即可正常使用。跳跳糖启蒙屋是本人使用uni-app x + HTML 开发的首款Harmony-Next应用，欢迎小伙伴们下载体验，多提bug，本次只记录了uni-app开发鸿蒙应用的大致流程，还有很多细节未体现，对uni-app和鸿蒙开发的小伙伴也可以多多交流。
友情链接
友情提示
见原文：uni-app小白从0开发一款鸿蒙Next应用到上线
本文同步自微信公众号 "程序员小溪" ，这里只是同步，想看及时消息请移步我的公众号，不定时更新我的学习经验。友情提示友情提示