本文针对华为HarmonyOS智能穿戴产品（即 HUAWEI WATCH 3） 开发了一款运动健康类的游戏化APP——Fitness，旨在通过游戏化的方式，提升用户运动动机。

一. 客户端开发

开发环境： 客户端UI是基于HarmonyOS进行开发的，所以IDE使用的是华为的 DevEco-Studio 。

语言： 采用的编程语言是JavaScript，基于JS扩展的类Web开发范式的 方舟开发框架 。

核心功能：

1. 用户的虚拟形象陪伴用户一起做运动；
2. 每日运动目标（运动时间、消耗卡路里）；
3. 运动中时间、心率、消耗卡路里的记录；
4. 完成运动获取爱心奖励（可用于在慈善活动中捐献）；
5. 合作：与好友一起运动，共同达成目标，获取奖励；
6. 挑战、徽章：完成运动挑战，获取徽章或其他奖励；

1. 创建项目（Create Project）

2. 项目结构

（1）各功能模块页面存放在pages文件夹中，每个页面都由.hml、.css、.js三个同名文件组成；

（2）图片资源存放在common/images文件夹中；

3. 功能模块介绍

3.1 登录页 login

用户输入账号密码，点击登录按钮进行登录。

（1）登录失败：提示“用户名或密码错误”。

（2）登录成功：跳转到首页 index。

3.2 首页 index

首页外圈黄色进度条是用户今日的运动时间进度。

首页中间由一个三页的Swiper组成，滑动可以切换页面：最左侧的运动页、最中间的目标页、最右侧的活动页。

（1）目标页：从上到下依次是用户虚拟形象、时钟（当前时间）、用户今日运动消耗的卡路里进度（目前已消耗卡路里/目标消耗卡路里）。

（2）运动页：最上方是开始运动按钮，点击可以选择要做的运动类型 [跳转到 choosesport ] 之后开始记录此次运动。按钮下方是最近的五条运动记录列表，可以上下滑动查看。

（3）活动页：最上方是用户当前参与合作的进度（若用户当前没参加任何合作，则该处显示的是开始合作按钮，点击开始合作按钮可以选择合作目标 [跳转到 chooseteamgoal ] 和要合作的好友，开启一次合作）。中间是系统最新发起的挑战，包括挑战名称、挑战描述。最下方是用户最近获得的八枚徽章列表，可以左右滑动查看。

3.3 选择运动类型页 choosesport

在首页的运动页点击开始运动后，进入选择运动类型页，该页主要由一个picker组成，用户选择自己要做的运动类型，点击确定即可开始运动，跳转到运动中页 sporting。

3.4 运动中页 sporting

运动中页显示用户虚拟角色、运动时长、消耗卡路里、当前心率。下方三个按钮分别为“取消”（点击后跳转回首页 index，不记录此次运动）、”暂停“（暂停运动时长记录和卡路里记录）、”完成“（完成此次运动，点击后跳转到运动结束页 sportend，记录此次运动）。

3.5 运动结束页 sportend

显示此次运动的时间、消耗的卡路里，点击确定按钮跳转到首页 index。

3.6 选择合作目标页 chooseteamgoal

在首页的活动页点击开始合作后，进入选择合作目标页，该页主要由一个双列picker组成，用户选择目标的运动类型和目标的运动时间，点击下一步，跳转到选择合作好友页 chooseteam。

3.7  选择合作好友页 chooseteam

该页主要由一个picker组成，用户选择想要与之合作的好友，点击确定，跳转到首页 index的合作页，此时已经开始了与此好友的合作。

3. 源码

https://gitee.com/song-ddd/harmony-smartwatch-fitness https://gitee.com/song-ddd/harmony-smartwatch-fitness

二. 服务器端开发

开发环境： 服务器端API接口是基于Node.js进行开发的，IDE使用的是VSCode。

语言： 采用的编程语言是JavaScript，服务器框架是Koa，数据库是MongoDB。

核心接口：

1. 用户接口：登录注册、用户个人信息的增删改查、用户好友的增删查；
2. 运动接口：运动类型的增删改查、用户运动记录的增删查；
3. 合作接口：用户合作记录的增删改查；
4. 徽章接口：徽章类型的增删改查、用户获得徽章记录的增删查；
5. 挑战接口：挑战类型的增删改查、用户挑战记录的增删查；
6. 慈善接口：慈善活动的增删改查、用户参与慈善捐赠记录的增删查；

