起点课堂会员权益
职业体系课特权
线下行业大会特权
个人IP打造特权
30+门专项技能课
1300+专题课程
12场职场软技能直播
12场求职辅导直播
12场专业技能直播
会员专属社群
荣耀标识【精华+1】HarmonyOS官方模板优秀案例（第11期：商务办公 · 办公应用）
鸿蒙生态为开发者提供海量的HarmonyOS模板/组件，助力开发效率原地起飞
★ 一键直达生态市场组件&模板市场 , 快速应用DevEco Studio插件市场集成组件&模板 ★
覆盖20+行业，点击查看往期案例汇总贴，持续更新，点击收藏！一键三连！常看常新！
【第11期】商务办公 · 办公应用
概述
行业洞察
行业诉求：
-
- 关注用户业务重点与痛点差异：针对不同规模、不同行业、不同职能的团队，提供适配其工作流特性的功能与服务，实现降本增效与协同敏捷的核心价值。
- 具备智能分析与流程自动化能力：基于AI与大模型技术实现自动化能力，包括：自动生成会议纪要、优化文档内容、一键生成演示文稿等内容生成，自动分析报表数据，生成可视化图表数据分析辅助等。
- 多端无缝协同与数据连贯能力：实现手机、平板、PC、Web端的数据、文件与进度实时互通，确保工作流的连续性。
- 集成、安全与可扩展的生态能力：提供丰富的API和连接器，构建一体化的工作台。端到端的数据加密、精细化的权限管控、操作日志审计，保障企业核心数字资产安全。
行业常用三方SDK
SDK链接：
深信服VPN SDK、天融信VPN SDK、腾讯微信SDK、网易云信IM SDK、融云 IMLib、腾讯视频会议SDK、融云CallLib、高德地图SDK、契约锁物理用印、百度人脸识别SDK
说明：“以上三方库及链接仅为示例，三方库由三方开发者独立提供，以其官方内容为准”
案例概览（下载模板）
基于以上行业分析，本期将介绍鸿蒙生态市场商务办公类行业模板——商务办公应用模板，为行业提供常用功能的开发案例，模板主要分打卡、待办、日程、我的四大模块。
- Stage开发模型 + 声明式UI开发范式。
- 分层架构设计 + 组件化拆分，支持开发者在开发时既可以选择完整使用模板，也可以根据需求单独选用其中的业务组件。
- 本模板已集成华为账号、地图、日历等服务，只需做少量配置和定制即可快速实现华为账号的登录、考勤打卡、待办和日程管理等功能。
模板主要页面及核心功能如下所示：
办公考勤模板
|– 打卡
| |– 打卡
| |– 打卡记录查看
| |– 快捷打卡设置
|– 待办
| |– 待处理列表
| | | └– 搜索
| |– 已处理列表
| | | └– 搜索
| |– 待办创建
| | | └– 附件上传
| |– 待办修改
| | |– 待办删除
| | |– 附件上传
| | └– 子代办创建
|– 日程
| |– 搜索
| |– 月日历视图
| |– 周日历视图
| |– 日程创建
| | | └– 地图选点
| └– 日程详情
| └– 日程删除
| └– 日程修改
| └– 地图选点
└– 我的
|– 用户信息
└– 关于我们
应用架构设计
分层化模块设计
产品定制层：专注于满足不同设备或使用场景的个性化需求，作为应用的入口，是用户直接互动的界面。
本实践支持直板机，为单HAP包形式，包含路由根节点、底部导航栏等。
基础特性层：用于存放相对独立的功能UI和业务逻辑实现。
本实践的基础特性层将应用底部导航栏的每个选项拆分成一个独立的业务功能模块。
每个功能模块都具备高内聚、低耦合、可定制的特点，支持产品的灵活部署。
公共能力层：存放公共能力，包括公共UI组件、数据管理、外部交互和工具库等共享功能。
本实践的公共能力层分为公共基础能力和可分可合组件，均打包为HAR包被上层业务组件引用。
公共基础能力包含日志、文件处理等工具类，公共类型定义，网络库，以及弹窗、加载等公共组件。
可分可合组件将包含行业特点、可完全自闭环的能力抽出独立的组件模块，支持开发者在开发中单独集成使用，详见业务组件设计章节。
本模板详细工程结构可见工程结构章节。
业务组件设计
为支持开发者单独获取特定场景的页面和功能，本模板将功能完全自闭环的部分能力抽离出独立的行业组件模块，不依赖公共基础能力包，开发者可以单独集成，开箱即用，降低使用难度。
行业场景技术方案
考勤打卡功能
1）场景说明
提供员工考勤打卡服务，支持自动定位、打卡状态管理、打卡记录查看等功能。
2）技术方案
- 集成LocationUtil获取用户位置信息，转换为地址信息。
- 使用preferences存储服务卡片ID和快速打卡设置。
- 通过ServiceCardNotificationUtil实现与服务卡片的数据同步。
- 集成VibratorUtil在打卡时提供振动反馈。
服务卡片支持
1）场景说明
提供快捷打卡服务卡片，支持在桌面直接查看打卡状态和快速打卡。
2）技术方案
- 使用@Entry(storageLocal)和@LocalStorageProp实现卡片数据持久化。
- 通过CardListComponent构建可复用的卡片列表组件。
- 集成postCardAction实现卡片点击跳转到主应用。
日历日程选择
1）场景说明
提供完整的日历视图，支持月视图/周视图切换、日程显示、日期选择等功能。
2）技术方案
- 使用Flex+ForEach动态渲染日期网格。
- 支通过visibility属性控制农历和标记点的显示。
- 集成PanGesture实现左右滑动切换月份/周。
- 点击日期触发changeSelectDay事件，更新选中状态。
模板代码
工程结构（下载模板）
详细代码结构如下所示：
office_attendance
|- commons // 公共层
| |- commonlib/src/main/ets // 公共工具模块(har)
| | |- constants
| | | CheckInStatus.ets // 登录状态常量
| | | CommonContants.ets // 公共常量
| | | CommonEnum.ets // 公共枚举
| | └- utils
| | | AccountUtil.ets // 账号管理工具
| | | BreakpointType.ets // 断点类型
| | | DataPreferencesUtils.ets // 本地存储工具
| | | DateUtil.ets // 日志工具
| | | FormatUtil.ets // 日历、图片等格式管理工具
| | | GlobalRegister.ets // 全局对象注册容器
| | | LocationUtil.ets // 定位管理工具
| | | Logger.ets // 日志管理工具
| | | PermissionStatus.ets // 权限状态工具
| | | RouterModule.ets // 路由管理类
| | | StringUtil.ets // 字符串工具
| | | VibratorUtil.ets // 打卡震动工具
| | | WindowUtil.ets // 窗口管理工具
| | |- viewmodel
| | | AppStorageData.ets // 应用公共数据类型
| | | MainEntryVM.ets // 路由工具
| |
| |- componentlib/src/main/ets // 公共组件模块(har)
| | └- components
| | | BlankBackground.ets // 弹框背景组件
| | | CalenderView.ets // 日历组件
| | | CustomDialog.ets // 弹框组件
| | | TitleBar.ets // 公共头组件
| | └- types
| | DateElement.ets // 年月日数据类型
| | DateTimeElement.ets // 年月日时分秒数据类型
| |
| └- network/src/main/ets // 网络模块(har)
| |- apis // 网络接口
| |- mocks // 数据mock
| |- models // 网络库封装
| └- types // 请求和响应类型
|
|- product // 应用层
| └- phone/src/main/ets // 主包(hap)
| |- constants
| | Constants.ets // 导航常量
| |- entryability
| | EntryAbility.ets // 应用入口页
| |- pages
| | Login.ets // 账号登录页面
| | MainEntry.ets // 主页面
| |- phoneformability
| | PhoneFormAbility.ets // 打卡卡片
| └- servicecard
| |- pages
| | AttendanceCard.ets // 考勤组件
| |- view
| | CardListComponent.ets // 考勤记录组件
| └- viewmodel
| CardListParameter.ets // 考勤记录参数
|
└- scenes // 特性场景层
|- account/src/main/ets // 账号场景组件（har）
| |- accountbinding
| | About.ets // 关于页面
| | LoginView.ets // 账号登录页
| | MineView.ets // 我的主页面
| └- api
| RequestProxy.ets // 登录接口代理对象
|- agency/src/main/ets // 账号绑定场景组件（har）
| |- agency // 常量
| | └- components
| | AgencyTaskCalender.ets // 待办时间设置组件
| | AttachUpload.ets // 待办附件上传组件
| | PlanTimeSetting.ets // 待办计划时间组件
| | TimeSelector.ets // 待办计划时间选择组件
| | AddAgencyTask.ets // 待办新增页面
| | AgencyTaskListItem.ets // 待办列表组件
| | EditAgencyTask.ets // 待办编辑页面
| | AgencyTaskView.ets // 待办主页面
| |- api // 待办接口代理
| └- types // interface类型定义
|- checkin/src/main/ets // 签到场景组件（har）
| |- api // 签到接口代理
| |- checkin
| | |- components
| | | CheckInComponent.ets // 签到组件
| | | CheckInHistory.ets // 签到历史组件
| | | CheckInHistoryItem.ets // 签到单行记录组件
| | | CheckInSettings.ets // 签到设置组件
| | | CheckInTimeDetail.ets // 签到详情组件
| | | CheckInTimeDetailItem.ets // 签到单条记录组件
| | └- util
| | CheckInChannelUtil.ets // 签到渠道工具
| | ServiceCardNotificationUtil.ets // 服务卡片通知工具
| | CheckInView.ets // 签到主页面
| └- types // interface类型定义
└- schedule/src/main/ets // 账号绑定场景组件（har）
|- api // 日程接口代理
|- constants // 常量
|- schedule
| └- components
| ReminderDialog.ets // 日程提醒组件
| ScheduleForm.ets // 日程新增/编辑表单组件
| ScheduleItem.ets // 日程记录卡片组件
| ScheduleTitle.ets // 日程头组件
| EditSchedule.ets // 日程编辑页面
| NewSchedule.ets // 日程新增页面
| ScheduleDetail.ets // 日程详情月面
| ScheduleView.ets // 日程主页面
|- types // interface类型定义
└- utils
ScheduleUtils.ets // 日程日历操作工具
关键代码解读
本篇代码非应用的全量代码，只包括应用的部分能力的关键代码。
- 日历渲染逻辑
| /@Builder
export struct CalenderView { build() { Column() { // 星期标题 Flex({ justifyContent: FlexAlign.SpaceBetween }) { ForEach(CommonConstants.WEEK_TITLE, (str: Resource, index: number) => { Text(str).fontSize(this.fontSize) }) }
// 日期网格 Flex({ wrap: FlexWrap.Wrap }) { ForEach(this.showDays.showDays, (weekDays: DateElement[]) => { Flex({ justifyContent: FlexAlign.SpaceBetween }) { ForEach(weekDays, (day: DateElement, index: number) => { Column() { Text(`${day.day}`) // 公历日期 Text(DateUtils.getCurrentLunarDayDesc(day)) // 农历日期 Column().visibility(this.isHasSchedule(day) ? Visibility.Visible : Visibility.None) } .onClick(() => { this.changeSelectDay(day); }) }) } }) } } }
|
- 打卡组件设计
| @Component
export struct CardListComponent { @Link checkInStatus: CheckInStatus | undefined; @Link cardListParameter: CardListParameter | undefined;
build() { Column() { // 标题区域 Row() { Image(this.cardListParameter.logo) Text(this.cardListParameter.title) }
// 自定义内容区域 List() { this.customBuilderParam(); }
// 打卡按钮 Button({ type: ButtonType.Capsule }) { Row() { if (this.checkInStatus === CheckInStatus.NOT_STARTED) { Text($r(‘app.string.servicecard_button_tip’)) } else if (this.checkInStatus === CheckInStatus.ON_GOING) { LoadingProgress() Text($r(‘app.string.servicecard_button_ongoing_tip’)) } } } .onClick(() => { // 打卡逻辑 }) } } } |
- 地理位置服务集成
| LocationUtil.getLocationName().then((address: string | undefined) => {
// 处理打卡逻辑 });
核心代码： @ComponentV2 export struct CheckInComponent { @Local checkInStatus: CheckInStatus = CheckInStatus.NOT_STARTED;
build() { Stack() { // 打卡动画圆圈 Shape() { this.circleBuilder(170, 0.1) // 外圈 this.circleBuilder(160, 1.0) // 内圈 }
// 打卡按钮交互 Column() .onClick(async () => { this.checkin(); }) } }
private checkin() { this.checkInStatus = CheckInStatus.ON_GOING; this.circleAnimator?.play();
// 获取位置并打卡 LocationUtil.getLocationName().then((address) => { if (address) { this.checkInStatus = CheckInStatus.FINISHED; this.addCheckInDetail(address); } }); } } |
以上代码展示了商务笔记应用的核心功能实现，包括日历选择、打卡位置确认、服务卡片等关键技术方案。
模板集成（下载模板）
本模板提供了两种代码集成方式，供开发者自由使用。
整体集成
开发者可以选择直接基于模板工程开发自己的应用工程。
模板代码获取：
- 通过IDE插件创建模板工程，开发指导。
- 通过生态市场下载源码，下载地址。
- 通过开源仓访问源码，仓库地址。
- 打开模板工程，根据README说明中的快速入门章节，将自己的应用信息配置在模板工程内，即可运行并查看模板效果。
- 对接开发者自己的服务器接口，转换数据结构，展示真实的云侧数据。
- 根据自己的业务内容修改模板，进行定制化开发。
按需集成
若开发者已搭建好自己的应用工程，但暂未实现其中的部分场景能力，可以选择取用其中的业务组件，集成在自己的工程中。
- 组件代码获取：
- 通过IDE插件创建模板工程，开发指导。
- 通过生态市场下载源码，下载地址。
- 下载组件源码，根据README中的说明，将组件包配置在自己的工程中。
- 根据API参考和示例代码，将组件集成在自己的对应场景中。
以上是第11期“办公应用”行业优秀案例的内容，更多行业敬请期待~
欢迎下载使用行业模板“点击下载”，若您有体验和开发问题，或者迫不及待想了解XX行业的优秀案例，欢迎在评论区留言，小编会快马加鞭为您解答~
同时诚邀您添加下方二维码加入“组件模板活动社群”，精彩上新&活动不错过！
- 目前还没评论，等你发挥！
