代码拉取完成，页面将自动刷新
HarmonyOS NEXT场景化示例代码仓是一个基于场景化需求的代码仓，旨在为鸿蒙开发者提供贴近业务场景的代码实现方案。本代码仓涵盖了多种分类的场景化需求，如场景化UI、场景化系统接口、媒体&图形、Web、创新场景、生态规则、行业最佳实践、NDK、三方框架&三方库等类目，可以帮助开发者快速实现各种功能。每一个demo都是独立的工程，开发者克隆到本地即可一键启动，按需引入到业务代码中。
亲爱的Harmony Next开发者，您好！
为了协助您高效开发，提高鸿蒙场景化示例的质量，希望您在浏览或使用后抽空填写一份简单的问卷，我们将会收集您的宝贵意见进行优化
| 场景化UI | 场景化系统接口 | 媒体&图形 | Web |
| 创新场景 | 生态规则 | 行业最佳实践 | |
| NDK | 三方框架&三方库 | 其他 |
| 更新日期 | 示例名称 | 示例介绍 |
|---|---|---|
| 2025/4/9 | Canvas演示及场景化签名板 | 本示例使用Canvas组件展示了从入门、进阶，至应用级别的案例。 |
| 2025/4/3 | 基于Canvas实现股票行情类分时线/日K线 | 本示例基于canvas实现了股票行情类分时线与日K线绘制，实现了分时线与日K线的动态刷新，日K线的放大与缩小，日K线的拖拽滑动展示。 |
| 2025/4/1 | 二级吸顶Demo | 适用于需要实现二级吸顶效果的场景。 |
| 2025/4/1 | 模拟草稿画板 | 本示例模拟草稿画板，实现画布线条绘制和双指滑动，线条可以回撤,删除和保存。 |
| 2025/3/29 | 基于OpenGL渲染实现Lut滤镜相机 | C++侧录制渲染，ArkTs侧UI展示和接口功能:1.预览：NDKCamera; 2.渲染：RenderThread; 3.取帧：glReadPixel。 |
| 2025/2/21 | 密钥库指纹认证加解密案例 | 介绍了使用密钥管理服务与用户认证服务实现指纹识别后加解密的功能。 该场景多用于需要指纹识别或其他身份认证后加解密的安全场景。 |
| 2025/2/21 | 数据迁移 | 通过重写BackupExtensionAbility来完成自定义的应用数据备份和迁移的逻辑。 |
| 2025/2/21 | 基于未成年人模式的应用内容过滤 | 本实例介绍应用如何与未成年人模式进行关联，从而根据需求来限制未成年人能够浏览的应用内容和使用的应用功能。 |
| 2025/2/21 | 背景显隐虚化 | 创建一个可拖动卡片，当拖动卡片时，背景图片模糊；当松开卡片时，背景图片正常显示。 |
| 2025/2/19 | H5页面跳转微信小程序 | 基于web组件加载H5页面，通过拦截H5页面中基于微信协议的url链接，通过want和startAbility机制，由鸿蒙app拉起微信app，并跳转到对应的小程序链接，在微信app内拉起小程序。 |
| 2025/2/19 | H5页面转图片保存 | 基于web组件加载H5页面，通过enableWholeWebPageDrawing设置网页开启全量绘制能力，再使用webPageSnapshot获取网页全量绘制结果，最后使用SaveButton安全机制把图片资源保存到媒体库。 |
| 2025/2/19 | ControlSector-测量方向角以及夹角 | 示例通过扇形的变化，获取扇形方向角和夹角。 |
| 2025/2/19 | 不同时间周期（日、周、月、年）展示统计数据 | 用折线统计图的形式，以各种时间维度（日、周、月、年）的形式展示心率统计数据 |
| 2025/2/19 | 通用权限申请 | 本demo以打卡场景，申请位置权限为示例，介绍通用权限申请方式，并且将核心功能抽离成组件，一行代码直接调用，免去复杂的编码过程。 |
| 2025/2/19 | 登录页一多适配 | 通过响应式布局和自适应布局，实现了登陆页面所有组件的多设备适配。 |
| 2025/2/19 | DateTimePicker组件实现不循环滚动 | 本示例介绍DatePicker组件实现不循环滚动，支持选择日期和时间。 |
| 2025/2/19 | 聊天类实时语音转文字 | 使用speechRecognizer实时语言转文字，并且根据光标位置插入文字，以及文本一键清空功能。 |
| 2025/2/19 | 碰一碰拉起元服务 | 通过NFC技术实现前台碰一碰拉起元服务。 |
本示例介绍以下五种常见的弹窗场景化案例。
本实例主要展示了图片应用场景相关demo。主要包括了图片预览、图片编辑美化、场景变化前后对比、图片切割九宫格、两张图片拼接、AI抠图、图片加水印等场景示例。
图片预览、图片编辑美化、场景变化前后对比
图片切割九宫格、两张图片拼接、AI抠图
图片加水印
微信支付示例demo。
Progress组件是进度条组件，用于显示内容加载或操作处理等进度。
应用首次进入时，会有弹窗请求安全隐私信息，用户可点击对应的隐藏协议跳转到对应隐藏协议的详情页面。从详情页面返回时，安全隐私的弹窗依然存在，用户可以继续进行授权/查看的操作。
本示例主要展示了沙箱文件分享相关的功能，使用 @ohos.file.fileuri 、@ohos.file.fs、@ohos.ability.wantConstant、@ohos.application.Want 等接口，实现了获取文件uri、创建沙箱文件、提供want中操作want常数和解释Flags说、应用组件间的信息传递的功能。
本示例主要简单构建页面加载 loading 布局。
本示例基于绑定到List组件的Scorller以及Scoll中的ScrollTo实现类似购物软件中的一键回到顶部功能
通过设计单独的路由模块和动态加载方法，解决一个Navigation组件下多har/hsp间路由跳转依赖耦合问题。
跳转短信、浏览器、设置、相机、拨号、应用市场等系统应用和已知bundlename、abilityname的三方应用。
沉浸式布局，使窗口覆盖整个页面，上下不会保留状态栏和导航栏
实现了一个预览水印保存图片的功能，其中有文字图片水印并且可移动。
本项目基于Canvas组件进行图片计数、图片局部涂鸦遮盖、图片局部自动绘制圆圈路径功能实现
本示例实现一个指定号码，拉起系统拨号页面
使用组件默认属性overlay实现组件级水印效果
创建一个可拖动卡片，当拖动卡片时，背景图片模糊；当松开卡片时，背景图片正常显示。
获取用户定位权限后，筛选用户定位附近门店信息，并支持地图查找地点来过滤筛选门店
本示例介绍获取定位后筛选出地理位置在附近的人。
在应用初始化的时候，主动设置了colorMode之后。修改系统的深色模式后在onConfigurationUpdate(newConfig: Configuration)方法中无法监听到回调。使用setColorMode设置模式为COLOR_MODE_NOT_SET，应用就会跟随系统变化
实现对单个页面设置为隐私模式，使其可以禁止截屏，录屏及分享屏幕等行为。
通过重写BackupExtensionAbility来完成自定义的应用数据备份和迁移的逻辑。
当前menu组件都是条状的，有些需求是整块，宽度几乎为页面宽度的菜单，这里使用popup来自定义一个方框的菜单。
本示例展示了包含设备状态管理场景、自定义半屏弹窗选项、页面切换动画的页面切换动画demo。
申请弹窗通知权限
本案例展示了一个可滑动面板的体验，轻量的内容展示窗口，方便在不同尺寸中切换。
实现了上下左右滑动列表的效果
监听设备网络状态
视频刻度进度条demo(video progress bar)。
提供一个自定义滑块、自定义进度条的Demo，可实现最大值，最小值，并动态显示当前值。
基于CanvasRenderingContext2D和三角函数实现了一个环形的可拖拽进度条
本示例介绍DatePicker组件实现不循环滚动，支持选择日期和时间。
图片视频预览功能，基于组合手势实现双击缩放，双指缩放，拖动查看，下载过程。
实现图片预览功能，基于组合手势实现双击缩放，双指缩放，拖动查看
实现一个安全验证，将滑块从左滑动到右的效果
一个应用需要获取3种不同的权限；每个权限需要用户确认后才开启，没有经过确认的权限不能执行成功。
本示例基于Grid 网格容器实现图片展示，根据九宫格格式最多展示九张图片，可以点击查看详情等功能。
使用ArkTS编写的带引导页的webDemo实现。
本项目基于effectKit进行图片滤镜转换功能实现。
使用ArkTS编写的会议发布页DEMO。
List-时间轴（横轴）
本示例介绍中间凸起的底部导航实现。
本示例介绍图片添加贴图的场景化案例。
示例实现Tabs的左对齐效果。
Progress-Linear(线性样式)-投票结果展示。
主动刷新卡片
【image】【属性resizable】 【局部拉伸】demo。
本示例介绍语音识别即语音转文字功能的实现。
子页与tab页互相联动，tab页为界面上方横条，子页变化引起tab页变化，tab页变化带动子页变化。
轮播图滑动时图片逐步变大，其他图片逐步变小。
本示例介绍实现由icon+Title+Action组合而成的导航列表卡片的功能。
视频添加水印。
本Demo主要讲解组件间通信方式。
实现了计算器计算功能的demo。
该Demo演示如何设置单个页面为隐私页面，解决在设置隐私后，所有页面都不能截图的问题。
告知用户关于应用的一些基本信息，例如：官网、开发者联盟、微信公众号等。
这是一个卡片轮播效果demo。
本示例基于显式动画、List组件、drawing接口实现了阅读器上下翻页、左右覆盖翻页、仿真翻页等效果。
这是一个联系人列表demo，根据联系的姓名首字母进行排序，动态获取所有联系人的首字母，在页面右侧生成字母导航，支持快读定位到某字母行。
本示例实践通过组件实现日历页面。
个人中心demo
隐私弹窗demo
自定义弹窗是应用开发需要实现的基础功能，包括但不限于鸿蒙开发者文档中定义的模态、半模态、Toast等形式，封装一个好用且和UI组件解耦的弹窗组件是开发者的高频诉求。
本实例为自定义键盘，有三种模式：数字输入模式、英文键盘和中文键盘。
本示例通过 setPreferredOrientation 方法来控制窗口的横竖屏显示，通过设置组件的 rotate 属性来控制组件的横竖屏显示。
在一个非@Entry的类中创建一个CustomDialogController弹窗。
提供了使用正则表达式筛出高亮的字符并高亮。
Demo中演示了一些常用基础组件的使用方法。
此Demo通过设置nestedScroll属性，实现Tab组件的TabBar和List组件吸顶效果。
利用Gauge实现渐变前景色效果。
本Demo介绍主窗口与子窗口的使用。。
该Demo实现了地址选择列表。
Demo中演示了点击、滑动都可实现切换动效，包含文字切换。
利用Grid布局实现网格功能区卡片。
1、对Image组件设置clipShape属性，并通过PathShape传入不同的裁剪命令，将Image组件裁剪为不同形状。 2、使用Path组件，通过设置commands属性，并传入不同的绘制命令，绘制出带圆角的不同形状的组件。
通过List模拟美团首页菜单横向滚动高度自适应效果。
利用网格布局实现下拉筛选框。
通过Marquee组件用于滚动展示一段单行文本。仅当文本内容宽度超过跑马灯组件宽度时滚动，不超过时不滚动。
示例通过扇形的变化，获取扇形方向角和夹角。
用折线统计图的形式，以各种时间维度（日、周、月、年）的形式展示心率统计数据
本Demo通过响应式布局和自适应布局，简单实现了一个登陆页面所有组件的多设备适配
保证登录界面在不同的设备上能够根据设备大小、分辨率来展示不同样式的界面。
通常手机
平板
折叠屏
横屏状态
本示例介绍DatePicker组件实现不循环滚动，支持选择日期和时间。
· 支持嵌入页面形式展示
· 支持弹窗形式展示
本demo按照文件上传、文件下载、文件预览、文件读取保存、文件压缩解压、文件拷贝6个分类进行场景化子demo构造展示，如文件上传展示中，模拟简易聊天场景，此时发送文件是个正常诉求，基于此场景完成相关元能力实现及展示。
文件上传、文件下载、文件预览
文件读取保存、文件压缩解压、文件拷贝
实现鸿蒙上ets和cpp层交互 加密和下载
基于OpenHarmony三方库 [ImageKnife] 进行场景开发使用： 支持不同类型的本地与网络图片展示。 支持磁拍照展示与图库照片选择展示。 支持进行图片变换: 支持图像像素源图片变换效果。
点击右上角的编辑按钮后，可以拖动item，并修改其顺序。
本示例展示了
BLE服务端的创建
服务端对客户端操作的响应和监听
BLE客户端的创建
客户端对特征值的读写。
基于关系型数据库的数据持久化。
介绍了使用密钥管理服务与用户认证服务实现指纹识别后加解密的功能。 该场景多用于需要指纹识别或其他身份认证后加解密的安全场景。
本工程通过Background Tasks Kit实现应用退出后台后继续播放网络音频。
国密算法的加解密：包含了SM2、SM4的加解密示例。
使用系统提供的NFC能力，简单实现了应用前台读卡效果。
本工程实现了简单的JSBridge，使H5和鸿蒙两侧可以互相调用对方的方法。
通过位置服务获取当前地理位置及经纬度。
本示例介绍的是拉起设备的认证能力。比如拉起锁屏密码/指纹/人脸认证能力。
提供通用的RSA加解密Demo。
密钥安卓格式和鸿蒙格式的转换。
本示例介绍的SM2加解密的实现方法。
使用了鸿蒙ohos.distributedDeviceManager模块，实现设备间相互认证的能力。
数据库备份恢复。
从应用内跳转到短信发送界面，并且携带收件人和发送内容。
集成日历kit将选课提醒加入日程，使用日历一键查看能力拉起目标页面。
本示例展示了蓝牙socket聊天通话，使用2部手机进行运行。
本示例使用'@ohos.events.emitter'模块,实现了在同一进程不同线程间通信的能力，包括单次订阅事件、取消订阅事件，以及发送信息能力。
使用@hms.collaboration.rcp接口提供的远程通信能力，支持http会话功能，应用程序可通过HTTP发起数据请求。常见的HTTP方法包括GET、POST、HEAD、PUT、DELETE、PATCH、OPTIONS。本示例实现get请求发送并接收网站的信息。
清理应用中缓存的Demo。
包含获取输入设备，监听设备热插拔，获取鼠标样式，设置鼠标样式，显示/隐藏鼠标。
本示例基于web组件加载H5页面，通过拦截H5页面中基于微信协议的url链接，通过want和startAbility机制，由鸿蒙app拉起微信app，并跳转到对应的小程序链接，在微信app内拉起小程序。
本示例基于web组件加载H5页面，通过enableWholeWebPageDrawing设置网页开启全量绘制能力，再使用webPageSnapshot获取网页全量绘制结果，最后使用SaveButton安全机制把图片资源保存到媒体库。
本demo以打卡场景，申请位置权限为示例，介绍通用权限申请方式，并且将核心功能抽离成组件，一行代码直接调用，免去复杂的编码过程。
本示例基于canvas实现了股票行情类分时线与日K线绘制，实现了分时线与日K线的动态刷新，日K线的放大与缩小，日K线的拖拽滑动展示。
C++侧录制渲染，ArkTs侧UI展示和接口功能:
1.预览：NDKCamera（）
2.渲染：RenderThread（）
3.取帧：glReadPixels（）
自定义相机拍照+图库文件选择/保存。
本示例模拟草稿画板，实现画布线条绘制和双指滑动，线条可以回撤,删除和保存。
本示例使用Canvas组件展示了从入门、进阶，至应用级别的案例。 入门案例中进行简单的线条绘制； 进阶案例中进行复杂图像绘制； 应用案例中给出了使用canvas画布组件进行自定义签名，其中还包括签字笔调色板更换、粗细的调整、重签、图像保存以及橡皮擦擦除等功能。
实现了使用手机摄像头进行视频录制、预览的功能。
OpenGLES渲染yuv数据。
使用AVRecorder实现音视频录制。
使用Swiper+AVPlayer实现短视频播放。
实现了图片转成pixelmap格式并移动和放大缩小
从相册中批量选择图片并通过imagePackerApi进行压缩，压缩后转成base64格式，可用于arkui或则H5中进行图片展示。
使用AVPlayer实现音视频播放。
本示例介绍如何使用speechRecognizer实时语言转文字，并且根据光标位置插入文字，以及文本一键清空功能。
本示例共介绍了五种Web相关的使用场景。为开发者提供了Web页面请求拦截加载、PDF预览以及下载、Web页面与应用侧交互等功能，方便开发者开发类似场景。
Web页面请求拦截加载、PDF预览以及下载、Web页面实名认证
Web页面手机充值、Web页面长按菜单
本示例是一个Webview相关场景的示例，搭建了不同的页面向用户提供不同Webview使用的场景。 用于在应用程序中显示Web页面内容，为开发者提供页面加载、页面交互、页面调试等能力。
本示例通过Web组件实现文件预览，支持pdf, docx, xlsx格式
web拍照与录音
Web显示缩放
本示例通过Web组件实现文件预览，支持pdf, docx, xlsx格式。
手机使用系统分享API，分享图片或文字，这里重点展示分享图片的效果，参考手机应用发起系统分享
本示例展示智能图片picker使用方法
本实例介绍应用如何与未成年人模式进行关联，从而根据需求来限制未成年人能够浏览的应用内容和使用的应用功能。本实例主要使用系统自带的未成年人模式来实现，同时在应用内也设置了一个简单的自带未成年人模式，在系统不支持或暂无法使用未成年人模式 的情况下使用，一般情况下建议使用系统自带的未成年人模式
该示例是一个连接网络的Demo,通过 socket 获取远端证书，在网络通信中，利用套接字（socket）技术来获取与之建立连接的远端服务器的数字证书。
餐饮美食Demo，包含外卖、店铺地图展示、店铺选择、商品列表，下单；扫码选择店铺。
鸿蒙生态招聘类元服务demo
通过app.json5中bundleName里的城市名称，匹配对应城市时区，并把对应时间显示在界面
消息页、服务切换UI Demo
手机银行类应用示例，实现了TAB页面的基本布局、动效等。
对标金融类产品，以此开发的行业通用Demo，实现基础的注册、登录、Web嵌入，一二级页面布局参考等，工程以feature方式进行模块化设计。
教师教育应用demo
地图展示 用户社区评论页demo
书籍阅读类应用demo
涉及蓝牙BLE连接 体重、趋势图、柱状图、指标组件 传感器计步能力。
预约、视频通话类demo
应用消息列表页UI示例Demo
实现了卡应用的基本框架，包括： 1、登录/首页 2、二维码 3、商城 4、我的/设置 等常见tab页的一级页面，方便同类型应用快速启动开发。
构建了一个教育demo，包括我的、提分、首页。
鸿蒙化权限二次申请。
使用C侧AVScreenCapture模块API完成视频录制到沙箱目录
相机流OpenGL后处理后通过Xcomponent送显
通过JSVM，可以在应用运行期间直接执行一段动态加载的JS代码。
通过AudioCapture录制PCM码流，并编码为amr格式，最终写入文件。
在Flutter工程中设置闪屏页
uniapp通过uts插件拉起华为花瓣地图。
阿里OSS客户端上传demo
基于声网SDK实现的简易直播Demo。
通过NFC技术实现前台碰一碰拉起元服务。打开手机NFC功能，打开应用使其页面位于前台，此时触碰NFC标签，可获取部分标签信息并展示在首页，并通过Deep Linking拉起本地的元服务。
通过NFC技术实现后台碰一碰拉起元服务。打开手机NFC功能，触碰NFC标签，点击系统提示框即可后台拉起元服务，并获取部分标签信息展示在首页。
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
