📢 重磅福利！参与活动赢好礼，8月1日-12月31日等你来！
点击链接： 华为开发者学堂

简介

本文档为运动健康类HarmonyOS应用架构设计实践，提供运动健康类应用常见的首页、运动、发现、商城、我的等应用功能，帮助开发者快速构建一款运动健康类应用。

• Stage开发模型+声明式UI开发sh方式。
• 应用设备形态两种：手机和智慧屏端，规划两个Entry类型HAP包。
• APP大小可控，性能优先，无单独加载模块，模块全部采用HAR包。

应用布局

说明

实践应用框架代码运行图，开发者可以基于框架代码替换相关资源文件，以保证应用良好的使用体验。

应用首页采用各类APP常见页面导航布局。 首页底部导航包含首页、运动、发现、商城、我的五个功能入口，分别对应五个功能模块。 首页上部分是头像、使用攻略、设备管理、身体状况，中间是周报、运动计划、下部分是习惯。 运动页面提供运动计划、课程、跑步、运动排行榜。 商城页面上部分是标题和轮播图、中间是分类餐、下部分是推荐餐。 我的页面上部分个人头像、名称等，下部分是各种服务信息。

应用架构设计

模块划分

根据行业应用的功能，按照高内聚，低耦合的原则，常见应用功能以及职责划分模块如下，开发者在实际设计过程中，可以根据模块的复杂程度实际情况再进一步细分：

表1 模块划分

模块名称	功能点
首页	体重、体脂、趋势图、饮食、运动等身体健康指标展示
运动	运动计划指定、运动课程列表、跑步实时记录
发现	达人关注、微博、活动列表、知识库等功能
商城	减脂商城，包括商品列表、购物车、商品交易等
我的 IoT设备	我的数据、健康周报、我的设备、亲友、收藏、积分等 体脂秤、跳绳等IoT设备的UI及蓝牙连接功能实现

软件视图设计

应用分层模块类型划分指导，参见分层模块化实践。

• 产品定制层：本应用涉及手机端和智慧屏端，设计为两个HAP，包含页面框架、导航、手机独有资源等。
• 基础特性层：本应用将“首页”、“运动”、“发现”、“商城”、“我的” 等功能模块打包为HAR包，被上层产品组件引用。另外，为了体脂秤、跳绳等IoT设备可灵活扩展增加，在IoT设备的包目录，每个智能设备打包一个HAR包，封装设备的UI及蓝牙连接等内聚的功能。
• 公共能力层：本应用将“UI组件”、“基础工具”、“DFX”等基础公共模块打包为HAR包被上层业务组件引用，其中路由管理划分到公共组件。

图1 软件视图

逻辑视图设计

根据本应用功能的模块以及依赖，分解对基础服务以及三方的依赖，逻辑视图如下：

图2 逻辑视图

公共关键技术方案

介绍行业应用通用的公共关键技术，详见 公共关键技术方案。

行业关键技术方案

蓝牙连接IoT设备

功能设计

运动健康应用需要通过蓝牙连接体脂秤、跳绳等IoT设备，蓝牙连接是此类应用的关键技术方案，首页->设备，点击“添加设备”，启动蓝牙扫描，识别蓝牙设备。

图3 蓝牙识别示意图

方案设计

基于Connectivity Kit（短距通信服务）的ble模块（低功耗蓝牙）实现，需要导入蓝牙BLE模块和蓝牙constant模块，然后实现扫描设备、创建GattClientDevice实例、订阅状态事件、连接蓝牙、断开蓝牙等步骤。

图4 时序图

代码参考

代码详情参见蓝牙扫描关键代码实现。

实时记录步数

功能设计

实时记录统计用户行走步数。常见页面路径：首页->运动->跑步，功能页面如下图所示：

图5 计步页面

方案设计

基于HarmonyOS的Sensor Service Kit（传感器服务），订阅SensorId.PEDOMETER（计步器）传感器，在回调函数（sensorCallback）中实时刷新步数。

代码参考

权限申请：ohos.permission.ACTIVITY_MOTION。

代码详情参见获取步数代码实现。

行业创新设计

说明

结合鸿蒙生态，针对行业的创新场景设计，开发者可以参考行业创新设计方案，实现创新场景代码。

运动健康应用接续

场景说明

随着全场景多设备的生活方式不断深入，用户拥有的设备越来越多，不同设备都能在适合的场景下提供良好的体验。运动健康类应用在室内，更适合在大屏上展示。