1. 创建项目（Create Project）

Vue2+Node.js前后端分离项目创建常用配置及踩坑点_番大茄子的博客-CSDN博客 Vue2+Node.js前后端分离项目创建常用配置及踩坑点 https://blog.csdn.net/SongD1114/article/details/123955511?spm=1001.2014.3001.5502 Node.js中使用Koa创建Web服务器、编写接口_番大茄子的博客-CSDN博客_koajs Koa (基于 Node.js 平台的下一代 web 开发框架 koa (koajs)是由 Express 原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架。使用 koa 编写 web 应用，通过组合不同的 generator，可以免除重复繁琐的回调函数嵌套，并极大地提升错误处理的效率。https://www.koajs.com.cn/ https://blog.csdn.net/SongD1114/article/details/124406361?spm=1001.2014.3001.5502

2. 项目结构

采用MVC设计模式划分各模块：models、controllers、routers

3. 数据库表

4. 源码
https://gitee.com/song-ddd/smartwatch-fitness https://gitee.com/song-ddd/smartwatch-fitness

1、基于鸿蒙操作系统的智能家居 app开发 。 2、基于鸿蒙操作系统的实验室管理 app开发 。 3、所有结合阿里云实现鸿蒙 app开发 的都能适用，当然，腾讯云、 华为 云等也可以参考本代码。 两个鸿蒙app源代码实现原理： 1、 源代码一（实现对设备开关的控制）：通过调用阿里云API实现对设备属性参数的设置，进而达到控制设备开关的效果。由此可见，不仅仅可以用来控制设备开关，设备的所有属性都可以参考本代码实现对其的设计。 2、源代码二（实现实时显示温湿度等数据）：通过调用阿里云API实现对设备属性参数历史的查询。 本资源的代码注释清晰，稍作修改便可实现出来 3-5.H arm onyOS 概述：下载与安装软件 3-6.H arm onyOS 概述：应用 开发 基础知识 3-7.H arm onyOS 概述：最全H arm onyOS 文档和社区资源使用技巧 4-1.生态案例：【 开发 者说】重塑经典，如何在H arm onyOS 手机上还原贪吃蛇游戏 4-2.生态案例：H arm onyOLabo涂鸦鸿蒙亲子版 4-3.生态案例：H arm onyOS 分镜头APP案例 4-4.生态案例：H arm onyOS 时光序历史学习案例 4-5.生态案例：H arm onyOS 先行者说 宝宝巴士携手H arm onyOS 共同打造儿童教育交互新体验 4-6.生态案例：H arm onyOS 智能农场物联网连接实践 4-7.生态案例：分布式 开发 样例，带你玩转多设备 4-8.生态案例： 华为 分布式日历应用 开发 实践 5-1.【Codelab】H arm onyOS 基于图像模块实现图库图片的四种常见操作 5-2.【CodeLab】手把手教你创建第一个手机“Hello World” 5-3.【Codelab】如此简单！一文带你学会15个H arm onyOS JS组件 5-4.【Codelab】懒人“看”书新法—鸿蒙语音播报，到底如何实现？ 5-5.【Codelab】基于AI通用文字识别的图像搜索，这波操作亮了 5-6.【Codelab】 开发 样例概览 6-1.技术解读之H arm onyOS 轻量JS 开发 框架与W3C标准差异分析 6-2.技术解读之H arm onyOS 驱动加载过程分析 6-3.技术解读之H arm onyOS 组件库使用实践 6-4.技术解读之 华为 架构师解读：H arm onyOS 低时延高可靠消息传输原理 6-5.技术解读之解密H arm onyOS UI框架 6-6.技术解读之如何从OS框架层面实现应用服务功能解耦 7-1.常见问题之H arm onyOS 元服务的设计与 开发 解析 7-2.常见问题之Java 开发 7-3.常见问题之JS 开发 7-4.常见问题之模拟器登录 7-5.常见问题之模拟器运行 7-6.常见问题之如何使用JsJava 开发 H arm onyOS UI 7-7.常见问题之应用配置 7-8.常见问题之预览器运行 8【视频合集】入门到进阶视频学习资料合集30+