# 行业关键场景示例合集 **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**: 8 - **Forks**: 2 - **Created**: 2025-06-04 - **Last Updated**: 2025-08-20 ## 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)。这些实践成果基于广泛的行业洞察与深度技术验证，为开发者提供可靠参考架构。 这些行业实践具备高度的场景适配性与工程普适性，能够有效应对鸿蒙应用复杂业务场景的挑战。无论是构建高性能应用，还是优化用户体验，均能助力开发者规避技术陷阱，显著提升开发效率，并提供坚实的技术支撑。 ## 一份简单的问卷反馈 亲爱的Harmony Next开发者，您好！
为了协助您高效开发，提高鸿蒙场景化示例的质量，希望您在浏览或使用后抽空填写一份简单的问卷，我们将会收集您的宝贵意见进行优化:heart::heart: [:arrow_right: **点击此处，或扫描下方二维码填写问卷** ](https://wj.qq.com/s2/19042938/95ab/)
## 行业实践索引 —— 点击跳转分类
汽车类行业实践 便捷生活类行业实践 运动健康类行业实践 教育类行业实践
综合办公类行业实践 公交地铁类行业实践 理财保险类行业实践 儿童教育类行业实践
旅游园区类行业实践 孕育健康类行业实践 新闻阅读类行业实践 影音娱乐类行业实践
社交通讯类行业实践 实用工具类行业实践 购物比价类行业实践 美食类行业实践
拍摄美化类行业实践 公共关键技术方案
## 汽车类行业实践 ### [底部弹窗固定显示](https://developer.huawei.com/consumer/cn/doc/architecture-guides/global_components-0000002313328742) 底部弹窗固定显示是汽车类应用的典型场景之一，如应用页面底部的通知弹窗，可及时向用户推送各种信息。 本示例基于@ohos.window实现在页面底部固定一个通知窗口，支持在所有页面显示，支持点击关闭窗口。 ## 便捷生活类行业实践 ### [车牌号编辑](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/3-day_view_calendar-0000002330222589) 三日视图日历及日程管理是便捷生活类应用中高频使用场景之一，如用户需要管理日程、查看课程表等。 本示例基于List实现了水平滑动的三日视图日历布局、日程添加、限位滚动效果等。 ### [地图页面半模态交互](https://developer.huawei.com/consumer/cn/doc/architecture-guides/map_bind-0000002297622922) 地图页面半模态交互是便捷生活类应用中高频使用场景之一，常用于地图导航类应用首页。 本示例基于BindSheet实现了地图应用的半模态交互页面，在页面上拉、下滑时，不影响用户与地图的交互，增强页面的灵活性，提升用户体验。 ### [证件类型选择](https://developer.huawei.com/consumer/cn/doc/architecture-guides/select_type_document-0000002340295529) 证件类型选择是便捷生活类应用中高频使用场景之一，如用户在注册账号、实名认证、信息填报时，需要选择证件类型并输入证件号码。 本示例基于不依赖UI组件的半模态页面openBindSheet构建用户注册的证件类型半模态页面，支持选择的证件类型包括居民身份证、境外人员身份证明、港澳台居民居住证等。 ### [双列表联动切换](https://developer.huawei.com/consumer/cn/doc/architecture-guides/dual_list_linkage-0000002319372516) 双列表联动切换是便捷生活类应用的高频使用场景之一。 本示例基于List组件实现双列表联动切换效果，当点击一级列表某一分类类型时，二级列表自动切换至对应的位置，当滑动二级列表时，一级列表自动切换至对应的分类类型。 ### [日历周视图、月视图切换](https://developer.huawei.com/consumer/cn/doc/architecture-guides/calendar_swiper-0000002355470245) 日历周视图、月视图切换是便捷生活类应用的高频使用场景之一。 本示例基于Swiper组件实现日历在周、月以及详情视图间切换的功能。 ### [快递地址文本识别](https://developer.huawei.com/consumer/cn/doc/architecture-guides/parcel_address_text_recognition-0000002326921238) 快递地址文本识别是便捷生活类应用的高频使用场景之一，如用户在填写收件或寄件地址时，可通过文本识别功能快速录入地址信息。 本示例基于PasteButton、textProcessing实现快递地址文本信息的粘贴、识别及填充功能，支持智能拆分姓名、电话和地址。 ### [地图旋转与移动](https://developer.huawei.com/consumer/cn/doc/architecture-guides/confirm_direction_in_map_to_rotate_and_move-0000002335234358) 地图旋转与移动是便携生活类应用中的高频使用场景之一，如地图根据用户的行进方向自动旋转和同步移动，以便用户快速判断行进路线。 本示例基于Map Kit，实现地图的旋转与移动功能。 ### [快递地址图片识别](https://developer.huawei.com/consumer/cn/doc/architecture-guides/parcel_address_image_recognition-0000002343383049) 快递地址图片识别是便捷生活类应用的高频使用场景之一，如用户在填写收件或寄件地址时，可选择上传地址图片，通过图片识别功能快速录入地址信息。 本示例通过Core Vision Kit图像识别技术提取图片中的文字信息，通过Natural Language Kit自然语言处理工具集对提取的文字进行结构化处理，智能提取关键信息（如姓名、电话、地址等），实现自动化信息录入功能。 ## 运动健康类行业实践 ### [运动开始、结束交互动画](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/match_scorer-0000002329513545) 比赛计分器是运动健康类应用中的典型场景之一，如篮球、乒乓球、羽毛球等比赛中需要计时和计分。 本示例基于ArkUI构建篮球比赛计分板，包括比赛倒计时、比分显示、一键加分（1分球/2分球/3分球）等功能。 ### [视频镜面播放](https://developer.huawei.com/consumer/cn/doc/architecture-guides/video_mirroring-0000002344967801) 视频镜面播放是运动健康类应用的典型场景之一，如用户利用镜面播放功能学习瑜伽、舞蹈、健身操等视频课程，帮助用户规范动作。 本示例基于AVPlayer实现视频播放功能，通过rotate实现组件镜面效果。 ### [健身记录三环效果](https://developer.huawei.com/consumer/cn/doc/architecture-guides/sport_three_ring-0000002345359673) 健身记录三环效果是运动健康类应用中高频使用场景之一。 本示例基于Progress组件构建三个环形进度条，实时显示运动数据，包括活动热量、锻炼时长、活动小时数三项数据。 ### [最大化显示完整路线](https://developer.huawei.com/consumer/cn/doc/architecture-guides/max_display_of_routes-0000002335684832) 最大化显示完整路线是运动健康类应用中的典型场景之一，如用户在完成户外跑步后，可以在地图上查看完整的运动轨迹。 本示例通过更改地图位置实现地图相机移动到指定路线的位置，并基于TraceOverlay绘制路线动画，实现在地图中心位置展示完整路径的效果。 ## 教育类行业实践 ### [调节分数区间筛选学校](https://developer.huawei.com/consumer/cn/doc/architecture-guides/adjusting_score_interval_screening_schools-0000002294530662) 调节分数区间筛选学校是教育类应用中的典型场景之一，如考生在筛选学校时，输入高考分数，设置分数范围筛选可报考的学校。 本示例基于Divider组件设置滑轨，在滑块上显示区间分数，实现调节分数区间的功能。 ### [双向滚动课程表](https://developer.huawei.com/consumer/cn/doc/architecture-guides/horizental_and_vertical_scrolling_list-0000002296361950) 双向滚动课程表是教育类应用中的典型场景之一。 本示例基于List组件和Scroll组件实现课程表横向和纵向滚动的功能。 ### [人物介绍展开与收起](https://developer.huawei.com/consumer/cn/doc/architecture-guides/spread_all_text-0000002297066498) 人物介绍展开与收起是教育类应用中的典型场景之一，如用户需要查看教师简介内容， 可点击展开或收起。 本示例基于Text以及maxLines属性实现点击相应按钮展开或收起人物介绍的功能，也适用于任何文本内容的展开与收起。 ### [堆叠式单词卡片](https://developer.huawei.com/consumer/cn/doc/architecture-guides/stackable_word_cards-0000002349040357) 堆叠式单词卡片是教育类应用中的典型场景之一。 本示例基于Stack组件、PanGesture和animateTo实现堆叠式单词卡片的滚动效果及删除功能。 ### [刷题页面滑动](https://developer.huawei.com/consumer/cn/doc/architecture-guides/english_practice-0000002315012362) 刷题页面是教育类应用的高频使用场景之一，如用户需要刷题练习各类学科知识。 本示例基于Swiper、LazyForEach组件实现可滑动刷题页面。 ### [试题PDF转长图保存](https://developer.huawei.com/consumer/cn/doc/architecture-guides/pdf_to_long_image-0000002349147473) 试题PDF转长图是教育类应用的高频使用场景之一，如用户可将PDF课件和试卷转换为长图，方便浏览并记忆学习内容。 本示例基于PDF Kit、@ohos.multimedia.image实现PDF转长图功能，将PDF文件内容转换为一张长图，并保存至图库。 ## 综合办公类行业实践 ### [考勤打卡位置获取](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等实现会议信息填写、添加相关附件、会议发布及添加会议到系统日程的功能。 ### [电子章添加和保存](https://developer.huawei.com/consumer/cn/doc/architecture-guides/pdf_add_mark-0000002324100453) 电子章添加和保存是综合办公类应用高频场景之一，如用户给PDF文件加盖电子公章。 本示例基于PDF Kit实现在文件中添加印章的效果，通过PdfView预览PDF，生成盖章文件并保存至用户文档目录中。 ### [选择文件打开方式](https://developer.huawei.com/consumer/cn/doc/architecture-guides/intergratoffice_demo_startability-0000002329091989) 选择文件打开方式是综合办公类应用中的典型场景之一，如用户在文件管理查看文件时，可以选择其他应用打开。 本示例主要基于UIAbilityContext.startAbility实现从已安装的应用中寻找符合要求的应用，打开特定文件的功能。 ### [跑马灯横幅通知](https://developer.huawei.com/consumer/cn/doc/architecture-guides/text_marquee-0000002331949121) 跑马灯横幅通知是综合办公类应用的高频使用场景之一，如应用主页中置顶的告警提示信息，将信息通过跑马灯的形式进行展示，提升用户关注度。 本示例基于组件通用属性linearGradient和Text组件textOverflow属性，实现了两端渐变的跑马灯横幅效果。 ### [消息稍后处理](https://developer.huawei.com/consumer/cn/doc/architecture-guides/later_items-0000002301534190) 消息稍后处理是综合办公类应用中的典型场景之一，如用户收到的任务消息当前不能及时处理时，可将消息标记为稍后处理。 本示例主要基于bindPopUp实现气泡弹窗效果，实现长按文本后弹出自定义菜单，选择将待办的消息添加到待办进行管理。 ### [证件照标签设置及推荐](https://developer.huawei.com/consumer/cn/doc/architecture-guides/recommend_id_photos-0000002344341185) 证件照标签设置及推荐是综合办公类应用中的高频使用场景之一，如用户注册、实名认证时，需要从相册快速选择并上传证件照。 本示例基于使用Picker选择媒体库资源实现相册证件照图片推荐功能，通过设置推荐图片类型，在相册中筛选出符合条件的图片并展示，缩短用户筛选时间。 ### [多层级嵌套企业通讯录](https://developer.huawei.com/consumer/cn/doc/architecture-guides/multi_level_nesting_list-0000002311817336) 多层级嵌套企业通讯录是综合办公类应用中的高频使用场景之一，如用户在发送通知、邮件时，从企业通讯录中选择部门批量发送。 本示例基于递归自定义组件和组件状态管理实现多层级嵌套的企业通讯录模型。 ### [线上会议主副窗口切换](https://developer.huawei.com/consumer/cn/doc/architecture-guides/conference_window_change-0000002325708930) 线上会议主副窗口切换是综合办公类应用的高频使用场景之一，如线上会议时，用户可将副窗中其他与会人的摄像头画面或投屏内容切换到主窗查看。 本示例基于WindowStage、XComponent和@ohos.multimedia.camera实现开启视频和主副窗口内容切换的功能。 ### [水印相机](https://developer.huawei.com/consumer/cn/doc/architecture-guides/watermark_camera-0000002334789536) 水印相机是综合办公类应用的高频使用场景之一，如用户可在图片里添加地理位置水印，以完成打卡或取证。 本示例利用@ohos.multimedia.camera实现自定义相机，并通过位置服务获取地理位置信息，将其作为水印添加到图片后保存。 ## 公交地铁类行业实践 ### [点击卡片跳转乘车码](https://developer.huawei.com/consumer/cn/doc/architecture-guides/qrcard_demo-0000002328156469) 点击卡片跳转乘车码是公交地铁类应用中高频使用场景之一，如用户点击桌面上的公交卡片，可快速跳转至乘车二维码界面。 本示例基于FormLink实现静态卡片交互，通过FormLink的router事件实现应用跳转。 ### [实时公交服务](https://developer.huawei.com/consumer/cn/doc/architecture-guides/real_time_bus-0000002300272510) 实时公交服务是公交地铁类应用的高频使用场景之一，如用户需要查看附近公交线路以及公交到站时间。 本示例基于@ohos.geoLocationManager获取当前位置信息，推送附近公交线路，实现实时公交服务能力。 ### [乘车记录查询](https://developer.huawei.com/consumer/cn/doc/architecture-guides/ride_records-0000002312400232) 乘车记录查询是公交地铁类应用的高频使用场景之一，如用户在网约车、公共交通等应用中查询历史行程。 本示例通过自定义组件实现时间筛选功能，通过List展示乘车记录数据。 ## 理财保险类行业实践 ### [股票行情走势分时线与日K线](https://developer.huawei.com/consumer/cn/doc/architecture-guides/stock_chart_x-0000002264336070) 分时线与日K线是理财保险类应用中高频使用场景之一，用于查看股票的短期走势和中期趋势。 本示例基于Canvas组件绘制了分时图与日K图，实现了分时线与日K线的动态刷新，以及日K线的放大、缩小、左移与右移，也适用于周K线、月K线等相关场景。 ### [每日收支日历图](https://developer.huawei.com/consumer/cn/doc/architecture-guides/daily_revenue_and_expenditure_calendar_chart-0000002294643216) 每日收支日历图是理财保险类应用中高频使用场景之一，如用户在日历上查看每日股票证券、基金期货等收支情况。 本示例通过Flex组件和DatePickerDialog弹窗组件构建每日收支日历图，支持查看每日总收支及指定日期的流水详情。 ### [股票键盘](https://developer.huawei.com/consumer/cn/doc/architecture-guides/stock_keyboard-0000002296858156) 股票键盘是理财保险类应用中高频使用场景之一，如用户在股票交易应用中，使用股票键盘完成买入、卖出等操作，提高交易效率和准确性。 本示例基于自定义键盘开发实践构建股票键盘，点击搜索栏，弹出股票键盘，支持数字键盘（默认）、英文键盘、中文系统键盘切换。数字键盘支持快速输入股票代码，如600、601等，支持设置输入字符串长度，本示例设置长度限制为8。 ## 儿童教育类行业实践 ### [计算验证弹窗](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/canvas_go_chess_pieces-0000002289055858) 围棋棋子绘制是儿童教育类应用中的典型场景之一。 本示例基于Canvas组件、文本计算等能力实现了围棋棋子的绘制，也适用于五子棋、象棋等棋盘类游戏的绘制。 ### [七巧板拼图](https://developer.huawei.com/consumer/cn/doc/architecture-guides/jigsaw_puzzle-0000002317714198) 七巧板拼图是儿童教育类应用中的典型场景之一，用户可以拖拽旋转七块拼图拼成特定图形。 本示例基于Canvas组件、animateTo、PanGesture实现七巧板拼图，也适用于其他拼图类游戏的绘制。 ### [儿童绘画板](https://developer.huawei.com/consumer/cn/doc/architecture-guides/draw_board-0000002353184357) 儿童绘画板是儿童教育类应用中的高频使用场景之一。 本示例基于Canvas和触摸事件实现儿童绘画板功能，支持选择画布背景色、画笔颜色、画笔粗细和简笔画图案。 ### [古诗文解析模板](https://developer.huawei.com/consumer/cn/doc/architecture-guides/poetry_analysis_template-0000002319599640) 古诗文解析模板是儿童教育类应用中的典型场景之一，如用户在阅读古诗文时，通常需要查看注释，更好地理解诗句所表达的内容。 本示例基于bindPopup实现古诗文解析模板，支持为文本关键内容添加下划线，点击带下划线文字，窗口自动弹出并显示解析内容。 ### [Canvas绘制固定图形](https://developer.huawei.com/consumer/cn/doc/architecture-guides/draw_fixed_shape-0000002366469545) Canvas绘制固定图形是儿童教育类应用的高频使用场景之一。 本示例基于Canvas实现在儿童绘画板中动态绘制矩形、圆形、三角形等固定图形。 ## 旅游园区类行业实践 ### [气泡提醒开启定位](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/map_marker-0000002332603737) 地图指定位置名称标记是旅游园区类应用中的高频使用场景之一，如对地图中商家、景点、车站等指定位置标记具体名称，便于用户查看。 本示例通过MapComponent与地图标记实现对地图指定位置添加标记的功能。 ### [酒店入住评价](https://developer.huawei.com/consumer/cn/doc/architecture-guides/hotel_check_in_review-0000002364291253) 酒店入住评价是旅游园区类应用的高频使用场景之一，如用户可查看待点评订单，提交包含图文的星级评价，反馈具体的入住体验。 本示例基于鸿蒙ArkUI声明式开发范式实现酒店入住评价的界面布局、交互逻辑及状态管理，通过ForEach列表渲染、NavPathStack路由跳转等能力，构建完整的用户评价流程。 ### [景点语音讲解](https://developer.huawei.com/consumer/cn/doc/architecture-guides/attraction_talk_sample-0000002335049696) 景点语音讲解是旅游园区类应用的高频使用场景之一，如用户需要了解景点详情，可点击播放该景点的语音讲解音频。 本示例基于AVPlayer实现播放音频的功能。 ## 孕育健康类行业实践 ### [宝宝成长记录时间轴](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/preset_book-0000002284947236) 加载预置数据库刷新文章列表是新闻阅读类应用中的典型场景之一。 本示例基于@ohos.resourceManager加载本地预置数据库（或从网络下载的数据库），实现文章列表刷新的功能。 ### [打字机效果](https://developer.huawei.com/consumer/cn/doc/architecture-guides/typewriter_effect-0000002322974369) 打字机效果是新闻阅读类应用的高频使用场景之一。 本示例基于setInterval控制文字逐个显示，实现类似打字机的效果。 ### [H5页面适配应用内字体大小设置](https://developer.huawei.com/consumer/cn/doc/architecture-guides/h5_fontsize-0000002289377882) H5页面适配应用内字体大小设置是新闻阅读类应用的高频使用场景之一，如用户在应用内点击进入H5页面，H5页面字体大小与应用中设置的字体大小保持一致，提升用户阅读体验。 本示例通过textZoomRatio设置H5页面字体大小，通过@ohos.data.preferences保存字体大小配置，实现持久化字体大小设置。 ### [正则匹配高亮关键字](https://developer.huawei.com/consumer/cn/doc/architecture-guides/regular_highlight-0000002328562941) 正则匹配高亮关键字是新闻阅读类应用的高频使用场景之一，如用户在文档中搜索关键词时，高亮显示搜索内容。 本示例基于正则表达式实现了在文档中匹配相关字符的功能，当匹配到相关字段，会将其高亮展示在文档中。 ### [阅读放大镜](https://developer.huawei.com/consumer/cn/doc/architecture-guides/magnifier-0000002296851262) 阅读放大镜是新闻阅读类应用中的典型场景之一，如用户在阅读文本时可使用放大镜辅助阅读。 本示例基于Stack层叠布局和组合手势实现文本局部放大效果，支持放大镜随触摸位置移动。 ### [文本标记高亮显示](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/erase_recognize-0000002313854866) 涂抹识别文字并复制是新闻阅读类应用的高频使用场景之一，如用户需要复制图片中的部分文字。 本示例基于textRecognition和Canvas实现了将图片涂抹区域中的文字识别出来，基于Pasteboard实现复制功能。 ### [阅读记录卡片](https://developer.huawei.com/consumer/cn/doc/architecture-guides/read_card-0000002351196153) 阅读记录卡片是新闻阅读类应用的高频使用场景之一，如用户可以点击卡片查看上次阅读的文章或书籍。 本示例通过updateForm接口实现应用向卡片同步信息，通过router事件实现卡片跳转到应用对应界面。 ### [书架设置-书籍导入、删除及搜索](https://developer.huawei.com/consumer/cn/doc/architecture-guides/bookshelf_demo-0000002334312212) 书架设置是新闻阅读类应用的高频使用场景之一，如用户可将本地书籍文件导入书架阅览，并进行删除、搜索等操作。 本示例基于Reader Kit、@ohos.file.fs实现本地书籍文件导入书架的功能，编辑删除、搜索及查看历史记录等功能详见代码下载。 ## 影音娱乐类行业实践 ### [获取视频信息](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/short_video_review-0000002286277826) 短视频评论是影音娱乐类应用的高频使用场景之一，如用户在播放短视频时可以弹出评论区，增强用户体验感。 本示例利用pushPathByName函数跳转至评论区页面，通过transition实现自定义评论区动画弹出，利用CustomDialog实现评论时键盘的弹出。 ### [视频倍速播放](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/merge_video-0000002297453758) 视频拼接创作是影音娱乐类应用的高频使用场景之一，如用户需要调整视频顺序，完成多视频拼接创作。 本示例使用List组件结合手势操作实现视频元素的拖动排序，使用三方库@ohos/mp4parser实现视频格式化以及视频合并。 ### [多机位视频播放](https://developer.huawei.com/consumer/cn/doc/architecture-guides/multi_camera_video-0000002297933590) 多机位视频播放是影音娱乐类应用中的典型场景之一，如视频软件页面展示多个窗口视频同时播放。 本示例基于Video组件展示了主机位和多个副机位视频的播放。 ### [视频点赞动画](https://developer.huawei.com/consumer/cn/doc/architecture-guides/video_like-0000002332695009) 视频点赞是影音娱乐类应用中的高频使用场景之一。 本示例基于keyframeAnimateTo关键帧动画实现连续点赞动画效果。 ### [视频中提取音频](https://developer.huawei.com/consumer/cn/doc/architecture-guides/audio_extractor-0000002298797484) 视频中提取音频是影音娱乐类应用中的典型场景之一，如用户浏览视频时，需要导出其中一段音频。 本示例使用三方库@ohos/mp4parser实现提取视频中音频的功能。 ### [视频自动暂停与恢复播放](https://developer.huawei.com/consumer/cn/doc/architecture-guides/video_player_resume-0000002299260088) 视频自动暂停与恢复播放是影音娱乐类应用中的高频使用场景之一，如用户在播放视频过程中，弹出闹钟或电话通知时自动暂停视频，关闭闹钟或电话时自动恢复播放。 本示例基于AVPlayer实现视频播放功能，并通过监听其音频焦点变化事件实现关闭闹钟或电话后自动恢复播放的功能。 ### [Navigation实现闪屏页](https://developer.huawei.com/consumer/cn/doc/architecture-guides/splash_page-0000002303412054) 闪屏页是影音娱乐类应用中的典型场景之一，如应用启动时使用闪屏页过渡。 本示例基于Navigation组件实现闪屏页效果。 ### [视频播放无缝转场](https://developer.huawei.com/consumer/cn/doc/architecture-guides/video_transition-0000002349370885) 视频播放无缝转场是影音娱乐类应用中的典型场景之一，如视频列表中自动播放的热门视频，点击进入视频详情页后继续播放。 本示例基于media.AVPlayer与XComponent实现视频播放，通过切换AVPlayer的surfaceId控制不同XComponent播放视频实现转场效果，基于Window实现视频全屏播放。 ### [音频波形动画](https://developer.huawei.com/consumer/cn/doc/architecture-guides/audio_waveform_animation-0000002349412093) 音频波形动画是影音娱乐类应用中的典型场景之一，如用户在录音或播放录音过程中实时展示音量大小。 本示例基于Canvas、@ohos.animator实现音频录制及播放过程中的音频波形动画效果，音量大时振幅大，音量小时振幅小。 ### [网络视频缓冲进度条](https://developer.huawei.com/consumer/cn/doc/architecture-guides/buffered_progress_bar-0000002351008293) 网络视频缓冲进度条是影音娱乐类应用中的典型场景之一，如用户播放在线视频时，进度条显示当前缓冲的可播放进度。 本示例基于AVPlayer实现在线视频播放，基于Slider实现视频播放和缓冲进度条显示。 ### [视频播放倍速锁定及取消](https://developer.huawei.com/consumer/cn/doc/architecture-guides/lock_speed-0000002317513156) 锁定视频播放倍速是影音娱乐类应用的高频使用场景之一，如用户在视频播放时，需要锁定或取消倍速。 本示例通过长按手势和拖动手势的顺序识别组合手势，实现长按边缘加速、下滑锁定倍速、再次下滑取消锁定的功能。 ### [视频截图](https://developer.huawei.com/consumer/cn/doc/architecture-guides/video_screenshot-0000002368729597) 视频截图是影音娱乐类应用中的典型场景之一，如用户可在观看视频时截取画面，并对截图的前后帧进行微调，避免所截图片与预期不符。 本示例基于AVPlayer和组件截图实现视频截图及前后帧微调的功能。 ## 社交通讯类行业实践 ### [好友动态-图片预览](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/weak_network_reconnection-0000002288904746) 弱网情况下的即时通讯是社交通讯类应用的典型场景之一。弱网通常意味着网络存在高延迟、高丢包率、连接不稳定等情况，这种情况下，即时通讯应用需要保持WebSocket连接的可靠性，避免频繁断开，或者在断开后能够快速恢复。 本示例基于@ohos.net.webSocket实现弱网情况下使用心跳和重连机制保障通讯。 * 心跳机制用于维持连接的活跃状态，防止由于长时间无数据传输而被防火墙或运营商断开。 * 重连机制用于检测连接状态，在WebSocket连接断开时进行重连。 ### [语音通话](https://developer.huawei.com/consumer/cn/doc/architecture-guides/voice_call-0000002328140805) 语音通话是社交通讯类应用的典型场景之一。 本示例基于AudioCapturer和AudioRender实现音频采集和音频渲染，通过socket完成音频数据网络传输等功能。 ### [历史网页浮窗](https://developer.huawei.com/consumer/cn/doc/architecture-guides/chat_web_float-0000002329723933) 历史网页浮窗是社交通讯类应用的高频使用场景之一，如用户在浮窗保存访问过的网页链接，点击浮窗进入历史网页链接列表页，点击链接可继续访问该网页。 本示例基于Navigation、Stack组件实现浮窗功能，通过LocalStorage保存网页链接。 ### [聊天页-语音转文字](https://developer.huawei.com/consumer/cn/doc/architecture-guides/voice_to_text-0000002296107966) 聊天页语音转文字是社交通讯类应用的高频使用场景之一，如用户在收到对方发送的语音消息时，需要将语音转为文字进行查看。 本示例基于语音识别实现语音消息转文字的功能。 ### [聊天页-长按识别二维码](https://developer.huawei.com/consumer/cn/doc/architecture-guides/long_press_scan_code-0000002297010246) 长按识别二维码是社交通讯类应用中高频使用场景之一。 本示例基于detectBarcode和LongPressGesture，实现长按图片扫码并跳转网页的功能。 ### [表情包推荐](https://developer.huawei.com/consumer/cn/doc/architecture-guides/emoji_pack_recommended-0000002330999945) 表情包推荐是社交通讯类应用中高频使用场景之一，如用户在聊天时，输入法会根据用户输入的文字，弹出对应的表情包，方便用户快速选择并发送合适的表情。 本示例基于Record类型数组存储并记录表情包与特定文字间的关系，并进行联想匹配。 ### [聊天页-发送定位卡片并跳转导航](https://developer.huawei.com/consumer/cn/doc/architecture-guides/chat_page_location_navigation-0000002322113637) 发送定位卡片并跳转导航是社交通讯类应用中高频使用场景之一，如用户在好友聊天界面选择并发送位置信息卡片，好友通过点击卡片打开位置详情页面，点击底部导航按钮跳转至对应导航应用。 本示例基于显示地图、标记、地点选取、打开Petal地图规划路线实现位置卡片导航能力。 ### [聊天页-气泡背景设置](https://developer.huawei.com/consumer/cn/doc/architecture-guides/chat_bubbles-0000002332591285) 设置气泡背景是社交通讯类应用中的高频使用场景之一，如用户可根据个人喜好设置聊天消息气泡背景，丰富应用个性化设置。 本示例通过backgroundImageResizable属性实现自定义拉伸气泡背景图片。 ### [应用消息列表](https://developer.huawei.com/consumer/cn/doc/architecture-guides/app_message_list-0000002332602789) 应用消息列表是社交通讯类应用的高频使用场景之一。 本示例是常用应用消息列表的模板，通过构造UI页面实现可复用的模板，核心是MessageCenter消息中心页面，指向消息设置页、消息详情页以及系统消息页的跳转。 ### [选择相片页面自定义](https://developer.huawei.com/consumer/cn/doc/architecture-guides/custom_album_style-0000002333520485) 选择相片页面自定义是社交通讯类应用中高频使用场景之一，如用户可根据相册名称以及媒体类型分类从图库（相册）选择图片。 本示例使用@ohos.file.PhotoPickerComponent访问图库，使用@ohos.file.AlbumPickerComponent访问相册列表，通过设置PickerOptions改变相册样式。 ### [侧边栏显示与隐藏](https://developer.huawei.com/consumer/cn/doc/architecture-guides/sidebar_slide-0000002308440974) 侧边栏显示与隐藏是社交通讯类应用中高频使用场景之一，如用户需要随时访问侧边栏中的内容，有效利用屏幕空间。 本示例基于组件内转场、属性动画实现应用侧边栏点击显示和左滑隐藏的效果。 ### [长图滑动的惯性滚动效果](https://developer.huawei.com/consumer/cn/doc/architecture-guides/inertial_sliding-0000002308946264) 长图滑动的惯性滚动效果是社交通讯类应用中的典型场景之一，如用户在朋友圈、聊天页浏览长图时，手指上下滑动后，图片会惯性滚动一段距离。 本示例基于@ohos.multimedia.image、PanGesture、Animator实现图片惯性滚动效果。 ### [电话号码自动识别](https://developer.huawei.com/consumer/cn/doc/architecture-guides/auto_phone_number_recognition-0000002317048484) 电话号码自动识别是社交通讯类应用中的典型场景之一。 本示例基于Natural Language Kit实现在文本中自动识别电话号码的功能，支持点击电话号码呼叫和新建联系人。 ### [关键词查找聊天记录](https://developer.huawei.com/consumer/cn/doc/architecture-guides/seek_chat_history-0000002351789373) 关键词查找聊天记录是社交通讯类应用中高频使用场景之一，如用户查找聊天内容时，可输入关键词快速定位其所在位置。 本示例基于正则表达式实现搜索关键词并高亮显示的功能，基于Navigation和List实现跳转到关键词所在位置的功能。 ### [动态发布时九宫格图片拖拽排序](https://developer.huawei.com/consumer/cn/doc/architecture-guides/drag_image_sort-0000002333934506) 动态发布时九宫格图片拖拽排序是社交通讯类应用的高频使用场景之一。 本示例基于Grid网格容器实现九宫格图片拖拽排序功能，可拖拽图片与其他任意图片交换位置。 ## 实用工具类行业实践 ### [雷达扫描动画](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/app_float_tool_ball-0000002322067001) 应用内悬浮工具球是实用工具类应用中的典型场景之一，如用户打开应用后可任意拖拽悬浮球，点击悬浮球时唤起自定义工具栏。 本示例通过设置应用子窗口实现应用内悬浮工具球效果，支持在悬浮工具球中自定义快捷操作，如页面上滑、页面下拉、退出当前应用等操作，提升用户体验。 ### [输入法应用沉浸模式](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/comment-0000002292394860) 应用内拉起应用市场评论页是实用工具类应用高频场景之一，如用户在应用内点击评论按钮，可自动拉起应用市场评论页，对应用进行评价。 本示例应用通过拼接应用市场DeepLink链接跳转至“写评论”页面。 ### [自动跳转下一个填写项](https://developer.huawei.com/consumer/cn/doc/architecture-guides/jump_to_next_input_text-0000002326705889) 自动跳转下一个填写项是实用工具类应用高频场景之一，如用户输入信息时，完成一项信息输入后自动切换至下一个填写项，无需手动点击。 本示例基于TextInput和focusControl实现输入焦点自动切换功能，可提高数据录入效率和用户体验，常用于表单填写、验证码输入等场景。 ### [TaskPool文件查询](https://developer.huawei.com/consumer/cn/doc/architecture-guides/taskpool_query-0000002292913090) TaskPool文件查询是实用工具类应用高频使用场景之一，如用户需要批量查询文件。 本示例基于@ohos.taskpool为应用程序提供多线程运行环境，降低资源消耗并提升系统性能，防止页面加载卡顿。 ### [车架号扫描识别](https://developer.huawei.com/consumer/cn/doc/architecture-guides/vehicle_frame_number_identification-0000002294949328) 车架号扫描识别是实用工具类应用高频使用场景之一。车架号（Vehicle Identification Number，简称VIN）是一个由17位字符组成的编码，用于唯一标识每一辆汽车，该编码包含了车辆的制造信息、型号、特征等内容。 本示例基于Camera Kit实现自定义相机扫描能力，通过通用文字识别实现车架号扫描识别功能。 ### [扫描二维码连接WiFi](https://developer.huawei.com/consumer/cn/doc/architecture-guides/wifi_scan-0000002330272949) 扫描二维码连接WiFi是实用工具类应用中的典型场景之一。 本示例基于scanBarcode和@ohos.wifiManager实现扫描二维码获取WiFi信息后，成功连接WiFi的效果。 ### [解压Zip文件](https://developer.huawei.com/consumer/cn/doc/architecture-guides/unzip_compressed_file_demo-0000002331316561) 解压Zip文件是实用工具类应用中的高频使用场景之一。 本示例基于@ohos.zlib及@ohos.worker实现Zip文件的解压。 ### [计算器](https://developer.huawei.com/consumer/cn/doc/architecture-guides/calculator-0000002298744774) 计算器是实用工具类应用中的典型场景之一。 本示例实现了计算器的计算功能，包括加减乘除四个基本运算，小数计算、百分数计算以及清除结果功能，通过@Watch装饰器对计算结果进行监听。 ### [NFC标签读写](https://developer.huawei.com/consumer/cn/doc/architecture-guides/nfc_read_write-0000002299096544) NFC标签读写是实用工具类应用的高频使用场景之一，如用户记录网址、文本或应用信息等，以便于下一次NFC标签贴近手机时会自动读取存储的信息并执行相应的动作。 本示例基于标准NFC-Tag实现了NFC标签读取与写入。 ### [指南针](https://developer.huawei.com/consumer/cn/doc/architecture-guides/compass_effect-0000002317882746) 指南针是实用工具类应用中的典型场景之一。 本示例通过@ohos.sensor、@ohos.geoLocationManager获取设备方向、大气压、海拔、磁场、经纬度等数据实现指南针效果，当设备移动时，指针始终指向设备所在位置的北方。 ### [水平仪](https://developer.huawei.com/consumer/cn/doc/architecture-guides/spirit_level-0000002362176089) 水平仪是实用工具类应用中的典型场景之一，如建筑施工、机械制造和工业生产等领域，通常需要使用水平仪测量平面是否水平或垂直。 本示例基于@ohos.sensor、Canvas实现水平仪效果，水平仪小球会因平面倾斜而移动，当小球静止于圆心时，平面处于水平状态。 ### [组件拖拽移动及放大缩小](https://developer.huawei.com/consumer/cn/doc/architecture-guides/drag_and_change-0000002364921921) 组件拖拽移动及放大缩小是实用工具类应用的高频使用场景之一，如用户可以通过拖拽实现对组件的移动以及放大缩小操作，自定义组件布局。 本示例通过手势处理实现组件跟手拖拽移动效果，通过修改Grid的属性实现组件的放大缩小效果。 ### [H5页面Base64图片保存](https://developer.huawei.com/consumer/cn/doc/architecture-guides/base64_image_save_h5-0000002334961556) H5页面Base64图片保存是实用工具类应用的高频使用场景之一，如用户在浏览H5页面时，可以长按Base64图片进行保存。 本示例基于Web组件，使用javaScriptProxy配置ArkTS与H5的双向通信能力，实现Base64类型图片在H5页面显示及长按保存到相册的功能。 ## 购物比价类行业实践 ### [优惠券卡包](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/product_card_demo-0000002324599805) 商品长按标记是购物比价类应用中高频使用场景之一，如用户在商品列表页面长按某商品，标记“不喜欢”、“不想要”、“购买过”、“查看相似商品”等。 本示例基于Grid布局和组合手势实现商品长按标记并随标记更新商品列表的功能，帮助用户过滤筛选商品。 ### [搜索及编辑搜索历史](https://developer.huawei.com/consumer/cn/doc/architecture-guides/search_history-0000002328895045) 搜索及编辑搜索历史是购物比价类应用中高频使用场景之一，如用户需要购买指定商品，在搜索框中输入该商品，搜索后将本次搜索的商品自动添加至搜索历史，便于用户查看。 本示例基于TextInput组件和ForEach遍历实现搜索、添加或删除搜索历史记录的功能。 ### [商品页面刷新和展示](https://developer.huawei.com/consumer/cn/doc/architecture-guides/scroll_celling_demo-0000002331639969) 商品页面刷新和展示是购物比价类应用中高频使用场景之一。 本示例基于Refresh、Scroll组件实现商品展示页面设计，包括搜索栏、业务模块栏、商品筛选栏和商品信息栏，支持页面刷新。 ### [优惠券页面骨架屏效果](https://developer.huawei.com/consumer/cn/doc/architecture-guides/skeleton_screen-0000002294856764) 优惠券页面骨架屏效果是购物比价类应用中的高频使用场景之一。骨架屏是一种在页面内容加载过程中显示占位符的视觉元素，通常用于展示页面的大致布局和结构，直到该页面内容加载完成，可提升用户体验。 本示例基于List组件和animateTo方法实现了优惠券页面的骨架屏效果，也可适用于首页内容、消息列表等页面数据加载场景。 ### [搜索历史展开与收起](https://developer.huawei.com/consumer/cn/doc/architecture-guides/search_history_expand_and_collapse-0000002343696461) 搜索历史展开与收起是购物比价类应用中高频使用场景之一。 本示例基于ArkUI构建搜索页面，实现搜索历史的展开与收起功能。 ### [订单状态切换与收货后评价](https://developer.huawei.com/consumer/cn/doc/architecture-guides/evaluation_after_received-0000002356153881) 订单状态切换与收货后评价是购物比价类应用的高频使用场景之一，如订单状态由待付款切换为待发货、待收货、待评价等，用户点击立即评价后进入评价编辑页面。 本示例基于@Provide装饰器和@Consume装饰器与@ohos.file.photoAccessHelper实现订单状态切换与收货后评价。 ### [首页菜单横向滚动高度自适应](https://developer.huawei.com/consumer/cn/doc/architecture-guides/auto_height_list-0000002359342093) 首页菜单横向滚动高度自适应是购物比价类应用的高频使用场景之一。 本示例基于List实现不同高度菜单列表滑动时，自适应高度，并且下方列表跟随菜单高度改变而移动。 ### [商品浏览记录存储](https://developer.huawei.com/consumer/cn/doc/architecture-guides/offering_browsing_history-0000002361003509) 商品浏览记录存储是购物比价类应用的高频使用场景之一。 本示例基于PersistentStorage与AppStorage将数据进行持久化处理，实现商品浏览记录存储。 ### [预约抢票倒计时](https://developer.huawei.com/consumer/cn/doc/architecture-guides/booking_to_grab_tickets-0000002304538948) 预约抢票是购物比价类应用的高频使用场景之一，如用户需要抢购演唱会、音乐会等门票时，可通过对应软件预约并添加日历提醒。 本示例基于Timer、@ohos.calendarManager实现抢票倒计时和预约后添加日历提醒的功能，支持点击计时器上方的“开抢”修改抢票时间。 ## 美食类行业实践 ### [城市选择](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/custom_refresh-0000002331948181) 下拉刷新和上拉加载效果自定义是美食类应用高频使用的场景之一，如刷新首页推荐内容、加载更多新内容。 本示例基于Refresh实现下拉刷新效果，基于WaterFlow实现上拉加载效果。 ## 拍摄美化类行业实践 ### [图库照片滤镜添加](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/compress_images-0000002322173825) 图片压缩至不同质量是拍摄美化类应用的典型场景之一。 本示例基于photoAccessHelper、dataSharePredicates、packToFile等能力实现图片压缩功能，支持选择图片压缩质量（高/中/低）、支持预览压缩后的图片及大小、支持下载压缩图片到相册。 ### [图片添加贴纸并保存](https://developer.huawei.com/consumer/cn/doc/architecture-guides/picture_sticker-0000002293373244) 图片添加贴纸并保存是拍摄美化类应用中高频使用场景之一。 本示例通过Stack组件实现图片添加贴纸功能，并通过组件截图和SaveButton实现编辑后图片保存的功能。 ### [图片压缩到指定大小以下](https://developer.huawei.com/consumer/cn/doc/architecture-guides/image_compress_to_specified_size-0000002294010024) 图片压缩到指定大小以下是拍摄美化类应用的典型场景之一。 本示例基于@ohos.multimedia.image实现图片压缩到指定大小以下，并将压缩后的图片保存至图库。 ### [图片人脸位置识别](https://developer.huawei.com/consumer/cn/doc/architecture-guides/face_detection-0000002328775849) 人脸位置识别是拍摄美化类应用的高频使用场景之一，如通过对人脸的定位，实现对人脸特定位置的美化修饰。 本示例使用faceDetector实现人脸位置识别功能并展示缩略图。 ## 公共关键技术方案 ### [应用使用华为账号一键登录](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) 无障碍读屏是各类应用中的高频使用场景之一，是面向视障人士开发的一项功能，可以在点击屏幕时朗读出对应的内容。 本示例基于无障碍属性实现无障碍读屏时朗读文本内容。 ### [闪屏页广告接入](https://developer.huawei.com/consumer/cn/doc/architecture-guides/splash_page_ad_access-0000002322822425) 闪屏页广告接入是各类应用中的高频使用场景之一，如用户打开应用时加载广告界面。 本示例在应用启动闪屏页接入广告，支持点击广告跳转第三方应用，或点击“跳过”进入应用主页面。 ### [登录前主页模糊效果](https://developer.huawei.com/consumer/cn/doc/architecture-guides/display_after_login-0000002293948070) 登录前主页模糊效果是各类应用中的高频使用场景之一。 本示例通过foregroundBlurStyle设置主页面内容模糊。 ### [H5页面图片保存或链接复制](https://developer.huawei.com/consumer/cn/doc/architecture-guides/press_to_save_or_copy-0000002328179937) H5页面图片保存或链接复制是各类应用中的高频使用场景之一，如用户在浏览图片时长按某图片进行保存或复制链接。 本示例通过OnContextMenuShowEvent监听长按图片事件，并通过使用保存控件保存图片或复制图片链接。 ### [用户协议与隐私政策弹窗](https://developer.huawei.com/consumer/cn/doc/architecture-guides/user_agreement_and_privacy_policy-0000002331953689) 用户协议与隐私政策弹窗是各类应用的高频使用场景之一，如用户首次打开应用，需要同意用户协议与隐私政策，才可进入应用。 本示例基于模态转场设置实现了用户协议与隐私政策的确认弹窗及协议与政策的详情页面。 ### [自定义TabBar导航栏切换动画](https://developer.huawei.com/consumer/cn/doc/architecture-guides/tab_toggle_animation-0000002332006785) 自定义TabBar导航栏切换动画是各类应用的高频使用场景之一。 本示例通过Stack堆叠布局和animateTo方法，构建自定义TabBar，实现Tab页签下划线随Tab切换平移效果，当用户切换Tab页签时与TabContent保持同步，提升用户体验。 ### [双栏页面覆盖整个应用](https://developer.huawei.com/consumer/cn/doc/architecture-guides/nav_mode_change-0000002298406768) 双栏页面覆盖整个应用是各类应用中的高频场景之一，如宽屏机器在适配双栏模式后，进入某些特定页面时页面覆盖整个应用，而非以双栏形式展示。 本示例通过调整Navigation组件的mode属性及@ohos.arkui.observer监听页面更新事件实现双栏页面覆盖整个应用的功能。 ### [H5页面加载自定义字体库](https://developer.huawei.com/consumer/cn/doc/architecture-guides/h5_load_custom_font_library-0000002349762829) H5页面加载自定义字体库是各类应用的高频使用场景之一，如应用在H5页面进行个性化阅读适配、无障碍阅读设计时，通常需要提供自定义字体库，优化用户体验。 本示例基于Web组件构建HTML页面加载自定义字体库的场景，支持动态加载字体库，点击字体切换按钮可切换字体样式。 ### [H5通过url scheme拉起应用](https://developer.huawei.com/consumer/cn/doc/architecture-guides/app_pull_up-0000002353615821) H5通过url scheme拉起应用是各类应用的高频使用场景之一。 本示例基于Deep Linking实现H5拉起应用时检测是否可以打开相关应用，已安装则拉起，未安装则打开应用市场进行下载。 ### [分类标题一键跳转内容](https://developer.huawei.com/consumer/cn/doc/architecture-guides/title_and_content_linkage-0000002365395897) 分类标题一键跳转内容是各类应用的高频使用场景之一。 本示例基于List组件实现标题与内容联动的效果，将点击操作与List绑定，点击分类标题时，内容页滚动至指定位置。