HarmonyOS实战开发

软件开发实战：Java或Python项目实战 #生活技巧# #工作学习技巧# #技能培训课程#

介绍

本篇Codelab介绍了如何实现一个简单的健康生活应用，主要功能包括：

用户可以创建最多6个健康生活任务（早起，喝水，吃苹果，每日微笑，刷牙，早睡），并设置任务目标、是否开启提醒、提醒时间、每周任务频率。 用户可以在主页面对设置的健康生活任务进行打卡，其中早起、每日微笑、刷牙和早睡只需打卡一次即可完成任务，喝水、吃苹果需要根据任务目标量多次打卡完成。 主页可显示当天的健康生活任务完成进度，当天所有任务都打卡完成后，进度为100%，并且用户的连续打卡天数加一。 当用户连续打卡天数达到3、7、30、50、73、99天时，可以获得相应的成就。成就在获得时会以动画形式弹出，并可以在“成就”页面查看。 用户可以查看以前的健康生活任务完成情况。

本应用的运行效果如下图所示：

相关概念

@Observed 和 @ObjectLink：@Observed适用于类，表示类中的数据变化由UI页面管理；@ObjectLink应用于被@Observed装饰类的对象。 @Consume 和 @Provide：@Provide作为数据提供者，可以更新子节点的数据，触发页面渲染。@Consume检测到@Provide数据更新后，会发起当前视图的重新渲染。 Flex：一个功能强大的容器组件，支持横向布局，竖向布局，子组件均分和流式换行布局。 List：List是很常用的滚动类容器组件之一，它按照水平或者竖直方向线性排列子组件， List的子组件必须是ListItem，它的宽度默认充满List的宽度。 TimePicker：TimePicker是选择时间的滑动选择器组件，默认以00:00至23:59的时间区创建滑动选择器。 Toggle：组件提供勾选框样式、状态按钮样式及开关样式。 后台代理提醒：使用后台代理提醒能力后，应用可以被冻结或退出，计时和弹出提醒的功能将被后台系统服务代理。 关系型数据库（Relational Database，RDB）：一种基于关系模型来管理数据的数据库。

环境搭建

软件要求

DevEco Studio版本：DevEco Studio 3.1 Release。 OpenHarmony SDK版本：API version 9。

硬件要求

开发板类型：润和RK3568开发板。 OpenHarmony系统：3.2 Release。

环境搭建

完成本篇Codelab我们首先要完成开发环境的搭建，本示例以RK3568开发板为例，参照以下步骤进行：

获取OpenHarmony系统版本：标准系统解决方案（二进制）。以3.2 Release版本为例：

2.搭建烧录环境。

完成DevEco Device Tool的安装 完成RK3568开发板的烧录

3.搭建开发环境。

开始前请参考工具准备，完成DevEco Studio的安装和开发环境配置。 开发环境配置完成后，请参考使用工程向导创建工程（模板选择“Empty Ability”），选择JS或者eTS语言开发。 工程创建完成后，选择使用真机进行调测。

代码结构解读

本篇Codelab只对核心代码进行讲解。

├─entry/src/main/ets // 代码区

│ ├─common

│ │ ├─constants

│ │ │ └─CommonConstants.ets // 公共常量

│ │ ├─database

│ │ │ ├─rdb // 数据库

│ │ │ │ ├─RdbHelper.ets

│ │ │ │ ├─RdbHelperImp.ets

│ │ │ │ ├─RdbUtil.ets

│ │ │ │ └─TableHelper.ets

│ │ │ └─tables // 数据库接口

│ │ │ ├─DayInfoApi.ets

│ │ │ ├─GlobalInfoApi.ets

│ │ │ └─TaskInfoApi.ets

│ │ └─utils

│ │ ├─BroadCast.ets // 通知

│ │ ├─GlobalContext.ets // 全局上下文

│ │ ├─HealthDataSrcMgr.ets // 数据管理单例

│ │ ├─Logger.ets // 日志类

│ │ └─Utils.ets // 工具类

│ ├─entryability

│ │ └─EntryAbility.ets // 程序入口类

│ ├─model // model

│ │ ├─AchieveModel.ets

│ │ ├─DatabaseModel.ets // 数据库model

│ │ ├─Mine.ets

│ │ ├─NavItemModel.ets // 菜单栏model

│ │ ├─RdbColumnModel.ets // 数据库表数据

│ │ ├─TaskInitList.ets

│ │ └─WeekCalendarModel.ets // 日历model

│ ├─pages

│ │ ├─AdvertisingPage.ets // 广告页

│ │ ├─MainPage.ets // 应用主页面

│ │ ├─MinePage.ets // 我的页面

│ │ ├─SplashPage.ets // 启动页

│ │ ├─TaskEditPage.ets // 任务编辑页面

│ │ └─TaskListPage.ets // 任务列表页面

│ ├─service

│ │ └─ReminderAgent.ets // 后台提醒

│ ├─view

│ │ ├─dialog // 弹窗组件

│ │ │ ├─AchievementDialog.ets // 成就弹窗

│ │ │ ├─CustomDialogView.ets // 自定义弹窗

│ │ │ ├─TaskDetailDialog.ets // 打卡弹窗

│ │ │ ├─TaskDialogView.ets // 任务对话框

│ │ │ ├─TaskSettingDialog.ets // 任务编辑相关弹窗

│ │ │ └─UserPrivacyDialog.ets

│ │ ├─home // 主页面相关组件

