鸿蒙生态为开发者提供海量的HarmonyOS模板/组件，助力开发效率原地起飞
★ 一键直达生态市场组件&模板市场 , 快速应用DevEco Studio插件市场集成组件&模板 ★
覆盖20+行业，点击查看往期案例汇总贴，持续更新，点击收藏！一键三连！常看常新！
【第11期】商务办公 · 办公应用
行业诉求：
行业常用三方SDK
SDK链接：
深信服VPN SDK、天融信VPN SDK、腾讯微信SDK、网易云信IM SDK、融云 IMLib、腾讯视频会议SDK、融云CallLib、高德地图SDK、契约锁物理用印、百度人脸识别SDK
说明：“以上三方库及链接仅为示例，三方库由三方开发者独立提供，以其官方内容为准”
基于以上行业分析，本期将介绍鸿蒙生态市场商务办公类行业模板——商务办公应用模板，为行业提供常用功能的开发案例，模板主要分打卡、待办、日程、我的四大模块。
模板主要页面及核心功能如下所示：
办公考勤模板
|– 打卡
| |– 打卡
| |– 打卡记录查看
| |– 快捷打卡设置
|– 待办
| |– 待处理列表
| | | └– 搜索
| |– 已处理列表
| | | └– 搜索
| |– 待办创建
| | | └– 附件上传
| |– 待办修改
| | |– 待办删除
| | |– 附件上传
| | └– 子代办创建
|– 日程
| |– 搜索
| |– 月日历视图
| |– 周日历视图
| |– 日程创建
| | | └– 地图选点
| └– 日程详情
| └– 日程删除
| └– 日程修改
| └– 地图选点
└– 我的
|– 用户信息
└– 关于我们
产品定制层：专注于满足不同设备或使用场景的个性化需求，作为应用的入口，是用户直接互动的界面。
本实践支持直板机，为单HAP包形式，包含路由根节点、底部导航栏等。
基础特性层：用于存放相对独立的功能UI和业务逻辑实现。
本实践的基础特性层将应用底部导航栏的每个选项拆分成一个独立的业务功能模块。
每个功能模块都具备高内聚、低耦合、可定制的特点，支持产品的灵活部署。
公共能力层：存放公共能力，包括公共UI组件、数据管理、外部交互和工具库等共享功能。
本实践的公共能力层分为公共基础能力和可分可合组件，均打包为HAR包被上层业务组件引用。
公共基础能力包含日志、文件处理等工具类，公共类型定义，网络库，以及弹窗、加载等公共组件。
可分可合组件将包含行业特点、可完全自闭环的能力抽出独立的组件模块，支持开发者在开发中单独集成使用，详见业务组件设计章节。
本模板详细工程结构可见工程结构章节。
为支持开发者单独获取特定场景的页面和功能，本模板将功能完全自闭环的部分能力抽离出独立的行业组件模块，不依赖公共基础能力包，开发者可以单独集成，开箱即用，降低使用难度。
1）场景说明
提供员工考勤打卡服务，支持自动定位、打卡状态管理、打卡记录查看等功能。
2）技术方案
1）场景说明
提供快捷打卡服务卡片，支持在桌面直接查看打卡状态和快速打卡。
2）技术方案
1）场景说明
提供完整的日历视图，支持月视图/周视图切换、日程显示、日期选择等功能。
2）技术方案
详细代码结构如下所示：
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 // 日程日历操作工具
本篇代码非应用的全量代码，只包括应用的部分能力的关键代码。
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);
})
})
}
})
}
}
}
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(() => {
// 打卡逻辑
})
}
}
}
// 处理打卡逻辑
});
核心代码：
@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);
}
});
}
}
以上代码展示了商务笔记应用的核心功能实现，包括日历选择、打卡位置确认、服务卡片等关键技术方案。
本模板提供了两种代码集成方式，供开发者自由使用。
整体集成
开发者可以选择直接基于模板工程开发自己的应用工程。
模板代码获取：
按需集成
若开发者已搭建好自己的应用工程，但暂未实现其中的部分场景能力，可以选择取用其中的业务组件，集成在自己的工程中。
以上是第11期“办公应用”行业优秀案例的内容，更多行业敬请期待~
欢迎下载使用行业模板“点击下载”，若您有体验和开发问题，或者迫不及待想了解XX行业的优秀案例，欢迎在评论区留言，小编会快马加鞭为您解答~
同时诚邀您添加下方二维码加入“组件模板活动社群”，精彩上新&活动不错过！
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。