HarmonyOS鸿蒙Next官方模板优秀案例 （第5期：工具行业 · 日历应用） 💡 鸿蒙生态为开发者提供海量的HarmonyOS模板/组件，助力开发效率原地起飞 💡

★ 一键直达生态市场组件&模板市场 , 快速应用DevEco Studio插件市场集成组件&模板 ★

工具行业群英荟萃，是小而美应用的主要聚集赛道

本期介绍的案例是其中一类：日常刚需的日历应用

👉 覆盖20+行业，本帖以汇总形式持续更新中，点击收藏！一键三连！常看常新！

【第5期】工具行业 · 日历应用

一、概述

1.行业洞察

1）行业诉求：

• 日历类应用，未来竞争将聚焦于 AI 驱动的个性化体验、场景化生态构建及文化适配能力正从单一工具进化为连接工作、生活、社交的 “时间操作系统”。
• 商业模式是日历类应用的重要场景诉求，目前免费增值为主，差异化变现破局，如何结合小艺做个性化推荐是差异化的根本。
• 满足用户的进阶需求：社交协作，隐私保护。

2）行业常用三方SDK

说明：“以上三方库及链接仅为示例，三方库由三方开发者独立提供，以其官方内容为准”

2.案例概览（下载模板）

基于以上行业分析，本期将介绍鸿蒙生态市场生活服务类行业模板——日历应用模板，为行业提供常用功能的开发案例，模板主要分为万年历、黄历、和我的三大模块。

• Stage开发模型 + 声明式UI开发范式。
• 分层架构设计 + 组件化拆分，支持开发者在开发时既可以选择完整使用模板，也可以根据需求单独选用其中的业务组件。
• 本模板已集成华为账号等服务，只需做少量配置和定制即可快速实现华为账号的登录。

本模板主要页面及核心功能如下所示：

日历模板
 |-- 万年历
 |    |-- 日历选择
 |    |-- 吉日查询
 |    |-- 日期计算
 |    |-- 节日节气
 |    └-- 宜忌展示
 |-- 黄历
 |    |-- 日期切换
 |    |-- 宜忌展示
 |    |-- 五行、冲煞 
 |    |-- 彭祖百忌
 └-- 我的
 |     |-- 个人信息
 |     └-- 设置
 |       └-- 主题切换
 |       └-- 隐私协议
 |       └-- 用户协议 

二、应用架构设计

1.分层模块化设计

• 产品定制层： 专注于满足不同设备或使用场景的个性化需求，作为应用的入口，是用户直接互动的界面。
  • 本实践暂时只支持直板机，为单HAP包形式，包含路由根节点、底部导航栏等。
• 基础特性层： 用于存放相对独立的功能UI和业务逻辑实现。
  • 本实践的基础特性层将应用底部导航栏的每个选项拆分成一个独立的业务功能模块。
  • 每个功能模块都具备高内聚、低耦合、可定制的特点，支持产品的灵活部署。
• 公共能力层： 存放公共能力，包括公共UI组件、数据管理、外部交互和工具库等共享功能。
  • 本实践的公共能力层分为公共基础能力和可分可合组件，均打包为HAR包被上层业务组件引用。
  • 公共基础能力包含日志、文件处理等工具类，公共类型定义，网络库，以及弹窗、加载等公共组件。
  • 可分可合组件将包含行业特点、可完全自闭环的能力抽出独立的组件模块，支持开发者在开发中单独集成使用，详见业务组件设计章节。

2.业务组件设计

为支持开发者单独获取特定场景的页面和功能，本模板将功能完全自闭环的部分能力抽离出独立的行业组件模块，不依赖公共基础能力包，开发者可以单独集成，开箱即用，降低使用难度。

三、行业场景技术方案

1.个人信息

1）场景说明

支持华为账号一键登录及其他方式（账号密码登录）。

用户登录后展示昵称和头像，点击用户信息栏可进入用户主页，查看并编辑个人信息和历史动态。

支持添加重要提醒（日程、生日、纪念日、代办），更新提醒，删除提醒。

2）技术方案

• 华为账号一键登录
  • 通过Account Kit实现华为账号一键登录，并获取用户手机号，关联应用已有用户。
• 头像修改
  • 通过Scenario Fusion Kit提供的选择头像Button快速拉起头像选择页面，供用户完成华为账号头像或其他头像的选择与展示。
• 重要提醒
  • 通过@kit.CalendarKit提供的提供日历与日程管理能力将应用中的工作、生活中与时间相关的日程服务与系统日历进行集成，从而实现日程管理、事件创建、查询等功能。