• 饮食场景：手机打开健康食谱的视频播放，视频从手机流转至智慧屏。
• 运动场景：手机打开跳绳等运动页面，运动页面从手机流转至智慧屏。

在HarmonyOS中，支持跨多设备的应用接续：指当用户在一个设备上操作某个应用时，可以在另一个设备的同一个应用中快速切换，并无缝衔接上一个设备的应用体验。

创新设计

利用HarmonyOS跨端流转能力，运动健康应用可以从手机接续到大屏。参见应用接续开发指导。

图6 手机接续到大屏效果示意图

应用框架代码

说明

本篇代码非应用的全量代码，只包括应用的部分框架代码。

本框架代码中登录验证模块，只是UI能力，任意用户名，密码可登录，开发者自行补齐相关校验。

代码运行环境

软件要求

• DevEco Studio版本：DevEco Studio 5.0.1 Release及以上。
• HarmonyOS SDK版本：HarmonyOS 5.0.1 Release SDK及以上。

硬件要求

• 设备类型：华为手机。
• HarmonyOS系统：HarmonyOS 5.0.1 Release及以上。

环境搭建

• 安装DevEco Studio，详情请参考使用指南。

代码结构解读

业务强相关的公共模块作为独立的模块放在特性包中，主要包括：首页、运动、发现、商城、我的等。

• common目录:公共能力，包含数据管理，工具等。

• find目录：互动模块的资源管理文件，互动模块的常量，互动模块的UI模型。
• first 目录： 首页面，首页UI模型，首页模块常量。
• mine目录：我的模块公共组件，我的模块常量，我的模块的模型，我的模块的页面，我的模块资源管理。
• run目录：运动模块公共组件，运动模块常量，运动模块的模型，运动模块的页面，运动模块资源管理。
• shop目录：商城模块的公共组件，商城模块的公共资源。

1. ├── common/src/main/ets // 公共模块
2. │ ├── common
3. │ │ ├── compontents
4. │ │ │ └── CommonConstants.ets // 公共资源类
5. │ │ └── utils
6. │ │ ├── GlobalContext.ets // 上下文
7. │ │ ├── PreferencesUtil.ets // 工具类
8. │ │ └── Utils.ets // 工具类1
9. │ ├── model
10. │ │ ├── NavItemModel.ets // 基础数据
11. │ │ └── TaskInitList.ets // 基础信息
12. │ └── page
13. │ ├── AddDeviceDemo.ets // 添加设备
14. │ └── MyDevice.ets // 我的设备
15. ├── features
16. │ ├── find/src/main/ets
17. │ │ └── components
18. │ │ └── DiscoveryPage.ets // 发现页
19. │ ├── first/src/main/ets
20. │ │ └── view
21. │ │ ├── CustomDialogComponent.ets // 隐私弹窗
22. │ │ └── HomePageDemoOne.ets // 首页
23. │ ├── mine/src/main/ets
24. │ │ ├── model
25. │ │ │ ├── Mine.ets // 我的基础信息
26. │ │ │ ├── Myself.ets // 隐私政策基础信息
27. │ │ │ └── Set.ets // 设置基础信息
28. │ │ ├── pages
29. │ │ │ ├── CommonNew.ets // 第三方共享信息清单
30. │ │ │ ├── HealthReport.ets // 健康报告
31. │ │ │ ├── HeartMonitoring.ets // 监康监测
32. │ │ │ ├── MessagePage.ets // 客服与消息
33. │ │ │ ├── MinePage.ets // 我的
34. │ │ │ ├── MyselfPage.ets / /隐私政策
35. │ │ │ ├── SecertPage.ets // 用户隐私数据清单
36. │ │ │ └── SetPage.ets // 设置
37. │ │ └── view
38. │ │ ├── ListInfo.ets // 我的下部分列表
39. │ │ ├── MyselfInfo.ets // 隐私下部分列表
40. │ │ ├── SetInfo.ets // 设置下部分列表
41. │ │ └── UserBaseInfo.ets // 我的上部分
42. │ ├── run/src/main/ets
43. │ │ └── pages
44. │ │ └── ListDemoOne.ets // 运动
45. │ └── shop/src/main/ets
46. │ └── components
47. │ └── SwiperDemo01.ets // 商城
48. ├── IoT
49. │ └── weightscale/src/main/ets
50. │ ├── components
51. │ │ └── mainpage
52. │ │ └── MainPage.ets
53. │ └── view
54. │ └── DeviceListPageOne.ets
55. └── products
56. ├── phone/src/main/ets
57. │ ├── common
58. │ │ └── utils
59. │ │ ├── GlobalContext.ets // 上下文
60. │ │ └── PreferencesUtil.ets // 工具类
61. │ ├── entryability
62. │ │ └── EntryAbility.ets // 程序入口
63. │ ├── pages
64. │ │ ├── CancelAccount.ets // 注销账户
65. │ │ ├── ChangeIphone.ets // 修改手机号
66. │ │ ├── ChangePassagewordPage.ets // 修改密码
67. │ │ ├── LauncherPage.ets // 启动页
68. │ │ ├── LoginPage2.ets // 登录页面
69. │ │ ├── MainPage.ets // tab页
70. │ │ ├── PhonePage.ets // 一键登录
71. │ │ ├── RegisterPage.ets // 注册
72. │ │ ├── RetrievePassword.ets // 修改密码
73. │ │ ├── SecertPage.ets // 修改密码
74. │ │ ├── SureCancel.ets // 注销
75. │ │ └── VerifyPage.ets // 验证码登录
76. │ └── utils
77. │ └── PermissionsUtil.ets // 工具类
78. └── smartscreen // 智慧屏

