星光不负，码向未来。本文记录了一个习惯养成类应用从零开始，基于 uni-app 开发并成功上架华为应用市场的完整历程，希望能为正在探索鸿蒙开发的开发者提供一些参考。
一、缘起：为什么选择 uni-app + 鸿蒙
鸿蒙生态快速发展，HarmonyOS NEXT 的发布让原生应用开发成为趋势。作为一个独立开发者，我面临一个选择：是学习全新的 ArkTS 开发，还是利用现有的技术栈快速进入鸿蒙生态？
最终，我选择了 uni-app。原因很简单：
开发效率：我已经熟悉 Vue3 和前端开发，uni-app 让我可以复用现有技能，快速上手
跨平台能力：一套代码可以同时覆盖 iOS、Android 和鸿蒙，降低维护成本
生态成熟：uni-app 对鸿蒙的支持已经相对完善，官方文档和社区资源丰富
快速迭代：对于个人开发者来说，时间就是成本，uni-app 能让我更快地验证产品想法
于是，我决定用 uni-app 开发一款名为"习惯修仙"的习惯养成应用，并将其作为进入鸿蒙生态的敲门砖。
二、项目概述：习惯修仙
"习惯修仙"是一款将游戏化机制与习惯养成结合的应用。用户可以将早起、运动、阅读等日常行为映射为"功法"，通过完成习惯获得"修为"，提升"境界"，让枯燥的习惯养成变得有趣。
核心功能
功法管理：支持计时、计数、打卡三种类型的习惯任务
修为系统：完成任务获得修为，积累到一定程度可以"破境"
数据统计：记录每日、每周、每月的完成情况
华为账号登录：支持华为账号一键登录，数据云端同步
技术栈
框架：uni-app（Vue3）
状态管理：Pinia
样式：SCSS + 自定义主题系统
工具库：dayjs（时间处理）、echarts（数据可视化）
目标平台：HarmonyOS
三、开发实践：从零到一
3.1 项目初始化
使用 HBuilderX 创建 uni-app 项目后，第一件事就是配置鸿蒙相关设置。在 manifest.json 中，需要配置：
包名（bundleName）：这是应用的唯一标识，需要与华为开发者后台保持一致
图标和启动页：准备符合鸿蒙规范的图标和启动画面
签名配置：配置 Release 证书，用于正式打包
这里有一个小坑：包名一旦确定，后续修改会比较麻烦，建议在项目初期就规划好。
3.2 状态管理架构
习惯养成类应用的核心是数据管理。我使用 Pinia 构建了全局状态管理，主要包括：
用户数据：修为、境界、属性等游戏化数据
任务数据：功法列表、打卡记录、统计数据
应用配置：主题、设置、登录状态等
Pinia 的持久化插件让我可以轻松实现本地数据存储，这对于离线使用场景很重要。同时，我也预留了云端同步的接口，为后续的账号登录功能做准备。
3.3 页面开发与路由
uni-app 的页面路由系统与小程序类似，通过 pages.json 配置页面路径和导航栏样式。我设计了以下主要页面：
启动页：应用介绍和引导
首页：今日任务概览和快速操作
功法列表：展示所有习惯任务
功法详情：查看任务详情和历史记录
计时页面：专注计时功能
个人中心：用户信息和设置
在开发过程中，我发现 uni-app 的条件编译功能非常实用，因为开发的时候是在浏览器上调试，最后再在鸿蒙真机运行测试。通过 #ifdef APP-HARMONY 可以针对鸿蒙平台做特殊处理，比如使用鸿蒙原生的某些能力。
3.4 样式与主题系统
为了保持多端一致性，我建立了一套自定义主题系统。通过 SCSS 变量定义颜色、字体、间距等，然后在各个页面中统一使用。这样不仅保证了视觉一致性，也方便后续的主题切换功能。
四、华为能力集成：登录功能实战
4.1 为什么选择华为账号登录
最初我计划同时支持微信登录和华为账号登录，但考虑到开发成本和维护复杂度，最终只保留了华为账号登录。实际上，在审核过程中发现，华为应用市场并不会硬性要求必须有华为账号登录，只要应用功能完整、符合规范即可通过审核。
4.2 集成过程
华为账号登录的集成主要分为几个步骤：
开发者后台配置
在华为开发者联盟注册账号并创建应用
获取 Client ID
配置公钥指纹（与签名证书绑定）
申请 OAuth 权限（openid、profile 等）
manifest.json 配置
在 app-harmony.distribute.modules 中添加 uni-oauth 模块
配置华为的 client_id
代码实现
使用 uni.login({ provider: 'huawei' }) 获取授权码
通过 uni.getUserInfo({ provider: 'huawei' }) 获取用户信息
将授权码发送到后端验证，获取用户 token
更新本地登录状态
4.3 登录流程优化
为了提升用户体验，我做了以下优化：
登录状态持久化：用户登录后，下次打开应用自动保持登录状态
数据同步机制：登录后自动同步本地数据到云端，避免数据丢失
优雅降级：如果登录失败，应用仍可以以游客模式使用核心功能
五、上架准备：审核与发布
5.1 华为应用市场审核要点
华为应用市场的审核相对严格，我总结了几个关键点：
隐私政策与用户协议
必须提供完整的《用户协议》和《隐私政策》文档。我在登录页面底部添加了相关链接，并在首次启动时引导用户阅读。
权限申请规范
应用申请的权限必须在功能说明中明确用途，且不能强制申请。我的应用只在需要时才动态申请权限，并在申请时说明用途。
应用描述与截图
应用描述要清晰、真实，不能夸大功能。截图要展示应用的核心功能，不能使用误导性的图片。
5.2 审核经历
我的应用审核了两次才通过。第一次提交审核时，审核驳回原因是"功能交互简单，影响用户的总体体验"。确实，第一版本是有点简单。修复后重新提交，大约 3 个工作日就通过了审核。
5.3 上架后的数据与反馈
应用上架后，我持续关注用户反馈和数据表现：
下载量：初期增长较慢，但随着应用市场推荐和用户口碑传播，逐渐提升
用户反馈：通过应用内反馈功能收集用户意见，持续优化
六、经验总结与建议
6.1 开发过程中的关键决策
选择 uni-app 而非原生开发
这个决策让我节省了大量学习成本，能够快速将产品推向市场。虽然在某些性能敏感的场景下，原生开发可能更有优势，但对于大多数应用来说，uni-app 的性能已经足够。
使用 Pinia 而非 Vuex
Pinia 是 Vue3 官方推荐的状态管理方案，API 更简洁，TypeScript 支持更好。对于新项目，建议直接使用 Pinia。
本地数据优先，云端同步补充
考虑到网络环境和用户体验，我采用了本地数据优先的策略。用户即使不登录，也能正常使用所有功能。登录后，数据会自动同步到云端，实现多设备数据共享。
6.2 常见问题与解决方案
问题一：鸿蒙平台样式差异
不同平台的样式渲染可能有细微差异，解决方案是使用条件编译。也发现了 tabBar 配置 borderStyle 不生效的问题，已经反馈了 Bug：https://ask.dcloud.net.cn/question/215475
问题二：echarts 在鸿蒙平台不显示
应用使用了 echarts 进行数据可视化，在 web 端运行正常，但在鸿蒙平台上，图表完全不显示。排查后发现，echarts 在鸿蒙平台需要通过特殊方式引入。解决方案是 renderjs, 在页面中通过 script 标签引入 echarts 的 JS 文件。
6.3 给其他开发者的建议
提前规划，避免返工
在项目初期，就要规划好包名、证书、权限等关键配置。这些配置一旦确定，后续修改成本较高。
重视测试，特别是真机测试
模拟器测试只能发现部分问题，真机测试才能发现真实的性能和兼容性问题。建议在开发过程中定期进行真机测试。
关注审核规范，提前准备
华为应用市场的审核规范相对严格，建议在开发过程中就按照规范要求实现，避免上架时被退回。
持续优化，关注用户反馈
上架只是开始，不是结束。要持续关注用户反馈，优化产品功能和用户体验。
七、结语
从零开始到成功上架，这个过程充满了挑战，但也收获满满。uni-app 让我能够用熟悉的技术栈快速进入鸿蒙生态，而鸿蒙生态的快速发展也为开发者提供了新的机遇。
对于想要进入鸿蒙生态的开发者，我的建议是：不要犹豫，现在就是最好的时机。uni-app 已经为鸿蒙开发铺好了路，你只需要迈出第一步。
习惯修仙应用已在华为应用市场上架，欢迎体验和反馈。未来，我会继续优化"习惯修仙"应用，探索更多鸿蒙原生能力，比如推送通知、健康数据接入等。同时，我也会关注 HarmonyOS NEXT 的发展，为应用的长期发展做好准备。
希望这篇文章能为正在探索鸿蒙开发的开发者提供一些帮助，也期待在鸿蒙生态中看到更多优秀的应用。
4 个评论
要回复文章请先登录或注册
imseantang (作者)
imseantang (作者)
imseantang (作者)
loveCoding