uni-app小白从0开发一款鸿蒙Next应用到上线

当前位置：点晴教程→知识管理交流 →『技术文档交流』

freeflydom

2026年1月14日 8:42 本文热度 331

前置条件

准备工作

创建鸿蒙应用

到华为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完成项目开发，这里就不具体展开了

# 跳跳糖启蒙屋 - 产品需求规格说明书 (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 秒”**解锁，或**“滑动解锁”**。
    *   解锁后计时器归零，重新计时。