蓝牙扫描代码实现

使用Connectivity Kit中的蓝牙扫描能力。

1. // common\src\main\ets\page\AddDeviceDemoOne.ets
2. import { ble } from '@kit.ConnectivityKit';
3. let scanFilter: ble.ScanFilter = {
4. };
5. let scanOptions: ble.ScanOptions = {
6. interval: 1000,
7. dutyMode: ble.ScanDuty.SCAN_MODE_LOW_LATENCY,
8. matchMode: ble.MatchMode.MATCH_MODE_STICKY,
9. }
10. ble.startBLEScan([scanFilter], scanOptions);

开启订阅BLE设备发现：

1. // common\src\main\ets\page\AddDeviceDemoOne.ets
2. ble.on('BLEDeviceFind', (data: Array<ble.ScanResult>) => {
3. if(data[0]['deviceName'] == 'lee' && data[0].connectable && this.deviceIds.getIndexOf(data[0].deviceId) < 0){
4. this.deviceIds.add(data[0].deviceId)
5. console.info('scan:' + data[0]['deviceName'])
6. let b = generateRandomNumber(26,30)
7. let aone = new CommodityOne(data,'app.media.img_'+b)
8. this.commodityDataOne.push(aone)
9. this.commodityDataOne.reverse()
10. }
11. });

连接蓝牙设备关键代码：

1. // common\src\main\ets\page\AddDeviceDemoOne.ets
2. this.gattClient = ble.createGattClientDevice(device. deviceId);
3. this.gattClient.connect()
4. this.onBLEConnectionStateChange(device)

需要使用蓝牙设备的deviceId去获取连接实例，连接之后要开启蓝牙状态监听，代码如下：

1. // common\src\main\ets\page\AddDeviceDemoOne.ets
2. this.gattClient.on('BLEConnectionStateChange', (state: ble.BLEConnectionChangeState) => {
3. let deviceId = state.deviceId;
4. this.ConnectedDeviceId = state.deviceId;
5. this.connectState = state.state;
6. if(state.state == constant.ProfileConnectionState.STATE_CONNECTED){
7. this.connectedDevicceMap.set(device.deviceName, device)
8. if(this.deviceList.indexOf(device.deviceName) < 0){
9. this.deviceList.push(device.deviceName)
10. }
11. }
12. })

需要在配置Sensor Service Kit（传感器服务)文件module.json5里添加相机权限：需要权限ohos.permission.ACCESS_BLUETOOTH，参见应用权限列表。

获取步数代码实现

使用Sensor Service Kit（传感器服务)能力。订阅加速度传感器数据。需要配置权限ohos.permission.ACCELEROMETER。

1. // features\run\src\main\ets\pages\ListDemoOne.ets
2. sensor.on(sensor.SensorId.PEDOMETER, (data: sensor.PedometerResponse) => {
3. this.stepNum = data.steps ? data.steps : 0;
4. }, { interval: 100000000 });

其中

• type传感器类型，该值固定为SensorId.PEDOMETER 计步传感器。
• callback回调函数，异步上报的传感器数据固定为PedometerResponse。
• option可选参数列表，用于设置传感器上报频率，默认值为200000000ns。

代码下载链接

运动健康示例代码.zip

• 关键场景示例
• 行业常见问题