│ │ │ ├─AddBtnComponent.ets // 添加任务按钮组件

│ │ │ ├─HomeTopComponent.ets // 首页顶部组件

│ │ │ ├─TaskCardComponent.ets // 任务item组件件

│ │ │ └─WeekCalendarComponent.ets // 日历组件

│ │ ├─task // 任务相关组件

│ │ │ ├─TaskDetailComponent.ets // 任务编辑详情组件

│ │ │ ├─TaskEditListItem.ets // 任务编辑行内容

│ │ │ └─TaskListComponent.ets // 任务列表组件

│ │ ├─AchievementComponent.ets // 成就页面

│ │ ├─BadgeCardComponent.ets // 勋章卡片组件

│ │ ├─BadgePanelComponent.ets // 勋章面板组件

│ │ ├─HealthTextComponent.ets // 自定义text组件

│ │ ├─HomeComponent.ets // 首页页面

│ │ ├─ListInfo.ets // 用户信息列表

│ │ ├─TitleBarComponent.ets // 成就标题组件

│ │ └─UserBaseInfo.ets // 用户基本信息

│ └─viewmodel // viewmodel

│ ├─AchievementInfo.ets // 成就信息

│ ├─AchievementMapInfo.ets // 成就map信息

│ ├─AchievementViewModel.ets // 成就相关模块

│ ├─BroadCastCallBackInfo.ets // 通知回调信息

│ ├─CalendarViewModel.ets // 日历相关模块

│ ├─CardInfo.ets // 成就卡片信息

│ ├─ColumnInfo.ets // 数据库表结构

│ ├─CommonConstantsInfo.ets // 公共常量信息

│ ├─DayInfo.ets // 每日信息

│ ├─GlobalInfo.ets // 全局信息

│ ├─HomeViewModel.ets // 首页相关模块

│ ├─PublishReminderInfo.ets // 发布提醒信息

│ ├─ReminderInfo.ets // 提醒信息

│ ├─TaskInfo.ets // 任务信息

│ ├─TaskViewModel.ets // 任务设置相关模块

│ ├─WeekCalendarInfo.ets // 日历信息

│ └─WeekCalendarMethodInfo.ets // 日历方法信息

└─entry/src/main/resources // 资源文件夹

应用架构分析

本应用的基本架构如下图所示，数据库为其他服务提供基础的用户数据，主要业务包括：用户可以查看和编辑自己的健康任务并进行打卡、查看成就。UI层提供了承载上述业务的UI界面。

应用主页面

本节将介绍如何给应用添加一个启动页，设计应用的主界面，以及首页的界面开发和数据展示。

启动页

首先我们需要给应用添加一个启动页，启动页里我们需要用到一个定时器来实现启动页展示固定时间后跳转应用主页的功能，效果图如下：

打开应用时会进入此页面，具体实现逻辑是：

通过修改/entry/src/main/ets/entryability里的loadContent路径可以改变应用的入口文件，我们需要把入口文件改为我们写的SplashPage启动页面。

// EntryAbility.ets

windowStage.loadContent('pages/SplashPage', (err, data) => {

if (err.code) {...}

Logger.info('windowStage','Succeeded in loading the content. Data: ' + JSON.stringify(data));

});

在SplashPage启动页的文件里通过首选项来实现是否需要弹“权限管理”的弹窗，如果需要弹窗的情况下，用户点击同意权限后通过首选项对用户的操作做持久化保存。相关代码如下：

import data_preferences from '@ohos.data.preferences';

onConfirm() {

let preferences = data_preferences.getPreferences(this.context, H_STORE);

preferences.then((res) => {

res.put(IS_PRIVACY, true).then(() => {

res.flush();

Logger.info('SplashPage','isPrivacy is put success');

}).catch((err: Error) => {

Logger.info('SplashPage','isPrivacy put failed. Cause:' + err);

});

})

this.jumpAdPage();

}

exitApp() {

this.context.terminateSelf();

}

jumpAdPage() {

setTimeout(() => {

router.replaceUrl({ url: 'pages/AdvertisingPage' });

}, Const.LAUNCHER_DELAY_TIME);

}

aboutToAppear() {

let preferences = data_preferences.getPreferences(this.context, H_STORE);

preferences.then((res) => {

res.get(IS_PRIVACY, false).then((isPrivate) => {

if (isPrivate === true) {

this.jumpAdPage();

} else {

this.dialogController.open();

}

});

});

}

APP功能入口

我们需要给APP添加底部菜单栏，用于切换不同的应用模块，由于各个模块之间属于完全独立的情况，并且不需要每次切换都进行界面的刷新，所以我们用到了Tabs，TabContent组件。

本应用一共有首页（HomeIndex），成就（AchievementIndex&#x

网址：HarmonyOS实战开发 https://www.yuejiaxmz.com/news/view/369713

相关内容

HarmonyOS实战开发：Divider（基础组件）
HarmonyOS Next 智能家居控制系统实战开发
HarmonyOS 移动应用开发技术
HarmonyOS Next 加密文件存储实战：保障数据安全
用 HarmonyOS ArkUI 来开发一个健康饮食应用
【HarmonyOS第一课：运动健康实战】我的运动生活
HarmonyOS Next 助力在线教育：网络优化实战案例
HarmonyOS Next 加密通信实战：打造安全聊天应用
HarmonyOS Connect
HarmonyOS：开发计时器应用——正计时

随便看看