# 行业关键场景示例合集
**Repository Path**: scenario-samples/industry-practices-index
## Basic Information
- **Project Name**: 行业关键场景示例合集
- **Description**: 【鸿蒙 Harmony Next 示例 代码】现诚邀您选择首个行业实践场景,即刻开启一段高效、专业的鸿蒙生态开发之旅,共同探索无限可能。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 3
- **Forks**: 1
- **Created**: 2025-06-04
- **Last Updated**: 2025-06-25
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# [行业关键场景示例合集](https://developer.huawei.com/consumer/cn/doc/architecture-guides/practice-convenient-life-app-architecture-v1-0000001952539489)
## 介绍
为帮助开发者快速解锁鸿蒙生态的全场景开发能力,我们系统性地沉淀了一系列经过验证的[ **行业实践** ](https://developer.huawei.com/consumer/cn/doc/architecture-guides/practice-convenient-life-app-architecture-v1-0000001952539489)。这些实践成果基于广泛的行业洞察与深度技术验证,为开发者提供可靠参考架构。
这些行业实践具备高度的场景适配性与工程普适性,能够有效应对鸿蒙应用复杂业务场景的挑战。无论是构建高性能应用,还是优化用户体验,均能助力开发者规避技术陷阱,显著提升开发效率,并提供坚实的技术支撑。
现诚邀您选择首个[ **行业实践** ](https://developer.huawei.com/consumer/cn/doc/architecture-guides/practice-convenient-life-app-architecture-v1-0000001952539489)场景,即刻开启一段高效、专业的鸿蒙生态开发之旅,共同探索无限可能。
## 一份简单的问卷反馈
亲爱的Harmony Next开发者,您好!
为了协助您高效开发,提高鸿蒙场景化示例的质量,希望您在浏览或使用后抽空填写一份简单的问卷,我们将会收集您的宝贵意见进行优化:heart::heart:
[:arrow_right: **点击此处,或扫描下方二维码填写问卷** ](https://wj.qq.com/s2/19042938/95ab/)
## 行业实践索引 —— 点击跳转分类
## 汽车类行业实践
## 便捷生活类行业实践
### [车牌号编辑](https://developer.huawei.com/consumer/cn/doc/architecture-guides/vehicle_keyboard-0000002236257106)
车牌号编辑是便捷生活应用的高频使用场景之一,如用户在离开停车场进行缴费时,需要输入车牌号进行缴费。
本示例主要基于TextInput和Grid组件实现自定义键盘,用于编辑车牌号。
### [电影选座](https://developer.huawei.com/consumer/cn/doc/architecture-guides/canvas_cinema-0000002272398929)
电影选座是便捷生活类应用中的典型场景之一,如用户在购票选座时,会点击、取消以及确认选座。
本示例主要基于Canvas组件来绘制影院座位分布,根据点击位置计算出座位号,调用CanvasRenderingContext2D的fillStyle属性和fillRect方法为每个座位绘制相应的颜色,以实现电影选座功能。
### [级联菜单选择](https://developer.huawei.com/consumer/cn/doc/architecture-guides/cascading_menu_selection-0000002274600681)
级联菜单选择是便捷生活类应用的典型使用场景之一,如用户在进行按类选择、分类筛选等操作时需要直观看到父子级品类的递进关系与平级品类的并列关系。
本示例使用List组件构成三级菜单,使用@Observed装饰器和@ObjectLink装饰器实现点击按钮时菜单状态的实时刷新,最后使用CustomDialog展示已选择物品。
### [待办事项便贴](https://developer.huawei.com/consumer/cn/doc/architecture-guides/sticky_note-0000002275644713)
待办事项便贴是便捷生活类行业实践中高频使用场景之一,如用户记录待办事项时,需要添加、删除记录以及对记录进行自定义排序等功能。
本示例基于显式动画、List组件实现了文件推动、插入效果,满足待办事项便贴的基本需求。
### [查看账单收支明细](https://developer.huawei.com/consumer/cn/doc/architecture-guides/collapse_list-0000002248773270)
查看账单收支明细是便捷生活类应用中高频使用场景之一,如用户需要在账单明细中查看支出或收入记录。
本示例使用List组件实现多层级折叠列表以及点击账单展开收支明细的交互效果。
### [新建日程管理](https://developer.huawei.com/consumer/cn/doc/architecture-guides/schedule-0000002284438545)
新建日程管理是便捷生活类应用中高频使用场景之一,如用户需要新建日程记录未来重要会议、活动、行程等事项。
本示例通过DateTimePicker组件实现日期和时间的同时展示与不循环滚动功能。
### [功能卡片自动循环播放](https://developer.huawei.com/consumer/cn/doc/architecture-guides/easylife_loopscroll-0000002284598853)
功能卡片自动循环播放是便捷生活类应用中高频使用场景之一,如外卖美食、商城购物、教育课程等多种场景的首页,都需要手动滚动或自动循环播放功能类别卡片。
本示例基于Grid、Swiper和Scroll组件实现了手动滚动或自动循环播放的效果。
### [密码保险箱自定义](https://developer.huawei.com/consumer/cn/doc/architecture-guides/asset_verification-0000002257074702)
密码保险箱自定义是便捷生活类应用中高频使用场景之一,如用户需要存储、删除、查询账号密码、证件、住址、联系方式等关键资产信息。
本示例基于关键资产存储服务,提供用户隐私敏感信息的安全存储、删除和基于生物识别的认证访问能力。
### [双指捏合缩放卡片](https://developer.huawei.com/consumer/cn/doc/architecture-guides/card_pinch_scale-0000002282825670)
双指捏合缩放卡片是便捷生活类应用中高频使用场景之一,如用户切换备忘录、日历提醒、记忆卡片等,需要缩放卡片查看。
本示例基于PinchGesture实现卡片的双指捏合缩放能力。
### [日历常用功能及黄历查询](https://developer.huawei.com/consumer/cn/doc/architecture-guides/perpetual_calendar-0000002319250845)
日历(万年历或黄历)查询是便捷生活应用的高频使用场景之一,如日期、节日、节气、今日宜以及今日忌等内容查询。
本示例基于日历应用常用功能,提供万年历、黄历和我的三大模块开发示例和参考。
## 运动健康类行业实践
### [运动开始、结束交互动画](https://developer.huawei.com/consumer/cn/doc/architecture-guides/indoor_run-0000002266807001)
运动记录是运动健康类应用中高频使用场景之一,如用户在跑步运动时,为了避免运动过程中因误触等操作意外终止,需要在结束运动交互过程中添加长按处理逻辑。
本示例使用Path组件绘制结束按钮的长按过程动画,使用animateTo动画接口实现暂停运动、结束运动时的按钮过渡动画,提升UI交互体验。
### [添加运动计划日历提醒](https://developer.huawei.com/consumer/cn/doc/architecture-guides/calendar_schedule_events-0000002274539357)
添加运动计划日历提醒是运动健康类应用中高频使用场景之一。
本示例基于Grid组件构建自定义日历,实现在选定日期添加运动计划提醒且同步至系统日历功能,并利用关系型数据库对日历计划进行持久化存储。
### [周期数据图表绘制](https://developer.huawei.com/consumer/cn/doc/architecture-guides/period_chart-0000002280744357)
周期数据图表绘制是运动健康类应用中的典型场景之一,如向用户展示某一周期(年、月、周、日)心率、血压、血糖、体重、体温、热量消耗(卡路里)等数据的变化趋势。
本示例使用@ohos/mpchart实现绘制折线图(走势图)、切换查看周期等功能,同时也适用于温度、湿度等数据可视化。
## 教育类行业实践
## 综合办公类行业实践
### [考勤打卡位置获取](https://developer.huawei.com/consumer/cn/doc/architecture-guides/location_permissions-0000002231804582)
考勤打卡是综合办公类应用中高频使用场景之一,如用户打卡时需要获取当前位置。
本示例主要实现地理位置获取功能及用户权限申请的交互效果。
### [PDF在线安全预览](https://developer.huawei.com/consumer/cn/doc/architecture-guides/load_display_pdf-0000002270470565)
PDF在线安全预览是综合办公类应用的高频场景之一,如向客户展示新产品特性时,需要添加水印、防截屏和防下载等功能来保证安全性。
本示例利用Web组件实现PDF在线加载显示,Canvas画布实现蒙版水印,通过隐私界面声明实现防截屏,顶部导航栏自定义实现防下载,切合实际应用场景中安全预览的需求。
### [个人名片页](https://developer.huawei.com/consumer/cn/doc/architecture-guides/personal_card-0000002236270234)
个人名片页是综合办公类应用的高频场景之一,如用户需要保存个人二维码或扫一扫他人二维码。
本示例通过弹窗引导用户授权实现个人名片页二维码保存至图库,使用scanBarcode实现二维码扫一扫功能。
### [公文审批-画板签名、文件预览下载](https://developer.huawei.com/consumer/cn/doc/architecture-guides/document_approval-0000002280673593)
公文审批是综合办公类应用中的典型场景之一,如在进行文件审批时需要预览待审批文件并签字确认。
本示例利用Canvas组件、CanvasRenderingContext2D实现画板签名的功能,使用DocumentViewPicker和filePreview(文件预览)实现在线文件的预览和下载保存功能。
### [证件照拍摄-蒙版效果](https://developer.huawei.com/consumer/cn/doc/architecture-guides/camera_page-0000002245028040)
证件照拍摄是综合办公类应用中的典型场景之一,如在进行身份验证的时候需要拍摄身份证照片。
本示例利用Xcomponent实现相机页面的蒙版效果,拍摄身份证信息,也可通过修改蒙版效果拍摄银行卡、医保卡等证件照片。
### [文件下载预览](https://developer.huawei.com/consumer/cn/doc/architecture-guides/file_view-0000002256155688)
文件下载预览是综合办公类应用的高频场景之一,如向用户提供pdf、txt、png、docx和xlsx文件的下载预览。
本示例利用@ohos.request实现对文件的下载并保存至沙箱,然后通过Preview Kit实现对文档的加载预览。
### [访客邀请管理](https://developer.huawei.com/consumer/cn/doc/architecture-guides/guest_demo-0000002257167990)
访客邀请管理是综合办公类应用中的典型场景之一,如邀请他人到公司面试、商谈业务、参与活动或其他事项时,需事先建立访客邀请信息。
本示例基于@ohos.contact、generateBarcode、ArkTS弹窗实现访客邀请新增及信息查看功能。
### [邮件附件添加和预览](https://developer.huawei.com/consumer/cn/doc/architecture-guides/email_attachment-0000002319115245)
添加、删除以及预览邮件附件是综合办公类应用中的高频使用场景之一。
本示例基于PhotoViewPicker、cameraPicker、@ohos.file.picker、filePreview和自定义弹窗等组件实现附件上传、展示和预览的功能,支持从相册、相机拍摄和本地文件中选择上传附件。
### [会议创建发布](https://developer.huawei.com/consumer/cn/doc/architecture-guides/conference_release-0000002321751725)
会议创建发布是综合办公类应用中高频使用的场景之一。
本示例基于@ohos.file.fs、@ohos.file.picker、@ohos.calendarManager、CustomDialog等实现会议信息填写、添加相关附件、会议发布及添加会议到系统日程的功能。
## 公交地铁类行业实践
## 理财保险类行业实践
### [股票行情走势分时线与日K线](https://developer.huawei.com/consumer/cn/doc/architecture-guides/stock_chart_x-0000002264336070)
## 儿童教育类行业实践
### [计算验证弹窗](https://developer.huawei.com/consumer/cn/doc/architecture-guides/children_demo_caculater-0000002235299782)
计算验证弹窗是儿童教育类应用中的高频使用场景之一,如需实现登录、防沉迷、进入家长模式等功能。
本示例实现通过计算验证进入设置页面的效果。
### [儿童练字板](https://developer.huawei.com/consumer/cn/doc/architecture-guides/children_demo_canvas-0000002237313638)
练习写字是儿童成长学习生活中的高频场景之一。
本示例基于Canvas展示了儿童练字板场景,为儿童提供了在移动设备上练习书法的机会。
### [防沉迷控制](https://developer.huawei.com/consumer/cn/doc/architecture-guides/control_usage_time-0000002277224065)
防沉迷控制是儿童教育类应用中的高频使用场景之一。
本示例通过控制应用使用时长、超时后锁定应用实现儿童防沉迷。
## 旅游园区类行业实践
### [气泡提醒开启定位](https://developer.huawei.com/consumer/cn/doc/architecture-guides/location_permission_prompt-0000002235220070)
气泡提醒开启定位是旅游园区类应用中高频使用的场景之一,如用户为了精准获取周边景点及住宿信息,需要打开定位权限。
本示例使用Popup实现气泡提示弹窗:在用户首次进入首页后,检查是否开启定位权限,没有开启则左上角地址弹出气泡,提示开启定位权限,开启权限后气泡不再提示。
### [选择日期范围](https://developer.huawei.com/consumer/cn/doc/architecture-guides/data_selection-0000002240198078)
选择日期范围是旅游园区类应用中高频使用场景之一,如用户在预订酒店时需要选择住宿日期。
本示例使用层叠布局和Grid组件实现选择日期范围后的颜色变化效果。
### [地址交换动画](https://developer.huawei.com/consumer/cn/doc/architecture-guides/address_exchange-0000002283895117)
地址交换动画是旅游园区类应用中高频使用场景之一,如用户在订票、打车、导航时会使用到地址交换操作。
本示例使用显式动画实现出发地与目的地地址左右交换动画。
### [获取目的地位置及周边配套地图](https://developer.huawei.com/consumer/cn/doc/architecture-guides/obtain_destination_map-0000002318736725)
获取目的地位置及周边配套地图是旅游园区类应用中高频使用场景之一,如用户租房、订酒店时,需要查看房屋地理位置、周边配套设施及距离。
本示例基于MapComponent构建地图,实现展示地图、目的地定位、周边地铁站等功能。
## 孕育健康类行业实践
### [宝宝成长记录时间轴](https://developer.huawei.com/consumer/cn/doc/architecture-guides/growth_record_timeline-0000002270223453)
时间轴记录是孕育健康类应用广泛使用的场景之一,如用户根据重要时间节点记录宝宝的成长信息。
本示例使用List组件实现宝宝成长记录时间轴,记录形式包括身高、体重信息和图文组合的日记随笔两种,能够清晰直观地展示宝宝成长过程中的时间节点。
### [宝宝身高体重记录曲线](https://developer.huawei.com/consumer/cn/doc/architecture-guides/growth_record_curve-0000002281357289)
宝宝身高体重记录是孕育健康类应用广泛使用的场景之一,如用户需要记录宝宝的身高、体重信息,查看一定周期内的变化趋势。
本示例使用@ohos/mpchart绘制折线图(走势图),将身高、体重、日期等数据可视化。
## 新闻阅读类行业实践
### [未成年人内容过滤](https://developer.huawei.com/consumer/cn/doc/architecture-guides/new_minors_protection-0000002266453325)
未成年人内容过滤是新闻阅读类应用中的典型场景之一,如在阅读类应用中,为不同年龄分段的用户提供差异化的可浏览内容。
### [频道选择](https://developer.huawei.com/consumer/cn/doc/architecture-guides/channel_selection-0000002270325497)
频道选择是新闻阅读类应用中的典型场景之一,如用户可以编辑订阅频道。
本示例使用Grid组件实现添加、删除频道以及对频道进行拖动排序等功能。
### [字体大小调节](https://developer.huawei.com/consumer/cn/doc/architecture-guides/set_app_font_size-0000002235941282)
字体大小调节是新闻阅读类应用中的典型场景之一,如用户需要调整当前阅读内容字体大小。
本示例通过滑动组件Slider与@ohos.data.preferences(用户首选项)实现应用内的字体大小调节,并实现屏蔽系统字体大小设置功能。
### [Base64格式图片保存](https://developer.huawei.com/consumer/cn/doc/architecture-guides/base64_image_save-0000002271203733)
图片保存是是新闻阅读类应用中的典型场景之一,如用户需要保存当前浏览界面的Base64格式图片。
本示例在无需申请相册管理模块权限的情况下,利用安全控件、相册管理模块实现保存Base64格式图片到系统相册的功能。
### [阅读翻页方式调节](https://developer.huawei.com/consumer/cn/doc/architecture-guides/page_flip_page-0000002271210553)
阅读翻页是新闻阅读类应用中的典型场景之一,如用户阅读小说时,可对翻页方式进行调节。
本示例通过Swiper、List、Reader Kit分别实现了左右翻页、上下翻页、仿真翻页三种翻页方式。
### [返回阅读列表顶部](https://developer.huawei.com/consumer/cn/doc/architecture-guides/move_to_top-0000002283118621)
返回阅读列表顶部是新闻阅读类应用中的典型场景之一,如用户上滑查看新闻列表内容时,点击向上箭头图标可以返回至新闻列表顶部。
本示例使用List组件,实现新闻列表的滑动效果,通过点击向上箭头图标、双击状态栏和手动滑动三种方式,返回新闻列表顶部,也可适用于资讯、视频、商品等图文信息列表实现返回顶部功能。
### [AI朗读](https://developer.huawei.com/consumer/cn/doc/architecture-guides/ai_recitation-0000002290573329)
AI朗读是新闻阅读类应用中的典型场景之一,如用户在浏览新闻、小说等文本内容时,可以通过AI朗读来获取信息。
本示例利用TextReader实现文本的AI朗读、章节切换、进度拖动功能。
### [广告窗口插入](https://developer.huawei.com/consumer/cn/doc/architecture-guides/ad_loading-0000002257601520)
广告窗口插入是新闻阅读类应用中的典型场景之一。
本示例基于List实现在动态列表规定位插入广告的效果,也可适用于社交通讯、综合办公、美食购物、拍摄美化类应用中浏览界面插入广告的场景。
### [热搜榜单列表](https://developer.huawei.com/consumer/cn/doc/architecture-guides/hot_search-0000002258742170)
热搜榜单列表是新闻阅读类应用的高频场景之一,如用户需要搜索关键词、查看最近使用功能及每天的热门新闻排名。
本示例基于Tabs构建了一个包含搜索栏、最近使用的应用列表、和新闻热搜榜单的页面。
### [音量键翻页](https://developer.huawei.com/consumer/cn/doc/architecture-guides/volume_key_turn_page-0000002293620017)
音量键翻页是新闻阅读类应用的高频场景之一,如用户通过控制音量键切换小说阅读前后页。
本示例基于Reader Kit构建阅读器,并通过组合按键监听音量键按下事件,实现音量键翻页。
### [文本标记高亮显示](https://developer.huawei.com/consumer/cn/doc/architecture-guides/text_marker_ability-0000002283796046)
文本标记高亮显示是新闻阅读类应用的高频场景之一,如用户需要在新闻、小说、期刊、论文等文章中通过高亮标记记录重要信息。
本示例基于Text组件和Span组件实现了对文本进行亮色标注和消除标注的功能,并通过distributedKVStore实现了标注的数据持久化。
## 影音娱乐类行业实践
### [获取视频信息](https://developer.huawei.com/consumer/cn/doc/architecture-guides/get_video_info-0000002273254857)
获取视频信息是影音娱乐类应用中的典型场景之一,如用户需要查看视频的时长、名字、大小、缩略图等信息。
本示例主要基于PhotoAcess组件选择图库视频,根据所选视频uri获取视频信息。
### [视频压缩处理](https://developer.huawei.com/consumer/cn/doc/architecture-guides/video_compress_demo-0000002248722292)
视频压缩处理是影音娱乐类应用中的典型场景之一,如上传、发送或保存视频时存在大小限制,需要对视频进行压缩,保证视频质量及大小满足用户需要。
本示例利用videocompressor实现视频压缩功能,利用photoAccessHelper实现从相册(图库)中选取视频及压缩完成后视频保存至相册(图库)的功能。
### [滑块及进度条自定义](https://developer.huawei.com/consumer/cn/doc/architecture-guides/custom_slider-0000002284049981)
滑块及进度条自定义是影音娱乐类应用中高频场景之一,如用户播放视频时需要调节音量、亮度、饱和度、弹幕透明度、字体大小及颜色深浅等。
本示例主要基于Slider实现自定义滑块及进度条的样式、最大值和最小值,并随着滑块调节动态显示当前值的功能。
### [资源库多层标签筛选](https://developer.huawei.com/consumer/cn/doc/architecture-guides/hiararchicle_filtering-0000002287162465)
资源库多层标签筛选是影音娱乐类应用中高频场景之一,如在设计资源库、影音播放、小说阅读、外卖美食等平台用户希望根据标签筛选到所需的资源。
本示例主要基于Flex和Grid/GridItem等 UI 组件的综合使用,以及对资源数据结构和资源筛选逻辑的设计实现了对多标签资源进行多层筛选的功能。
### [悬浮窗效果](https://developer.huawei.com/consumer/cn/doc/architecture-guides/sub_window-0000002254941572)
悬浮窗是影音娱乐类应用的典型场景之一,如用户在浏览应用内不同页面时,需通过悬浮窗查看歌曲信息,控制歌曲的播放、暂停等。
本示例基于子窗口实现应用内悬浮窗,通过@ohos.window实现悬浮窗的样式切换与拖动、贴边效果。
### [视频窗口横竖屏切换](https://developer.huawei.com/consumer/cn/doc/architecture-guides/orientation_switching-0000002255691184)
视频窗口横竖屏切换是影音娱乐类应用中的高频使用场景之一,如用户播放视频时可以根据实际需求进行横竖屏切换,以获取更好的观看体验。
本示例基于@ohos.window获取窗口实例,使用setPreferredOrientation方法设置窗口的显示方向。也可适用于游戏、地图导航、小说阅读等其他场景。
### [移动数据切换提醒](https://developer.huawei.com/consumer/cn/doc/architecture-guides/data_network_pause_playback-0000002291777477)
移动数据(流量)切换提醒是影音娱乐类应用中的高频场景之一,如视频播放中遇到WiFi信号中断,需要暂停视频播放并提醒用户,控制数据流量。
本示例主要基于NetConnection订阅网络连接状态,监听到网络切换后进行弹窗通知。也可适用于所有WiFi中断需要使用移动数据(流量)时的提醒。
### [歌词动态效果](https://developer.huawei.com/consumer/cn/doc/architecture-guides/lyric_dynamic_effect-0000002291790569)
歌词动态效果是影音娱乐类应用中的高频使用场景之一。
本示例基于animateTo实现了歌词滚动、文字颜色渐变的动画效果。
### [切换音频播放设备](https://developer.huawei.com/consumer/cn/doc/architecture-guides/avplayer_audio-0000002293630521)
切换音频播放设备是影视娱乐类应用中高频使用场景之一。
本示例创建AVPlayer播放音频,使用投播组件AVCastPicker切换不同的音频播放设备,设置Slider组件控制音频播放位置。
### [视频列表切换播放](https://developer.huawei.com/consumer/cn/doc/architecture-guides/video_switching_association-0000002296452929)
视频列表切换播放是影音娱乐类应用的高频场景之一。
本示例基于Tabs和Video组件实现视频列表切换播放效果。
### [导入本地音乐文件](https://developer.huawei.com/consumer/cn/doc/architecture-guides/music_player-0000002296726005)
导入本地音乐文件是影音娱乐类应用中高频使用场景之一。
本示例主要使用DocumentViewPicker加载公共目录的音乐文件,并读取歌手名、歌曲封面等信息进行展示。
### [视频截取转换为GIF动图](https://developer.huawei.com/consumer/cn/doc/architecture-guides/video_demo_videocreategif-0000002312993113)
视频截取转换为GIF动图是影音娱乐类应用中的典型场景之一。
本示例主要基于三方库mp4parser调用ffmpegCmd()指令,实现截取视频片段转换为GIF动图并保存至图库的功能。
### [视频弹幕发送与显示](https://developer.huawei.com/consumer/cn/doc/architecture-guides/bullet_comment-0000002284943480)
视频弹幕发送与显示是影音娱乐类应用中的高频使用场景之一,如用户在播放视频、观看直播时可以发送弹幕,实时评论互动,增强用户参与度。
本示例通过数组保存实现弹幕发送,基于setInterval函数和translate属性实现弹幕移动动画。
### [视频倍速播放](https://developer.huawei.com/consumer/cn/doc/architecture-guides/speed_play-0000002321158281)
视频倍速播放是影音娱乐类应用中的典型场景之一,如用户观看视频时需要加速或慢放观看。
本示例基于AVPlayer实现视频倍速播放的功能。
### [视频播放列表](https://developer.huawei.com/consumer/cn/doc/architecture-guides/video_playlist-0000002286827110)
视频播放列表是影音娱乐类应用的高频使用场景之一,如用户浏览视频列表时自动播放视频。
本示例基于List、AVPlayer组件实现视频播放列表页面,通过监听列表滑动,实现视频列表中首个可见视频自动播放的效果。
### [动态图片播放](https://developer.huawei.com/consumer/cn/doc/architecture-guides/dynamic_photo-0000002321583145)
动态图片播放是影视娱乐类应用中的典型场景之一,如在视频评论区、新闻资讯页面等播放动态图片。
本示例基于MovingPhotoView组件展示了多个动态图片滑动播放的功能。
## 社交通讯类行业实践
### [好友动态-图片预览](https://developer.huawei.com/consumer/cn/doc/architecture-guides/image_preview-0000002266277321)
好友动态图片预览是社交通讯类应用中的典型场景之一,如用户在浏览好友动态时,会点击预览图片。
本示例主要基于Image组件与组合手势实现动态预览效果,可通过手势实现图片的双击缩放、双指捏合缩放、拖动查看功能。
### [聊天页-语音输入文字](https://developer.huawei.com/consumer/cn/doc/architecture-guides/voice_to_text_forchat-0000002231520016)
语音转文字及图文消息发送是社交通讯应用的高频使用场景之一。
本示例基于speechRecognizer实现语音转文字功能及文本和图片混合消息聊天交互效果。
### [好友推荐动画](https://developer.huawei.com/consumer/cn/doc/architecture-guides/preference_search-0000002236253766)
好友推荐是社交通讯类应用中的典型场景之一,如用户根据偏好设置匹配到对应的推荐好友后,以特定的动画和排版展示好友信息。
本示例使用Grid组件实现排版,使用transition 、 animateTo动画实现好友转场动画和正在匹配中动画。
### [智能图片筛选](https://developer.huawei.com/consumer/cn/doc/architecture-guides/image_recognition-0000002236898070)
智能图片筛选是社交通讯类应用中的典型场景之一,如用户可以从图库中筛选出所需的图片,如二维码、指定动物、含有特定文字的图片等。
本示例以从图库中筛选出二维码为例,实现智能方式识别并使用PhotoPicker推荐图片。
### [查找附近的人](https://developer.huawei.com/consumer/cn/doc/architecture-guides/near_people-0000002237251858)
查找附近的人是社交通讯类应用中的典型场景之一,如用户需要开启自身定位,并查看附近五公里内的用户及距离。
本示例主要基于定位权限与距离计算公式实现查找附近的人功能,可通过开关持续获取自身定位、查找在附近五公里内的用户并显示距离。
### [投票进度增长动效](https://developer.huawei.com/consumer/cn/doc/architecture-guides/vote_result_display-0000002274416885)
投票是社交通讯类应用中高频使用场景之一,如进行人气之星选举投票。
本示例使用Progress组件实现了投票前后的进度增长效果。
### [聊天页-是否原图发送](https://developer.huawei.com/consumer/cn/doc/architecture-guides/send_original_image-0000002249291536)
是否发送原图是社交通讯类应用的高频使用场景之一。
本示例主要使用PhotoPicker组件实现获取图库(相册)图片,并将图片压缩后发送非原图的效果。
### [查看通讯录](https://developer.huawei.com/consumer/cn/doc/architecture-guides/contracts-0000002289306481)
查看通讯录是社交通讯类应用中高频使用场景之一,如用户需要查找联系人,并拨打电话或发送短信。
本示例基于AlphabetIndexer实现侧边栏字母排序索引,快速定位联系人。通过@ohos.telephony.call跳转拨号界面呼叫联系人,使用UIAbilityContext拉起系统短信应用发送短信。
### [个人头像上传](https://developer.huawei.com/consumer/cn/doc/architecture-guides/personal_info_upload-0000002290265961)
个人头像上传是社交通讯类应用中高频使用场景之一,如用户需要设置或更换头像图片。
本示例通过photoAccessHelper方法加载本地图片,使用ImageCrop方法裁剪图片成圆形,转换成base64格式并使用Preferences本地保存,再回到主页面展示。
### [聊天信息加密](https://developer.huawei.com/consumer/cn/doc/architecture-guides/encryp_chat-0000002291169549)
聊天信息加密是社交通讯类应用中高频使用场景之一,如用户在发送消息时需要进行加密操作保证通讯信息安全。
本示例使用SM2非对称密钥加解密实现聊天信息加密。示例中的秘钥对为生成器生成,实际使用可以更换为使用者所提供的密钥对。
### [聊天页-网页访问拦截](https://developer.huawei.com/consumer/cn/doc/architecture-guides/h5_interception-0000002282125390)
网页访问拦截是社交通讯类应用的高频使用场景之一。如用户只能访问白名单内的网址,访问其他网址将会被拦截。
本示例使用Web组件实现特定网页访问拦截。
### [聊天列表未读消息提醒和标记](https://developer.huawei.com/consumer/cn/doc/architecture-guides/chat_unread_reminder-0000002282675266)
聊天列表未读消息提醒和标记是社交通讯类应用的典型场景之一,如用户需要查看未读消息及数量,对消息进行已读或未读标记。
本示例基于List实现聊天列表,使用Badge组件作为未读提醒标识,使用swipeAction设置左划按钮,用户可点击该按钮标记消息状态。
### [聊天消息引用及跳转](https://developer.huawei.com/consumer/cn/doc/architecture-guides/chat_reference-0000002317503353)
聊天消息引用及跳转是社交通讯类应用的高频使用场景之一,如用户对某条消息引用回复、跳转至引用消息。
本示例基于List列表实现对聊天信息的排序与精准定位,通过设置Text的bindSelectionMenu属性实现消息引用。
### [添加通讯录好友](https://developer.huawei.com/consumer/cn/doc/architecture-guides/add_friends-0000002283246714)
添加通讯录好友是社交通讯类应用中的典型场景之一。
本示例基于@ohos.contact实现读取通讯录、选择手机联系人并添加为好友的功能。
### [拖拽发送中转站图片文本](https://developer.huawei.com/consumer/cn/doc/architecture-guides/drop_to_send_image_and_text-0000002283583388)
中转站图片文本拖拽发送是社交通讯类应用中的典型场景之一,如用户可以将与好友A聊天记录中的图片文字暂存中转站,在与好友B聊天时从中转站拖出发送。
本示例基于拖拽事件实现拖拽发送图片文字的功能。
### [蓝牙通信](https://developer.huawei.com/consumer/cn/doc/architecture-guides/bluetooth_spp-0000002318232397)
蓝牙通信是社交通讯类应用的高频使用场景之一,如用户通过蓝牙连接互相发送消息。
本示例基于@ohos.bluetooth.socket实现蓝牙通信,完成设备之间的信息发送。
### [动态发布退出时保存草稿](https://developer.huawei.com/consumer/cn/doc/architecture-guides/save_draft_on_exit-0000002284059456)
动态发布退出时保存草稿是社交通讯类应用中的典型场景之一 ,如用户在朋友圈编辑发布内容退出时,可以保存草稿继续编辑。
本示例基于@ohos.data.preferences实现动态发布退出时保存文本数据以及图片草稿。
### [群接龙](https://developer.huawei.com/consumer/cn/doc/architecture-guides/group_solitaire-0000002320400581)
群接龙是社交通讯类应用中的典型场景之一,如用户在群内统计群成员信息时,可发起群接龙进行统计,提高统计效率。
本示例通过数组和自定义对象的多层嵌套实现接龙信息的收集和展示功能。
## 实用工具类行业实践
### [雷达扫描动画](https://developer.huawei.com/consumer/cn/doc/architecture-guides/radar_scan_effect-0000002236447458)
雷达扫描是实用工具类应用的高频场景之一,如需要展示扫描周边蓝牙设备或扫描周围用户的动画。
本示例通过transition实现圆形波纹效果以及扫描结果逐渐显示效果,使用animateTo实现绕圈扫描动画效果。
### [方位角与夹角测量](https://developer.huawei.com/consumer/cn/doc/architecture-guides/control_sector-0000002238010112)
方位角与夹角测量是实用工具类应用的高频场景之一,如获取地图上对应位置朝向(方位角),或获取摄像方向与焦距下所能覆盖的范围(夹角)。
本示例通过Canvas画布实现扇形绘制,PanGesture实现手势处理,伴随拖动实现方位角与夹角的实时展示。
### [测速仪表盘自定义](https://developer.huawei.com/consumer/cn/doc/architecture-guides/network_speed_guage-0000002284206189)
自定义测速仪表盘是实用工具类应用的典型场景之一,如用户需要检测和监控网速、流量、车速、转速、温度、湿度、信用评分等状态信息。
本示例通过Canvas绘制自定义仪表盘,并使用netQuality订阅当前网速,实现网络测速仪表盘效果。
### [铃声设置](https://developer.huawei.com/consumer/cn/doc/architecture-guides/ringtone-0000002284229333)
铃声设置是实用工具类应用的高频场景之一,如设置管理闹钟、来电、信息、通知铃声等音频信息。
本示例通过Ringtone Kit实现铃声设置。
### [底部抽屉滑动效果](https://developer.huawei.com/consumer/cn/doc/architecture-guides/drawer_sliding_effect-0000002296764169)
底部抽屉滑动效果是实用工具类应用的高频场景之一,如滑动显示侧边栏时,覆盖在原页面上,不变动原页面布局,并将界面沉浸式显示。
本示例基于Stack布局和List组件实现了底部抽屉滑动效果场景。
### [网页海报生成及分享](https://developer.huawei.com/consumer/cn/doc/architecture-guides/web_poster_produce_and_share-0000002282232164)
网页海报生成及分享是实用工具类应用中高频使用场景之一,如用户在浏览网页时,可以生成海报图片并分享至其他应用。
本示例基于Web组件先将网页内容保存至图片沙箱文件,再通过systemShare分享至其他应用。
### [网络状态信息查询](https://developer.huawei.com/consumer/cn/doc/architecture-guides/network_awareness-0000002284512886)
网络状态信息查询是实用工具类应用中高频使用场景之一。
本示例通过Network Kit获取网络状态查询的能力,点击按钮页面展示当前网络状态信息。
### [导航栏背景变色](https://developer.huawei.com/consumer/cn/doc/architecture-guides/change_color_by_picture-0000002320644189)
导航栏背景颜色变化是实用工具类应用的高频使用场景之一,如用户在浏览页面时可以看到随着导航栏图片切换而变化的渐变背景。
本示例通过@ohos.effectKit获取图片平均颜色来实时更新页面背景的颜色。
### [应用卡片添加至桌面](https://developer.huawei.com/consumer/cn/doc/architecture-guides/device_info_card-0000002286708232)
应用卡片添加至桌面是实用工具类应用中的典型场景之一,如用户可长按桌面应用,将卡片中的常用功能、设备存储等信息添加至桌面常驻展示。
本示例通过@ohos.batteryInfo获取电量信息,通过@ohos.deviceInfo获取设备信息,通过@ohos.file.storageStatistics获取存储相关信息。
### [输入法应用沉浸模式](https://developer.huawei.com/consumer/cn/doc/architecture-guides/input_method_application_immersive_mode-0000002283469114)
输入法应用沉浸模式是实用工具类应用中的典型场景之一,如用户在搜索、编辑使用输入法时,为用户提供一致的沉浸式体验。
本示例基于Search搜索框组件的keyboardAppearance属性设置前台应用搜索框及系统输入法应用的沉浸模式。
## 购物比价类行业实践
### [优惠券卡包](https://developer.huawei.com/consumer/cn/doc/architecture-guides/coupons_page-0000002235638646)
优惠券卡包是购物比价类应用中高频使用场景之一。
本示例构建常用的优惠券卡包页面样式,提供当前可使用和已过期优惠券两个页面。
### [手机摇一摇跳转红包页](https://developer.huawei.com/consumer/cn/doc/architecture-guides/shaking_to_dialog-0000002238306420)
手机摇一摇跳转红包页是购物比价类应用中高频使用场景之一,如用户在手机支付成功时、购物软件进入商城界面时、抽奖页完成抽奖时需要跳转到红包页。
本示例通过传感器包的Sensor接口,在进入支付成功页面时开始监听手机摇晃角度变化,实现手机摇一摇跳转到红包页的功能。
### [每日任务积分获取](https://developer.huawei.com/consumer/cn/doc/architecture-guides/sign-0000002284183885)
每日任务积分获取是购物比价类应用中高频使用场景之一,如用户需要每日签到及完成广告浏览任务获取积分。
本示例基于ComponentContent构建任务签到弹窗,利用发布文本类型通知和用户首选项实现签到提醒功能,使用Progress展现浏览时间。
### [优惠券领取唯一性](https://developer.huawei.com/consumer/cn/doc/architecture-guides/get_coupons-0000002256272966)
设置优惠券领取唯一性是购物比价类应用中高频使用场景之一,如商家需要限制用户领取优惠券的次数。
本示例基于应用设备状态检测实现一台设备只能领取一次优惠券的效果。
### [下拉跳转客服页面](https://developer.huawei.com/consumer/cn/doc/architecture-guides/pull_to_jump-0000002282295284)
下拉跳转客服页面是购物比价类应用中高频使用场景之一,如下拉跳转至特定页面。
本示例基于Refresh组件实现页面下拉跳转,当页面下拉至特定距离后触发跳转功能。
### [刮刮乐抽奖效果](https://developer.huawei.com/consumer/cn/doc/architecture-guides/scratch_effect-0000002320935777)
刮刮乐抽奖效果是购物比价类应用中高频使用场景之一,如购物平台举办大促营销活动时,推出刮刮乐抽奖小游戏。
本示例基于Stack布局和Canvas绘图实现刮刮乐效果,通过PixelMap将结果图片放至Canvas底层,灰图(遮盖图)放至Canvas图层,使用Canvas的绘制能力将灰图逐渐去除,以此实现刮刮乐刮奖效果。
## 美食类行业实践
### [城市选择](https://developer.huawei.com/consumer/cn/doc/architecture-guides/food_citysearch-0000002272332685)
城市选择是美食类应用中高频使用场景之一,如用户旅游到新城市查看地方美食需要切换当前城市。
本示例基于AlphabetIndexer实现首字母快速定位城市列表效果。
### [商家地址路线导航](https://developer.huawei.com/consumer/cn/doc/architecture-guides/map_navigation-0000002248154336)
商家地址路线导航是美食类应用高频使用的场景之一,如用户需要寻找商家、查看地址信息及路线规划。
本示例基于Map Kit(地图服务)实现静态地图展示、路线规划与导航功能,可适用于商场、酒店、景区、医院、车站各类地址信息展示及路线导航。
## 拍摄美化类行业实践
### [图库照片滤镜添加](https://developer.huawei.com/consumer/cn/doc/architecture-guides/image_filter-0000002284048625)
为照片添加滤镜是拍摄美化应用的高频使用场景之一,如用户对图库(相册)里的照片进行美化时需要添加滤镜。
本示例基于@ohos.effectKit实现图片滤镜,再通过@ohos.file.fs和SaveButton组件实现图片存储。
### [拍照比例自定义](https://developer.huawei.com/consumer/cn/doc/architecture-guides/ratio_camera-0000002252528422)
自定义拍照比例是拍摄美化类应用的典型场景之一,如用户在拍照时需要设置相机的比例。
本示例基于相机服务实现拍照比例切换、前后摄像头反转、闪光灯开关的功能,通过相册管理模块保存图片到相册。
### [图片拼接](https://developer.huawei.com/consumer/cn/doc/architecture-guides/image_stitch-0000002287473193)
图片拼接是拍摄美化类应用的典型场景之一,如用户可以按无缝拼接、上下拼接和动态拼接等不同模板拼接多张图片。
本示例基于Image Kit实现不同模板拼接图片的功能,通过@ohos.file.photoAccessHelper保存图片到相册。
### [视频录制](https://developer.huawei.com/consumer/cn/doc/architecture-guides/video_recording-0000002258016882)
视频录制是拍摄美化应用的高频使用场景之一。
本示例基于@ohos.multimedia.camera和AVRecorder实现视频的录制,并提供查看拍摄视频的能力。
### [相机焦距缩放](https://developer.huawei.com/consumer/cn/doc/architecture-guides/customised_camera-0000002279772340)
相机焦距缩放是拍摄美化类应用的高频使用场景之一,如用户拍摄时需要变焦,可通过手势控制相机缩放比例调整拍摄画面。
本示例基于@ohos.multimedia.camera实现相机拍照能力,并提供开启闪光灯、通过手势缩放焦距等功能。
### [图片抠图](https://developer.huawei.com/consumer/cn/doc/architecture-guides/image_segmentation-0000002282720108)
图片抠图是拍摄美化类应用的典型场景之一。
本示例基于subjectSegmentation实现图片抠图,并将抠出的图片保存至图库。
## 公共关键技术方案
### [应用使用华为账号一键登录](https://developer.huawei.com/consumer/cn/doc/architecture-guides/practice-common-app-account-v1-0000001969004709)
本设计为HarmonyOS应用使用华为账号一键登录实践,应用设备形态只有手机端,提供华为账号一键登录、获取用户头像昵称、实时验证手机号、获取收货地址、未成年人模式和获取发票抬头等功能。
### [元服务使用华为账号隐匿登录](https://developer.huawei.com/consumer/cn/doc/architecture-guides/practice-common-feature-ability-account-v1-0000001942005508)
本设计为HarmonyOS元服务使用华为账号隐匿登录实践,应用设备形态只有手机端,提供华为账号隐匿登录等功能。
### [应用缓存清除](https://developer.huawei.com/consumer/cn/doc/architecture-guides/cache_clean-0000002231963970)
清除应用缓存是各类应用中的高频使用场景之一,本示例基于@ohos.file.fs实现缓存清理。
### [应用功能引导页](https://developer.huawei.com/consumer/cn/doc/architecture-guides/feature_guide_page-0000002271957437)
功能引导页是各类应用中的高频使用场景之一,如用户首次打开应用,需要基本功能引导。
本示例使用@ohos/high_light_guide三方库实现高亮区域和背景蒙层的明暗对比,引导用户使用应用功能。
### [H5页面侧滑拦截](https://developer.huawei.com/consumer/cn/doc/architecture-guides/backpage_by_gesture-0000002237371200)
H5页面侧滑拦截是各类应用中的高频使用场景之一,如用户浏览H5页面时需要侧滑回退至上一页而非框架页面上一页。
本示例基于@ohos.web.webview实现拦截H5页面侧滑回退至框架页面上一页。
### [启动页个性化设计](https://developer.huawei.com/consumer/cn/doc/architecture-guides/custom_swiper_guide_page-0000002282653913)
启动页个性化设计是各类应用中的高频使用场景之一。
本示例基于Swiper组件实现启动页个性化设计及最后一页点击“立即启动”跳转至首页的功能。
### [系统设置及系统应用跳转](https://developer.huawei.com/consumer/cn/doc/architecture-guides/jump_set-0000002283797405)
系统设置及系统应用跳转是各类应用的高频使用场景之一,如跳转至系统设置、一键拨打电话、查看与修改应用权限、打开浏览器浏览网页等。
本示例使用UIAbilityContext.startAbility跳转至系统设置或系统应用,使用call.makeCall跳转至拨打电话界面,使用productViewManager.loadProduct跳转至应用市场详情页。
### [应用主题版本切换](https://developer.huawei.com/consumer/cn/doc/architecture-guides/edition_switch-0000002284505357)
应用主题版本切换是各类应用中高频使用场景之一,如用户可自行选择切换标准版、大字版(关怀版、老年版)等主题版本,也可用于节日庆典主题更换等场景,提升用户体验与界面美感。
本示例使用PersistentStorage实现数据持久化,并控制Navigation首页渲染,实现不同主题切换的功能。
### [主题颜色自定义](https://developer.huawei.com/consumer/cn/doc/architecture-guides/custom_theme_demo-0000002290124205)
自定义主题颜色是各类应用中的高频场景之一。
本示例基于主题换肤和WithTheme组件实现自定义主题颜色并切换的功能。
### [用户身份认证](https://developer.huawei.com/consumer/cn/doc/architecture-guides/user_authentication-0000002290451165)
用户身份认证是各类应用中的高频使用场景之一,如用户查看重要文件、登录银行账户、支付交易时需要进行身份认证,保护隐私信息安全。
本示例通过用户认证实现用户身份认证(指纹认证或锁屏密码认证),认证成功后进入文件预览。
### [图片上传并预览](https://developer.huawei.com/consumer/cn/doc/architecture-guides/upload_picture-0000002256189702)
本示例通过Web组件拉起PhotoViewPicker实现上传图片并预览的功能。
### [H5页面图片及文件上传](https://developer.huawei.com/consumer/cn/doc/architecture-guides/webview_picker-0000002257162014)
H5页面图片及文件上传是各类应用的高频使用场景之一,如客服页面发送文件、聊天页面发送照片、H5页面预览文件等。
本示例使用Web组件拉起系统选择器(文件选择器、照片选择器、相机等),由用户在选择器上选择对应的文件、照片等资源,使Web页面获取到选择器的返回结果。
### [TabBar背景模糊效果](https://developer.huawei.com/consumer/cn/doc/architecture-guides/tab_bar_blur-0000002257193008)
TabBar背景模糊效果是各类应用中高频使用场景之一,如给Tab栏(页签栏、导航栏)加上背景模糊的毛玻璃效果后,可以带来更好的视觉体验。
本示例通过设置barBackgroundBlurStyle属性,实现背景模糊效果。
### [静默登录](https://developer.huawei.com/consumer/cn/doc/architecture-guides/silent_login-0000002292499361)
静默登录是各类应用中的高频使用场景之一,如初次登录后希望后续不再显示登录页面。
本示例通过关系型数据库实现用户信息存储,PersistentStorage实现静默登录状态的持久化存储。
### [加载时间及次数统计展示](https://developer.huawei.com/consumer/cn/doc/architecture-guides/code_instrumentation-0000002291963849)
统计加载时间及次数是各类应用的高频场景之一,如开发者(网站管理员)需要监控应用内各页面加载情况,提升网站性能。
本示例通过AOP代码插桩方法util.Aspect实现对新闻图片加载时间和次数的统计。
### [低功耗设备蓝牙扫描与连接](https://developer.huawei.com/consumer/cn/doc/architecture-guides/search_and_connect_ble-0000002293947117)
低功耗设备的蓝牙扫描与连接是各类应用中的高频使用场景之一,如用户需要连接智能手表、健康检测和智能家居等长时间运行的低功耗设备时,扫描到设备点击连接。
本示例基于短距通信服务,引入蓝牙access模块和蓝牙ble模块,实现低功耗设备蓝牙的扫描与连接功能。
### [截屏事件监听及分享](https://developer.huawei.com/consumer/cn/doc/architecture-guides/screenshot_listen-0000002261676460)
截屏分享是各类应用中的高频使用场景之一,如应用检测到用户截屏操作,会弹出分享框提示。
本示例基于@ohos.window,实现监听系统截屏事件的功能,并支持截图保存到相册和分享。
### [文件下载管理](https://developer.huawei.com/consumer/cn/doc/architecture-guides/agent_download_control-0000002262990970)
文件下载管理是各类应用中高频使用场景之一,如用户需要将网络文件下载至本地并进行管理。
本示例通过@ohos.request的agent模块下载网络文件,使用@ohos.file.fs管理已下载文件。
### [页面埋点监听](https://developer.huawei.com/consumer/cn/doc/architecture-guides/page_tracing_point-0000002283641138)
页面埋点监听是各类应用中的高频使用场景之一,如通过页面埋点监听用户对各个页面的访问频次、浏览时间及页面操作习惯,从而为用户提供个性化推荐设置。
本示例基于@ohos.arkui.observer实现对页面访问次数及页面访问时间的监听统计。
### [H5页面接入扫一扫](https://developer.huawei.com/consumer/cn/doc/architecture-guides/web_scan-0000002284631808)
H5页面接入扫一扫是各类应用中的高频使用场景之一,如银行、购物、娱乐、支付类等应用需要接入扫一扫功能。
本示例基于Scan Kit实现在H5页面中调用相机能力完成二维码的扫描和解析功能。
### [卡片一镜到底动效](https://developer.huawei.com/consumer/cn/doc/architecture-guides/pull_back-0000002320205289)
卡片一镜到底动效是各类应用中的高频使用场景之一,如用户使用应用市场时需要点击卡片放大全屏查看应用信息。
本示例通过共享元素转场实现点击卡片全屏查看以及下拉返回的一镜到底过渡动画效果。
### [无障碍读屏](https://developer.huawei.com/consumer/cn/doc/architecture-guides/accessibility-0000002320999085)
无障碍读屏是各类应用中的高频使用场景之一,是面向视障人士开发的一项功能,可以在点击屏幕时朗读出对应的内容。
本示例基于无障碍属性实现无障碍读屏时朗读文本内容。