• 主题切换
  • 通过全局主题对象，控制全局的主题颜色切换，并使用持久化存储当前主题选择。

3）代码参考

• 部分核心代码参见华为账号一键登录实现章节。

2.黄历

1）场景说明

• 支持根据日期查看当日黄历信息。
• 切换日期查询其他日期黄历。
• 根据选择日期查看今日宜今日忌。
• 支持根据选择的黄历查看白话文。

2）技术方案

根据万年历选择日期进行对应日期黄历的展示。

通过日历选择组件暴露的句柄，感知当前选择的日期，并通过句柄同步修改万年历对应的日期。

3）代码参考

• 部分核心代码参见黄历实现章节。

3.万年历

1）场景说明

支持日历查看，日期切换，设置周首日。

支持查看今日宜，今日忌。

支持实用工具查询（吉日查询，日期计算，节日节气）。

支持查看城市限行。

支持查看历史上的今天。

2）技术方案

• 日历查看
  • 通过使用Swiper组件结合计算每月的日期实现日期轮播查看。
• 头像修改
  • 通过Scenario Fusion Kit提供的选择头像Button快速拉起头像选择页面，供用户完成华为账号头像或其他头像的选择与展示。
• 实用工具
  • 使用工具结合DatePicker日期选择器，实现日期选择并根据条件计算。
• 城市限行
  • 通过申请位置权限，或者当前城市的限行车牌尾号，并进行展示。

3）代码参考

• 部分核心代码参见万年历实现章节。

四、模板代码

1.工程结构（下载模板）

详细代码结构如下所示：

Application
├──├──commons
│   ├──common                                // 公共能力层
│     ├──src/main/ets                        // 基础能力
│     │  └──components                       // 公共组件
│     │  └──dividerTmp                       // 下划线公共组件
│     │  └──https                            // 网络请求库
│     │  └──models                           // 公共接口常量
│     │  └──quickLogin                       // 华为账号一键登录
│     │  └──style                            // 公共样式
│     │  └──utils                            // 工具类
│     │  └──viewmodels                       // 接口层
│     └──Index.ets                           // 对外接口类
│  ├──router_module                          // 全局路由组件
├──├──components                             // 公共组件
│   ├──base_apis                             // 通用组件（模态框，弹窗，选择器等）
│   ├──base_calendar                         // 日历组件
│   ├──calendar_almanac                      // 黄历组件
│   ├──calendar_events                       // 重要提醒组件
│   ├──date_calculation                      // 日期计算组件
│   ├──festival_solar                        // 节日节气组件
│   ├──login_info                            // 登录组件组件
│   ├──vip_center                            // 开通会员组件
│   ├──traffic_restriction                   // 城市限行组件
│   ├──yiji_query                            // 宜忌查询组件
├──features                                  // 基础特性层
│  ├──almanac/src/main/ets                   // 黄历
│  │  ├──pages                               // 首页入口
│     │  ├──AlmanacView                      // 黄历入口
│  ├──almanac/src/main/resources             // 资源文件目录
│  ├──almanac/Index.ets                      // 对外接口类
│  ├──perpetual/src/main/ets                 // 万年历
│  │  ├──components                          // 万年历组件
│  │  ├──pages                               
│     │  ├──PerpetualCalendar                // 万年历组件入口
│  ├──perpetual/src/main/resources           // 资源文件目录
│  ├──perpetual/Index.ets                    // 对外接口类
│  ├──mine/src/main/ets                      // 我的（包含一键登录）
│  │  └──pages                               // 我的入口页
│     │  ├──MinePage                         // 登录
│  │  └──components                          // 我的页面入口
│  └──mine/src/main/resources                // 资源文件目录
└─product/entry/src/main   
   ├─ets
   │  ├─widget
   │  │  ├──pages            
   │  │      ├──WidgetCard.ets       // 服务卡片    
   │  ├─entryability
   │  │      ├──EntryAbility.ets             // 应用程序入口
   │  ├─page
   │  │  ├──Index.ets                        // 入口
   │  │  ├──PrivacyPage.ets                  // 隐私协议   
   │  │  ├──SafePage.ets                     // 隐私协议弹窗  
   │  │  ├──SplashPage.ets                   // 闪屏页        
   │  │  ├──TabContainer.ets                 // tab页入口
   └─resources

2.关键代码解读

本篇代码非应用的全量代码，