前言
小伙伴们大家好，我是小溪，见字如面。近半年身边有不少朋友提及和问到关于uni-app和鸿蒙的问题，本人之前也没有接触过uni-app，对鸿蒙也了解的甚少，这次使用Antigravity编辑器基于uni-app x开发并上线了一款Harmony-Next应用记录一下开发过程。
前置条件
DevEco Studio 6.0
HBuilder X 4.87
准备工作
创建鸿蒙应用
到华为AppGallery Connect官网创建一个应用，用于后续服务集成、真机调试和上线。
AppGallery Connect官网：https://developer.huawei.com/consumer/cn/service/josp/agc/index.html#/
首次进入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证书请求文件
创建完成后，点击【下载】将证书下载到本地
接着切换到【Profile】创建描述文件，点击【添加】创建一个新的描述文件，选择应用、Profile名称、发布类型和对应证书
创建完成后，点击【下载】将描述文件下载到本地，至此证书准备工作就算完成了
uni-app项目配置
uni-app目前支持 uni-app 和 uni-app x，uni-app x是下一代uni-app，包括uts语言、uvue渲染引擎、uni的组件和API、以及扩展机制。
uni-app官网地址：https://doc.dcloud.net.cn/uni-app-x
创建uni-app x项目
打开HBuilder X，点击【新建】【项目】创建一个新项目
选择项目路径，输入项目名称，注意勾选【uni-app x】选项，点击【创建】创建项目
创建完成后，我们将得到如下文件结构的项目
项目配置
打开项目的【manifest.json】文件，切换到【鸿蒙App配置】，填写应用包名、配置证书、图标配置和启动图配置
发布证书配置如下所示，调试证书配置类似只是选择的证书和描述文件是对应调试的文件
配置完成后，证书配置状态会显示已配置
项目开发
项目开发部分就比较容易了，主力还是AI，可以类似如下提示词+Vibe Coding完成项目开发，这里就不具体展开了
# 跳跳糖启蒙屋 - 产品需求规格说明书 (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和鸿蒙开发的小伙伴也可以多多交流。
友情链接
https://developer.huawei.com/consumer/cn/deveco-studio
https://www.dcloud.io/hbuilderx.html
https://doc.dcloud.net.cn/uni-app-x
点击关注，及时接收最新消息
