# 鸿蒙场景化示例合集

**Repository Path**: wxrocky/demo-index

## Basic Information

- **Project Name**: 鸿蒙场景化示例合集
- **Description**: 【鸿蒙 Harmony Next 示例 代码】所有仓库Demo集合，便于站内查询。
涵盖场景化UI、场景化系统接口、媒体&图形、Web、创新场景、生态规则、行业最佳实践、NDK、三方框架&三方库等类目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 20
- **Created**: 2025-03-25
- **Last Updated**: 2025-03-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 鸿蒙场景化示例合集

## 介绍
HarmonyOS NEXT场景化示例代码仓是一个基于场景化需求的代码仓，旨在为鸿蒙开发者提供贴近业务场景的代码实现方案。本代码仓涵盖了多种分类的场景化需求，如场景化UI、场景化系统接口、媒体&图形、Web、创新场景、生态规则、行业最佳实践、NDK、三方框架&三方库等类目，可以帮助开发者快速实现各种功能。每一个demo都是独立的工程，开发者克隆到本地即可一键启动，按需引入到业务代码中。

## 设计特点
- 开箱即用
- 贴近场景

## 一份简单的问卷反馈

亲爱的Harmony Next开发者，新年好！<br>
为了帮助更多开发者使用示例Demo高效的协助开发，提高示例Demo的质量，开发更多贴合场景的示例Demo。<br>
希望您在浏览或使用后抽空填写一份简单的问卷:page_with_curl:，我们将会收集您的宝贵意见进行优化:heart:

[:arrow_right: **点击此处，或扫描下方二维码填写问卷** ](https://wj.qq.com/s2/17783384/fe9e)

<div style="text-align: left;">
<img src="./image/survey_qr_code.png" width="200">
</div>

## 分类索引 —— 点击跳转分类
<table>
    <tr>
        <td> <a href="https://gitee.com/scenario-samples/demo-index#%E5%9C%BA%E6%99%AF%E5%8C%96ui"> 场景化UI </a> </td>
        <td> <a href="https://gitee.com/scenario-samples/demo-index#%E5%9C%BA%E6%99%AF%E5%8C%96%E7%B3%BB%E7%BB%9F%E6%8E%A5%E5%8F%A3"> 场景化系统接口 </a> </td>
        <td> <a href="https://gitee.com/scenario-samples/demo-index#%E5%AA%92%E4%BD%93%E5%9B%BE%E5%BD%A2"> 媒体&图形 </a> </td>
        <td> <a href="https://gitee.com/scenario-samples/demo-index#web"> Web </a> </td>
    </tr>
    <tr>
        <td> <a href="https://gitee.com/scenario-samples/demo-index#%E5%88%9B%E6%96%B0%E5%9C%BA%E6%99%AF"> 创新场景 </a> </td>
        <td> <a href="https://gitee.com/scenario-samples/demo-index#%E7%94%9F%E6%80%81%E8%A7%84%E5%88%99"> 生态规则 </a> </td>
        <td> <a href="https://gitee.com/scenario-samples/demo-index#%E8%A1%8C%E4%B8%9A%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5"> 行业最佳实践 </a> </td>
        <td> </td>
    </tr>
    <tr>
        <td> <a href="https://gitee.com/scenario-samples/demo-index#ndk"> NDK </a> </td>
        <td> <a href="https://gitee.com/scenario-samples/demo-index#%E4%B8%89%E6%96%B9%E6%A1%86%E6%9E%B6%E4%B8%89%E6%96%B9%E5%BA%93"> 三方框架&三方库 </a> </td>
        <td> <a href="https://gitee.com/scenario-samples/demo-index#%E5%85%B6%E4%BB%96"> 其他 </a> </td>
        <td> </td>
    </tr>
</table>

## 最近更新
:arrow_right: 点击 **示例名称** 跳转对应索引位置。
| 更新日期 | 示例名称 | 示例介绍 |
|------|------|------|
|  2025/2/21   |  <a href="https://gitee.com/scenario-samples/demo-index#%E5%AF%86%E9%92%A5%E5%BA%93%E6%8C%87%E7%BA%B9%E8%AE%A4%E8%AF%81%E5%8A%A0%E8%A7%A3%E5%AF%86%E6%A1%88%E4%BE%8B"> 密钥库指纹认证加解密案例  </a>  |   介绍了使用密钥管理服务与用户认证服务实现指纹识别后加解密的功能。 该场景多用于需要指纹识别或其他身份认证后加解密的安全场景。  |
|  2025/2/21   |  <a href="https://gitee.com/scenario-samples/demo-index#%E6%95%B0%E6%8D%AE%E8%BF%81%E7%A7%BB"> 数据迁移 </a>  |  通过重写BackupExtensionAbility来完成自定义的应用数据备份和迁移的逻辑。  |
|  2025/2/21   |  <a href="https://gitee.com/scenario-samples/demo-index#%E5%9F%BA%E4%BA%8E%E6%9C%AA%E6%88%90%E5%B9%B4%E4%BA%BA%E6%A8%A1%E5%BC%8F%E7%9A%84%E5%BA%94%E7%94%A8%E5%86%85%E5%AE%B9%E8%BF%87%E6%BB%A4"> 基于未成年人模式的应用内容过滤 </a>  |   本实例介绍应用如何与未成年人模式进行关联，从而根据需求来限制未成年人能够浏览的应用内容和使用的应用功能。  |
|  2025/2/21   |  <a href="https://gitee.com/scenario-samples/demo-index#%E8%83%8C%E6%99%AF%E6%98%BE%E9%9A%90%E8%99%9A%E5%8C%96"> 背景显隐虚化 </a>  |   创建一个可拖动卡片，当拖动卡片时，背景图片模糊；当松开卡片时，背景图片正常显示。  |
|  2025/2/19   |  <a href="https://gitee.com/scenario-samples/demo-index#h5%E9%A1%B5%E9%9D%A2%E8%B7%B3%E8%BD%AC%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F"> H5页面跳转微信小程序 </a>  |  基于web组件加载H5页面，通过拦截H5页面中基于微信协议的url链接，通过want和startAbility机制，由鸿蒙app拉起微信app，并跳转到对应的小程序链接，在微信app内拉起小程序。   |
|  2025/2/19   |  <a href="https://gitee.com/scenario-samples/demo-index#h5%E9%A1%B5%E9%9D%A2%E8%BD%AC%E5%9B%BE%E7%89%87%E4%BF%9D%E5%AD%98"> H5页面转图片保存 </a>  |  基于web组件加载H5页面，通过enableWholeWebPageDrawing设置网页开启全量绘制能力，再使用webPageSnapshot获取网页全量绘制结果，最后使用SaveButton安全机制把图片资源保存到媒体库。  |
|  2025/2/19   |  <a href="https://gitee.com/scenario-samples/demo-index#controlsector-%E6%B5%8B%E9%87%8F%E6%96%B9%E5%90%91%E8%A7%92%E4%BB%A5%E5%8F%8A%E5%A4%B9%E8%A7%92"> ControlSector-测量方向角以及夹角 </a>  | 示例通过扇形的变化，获取扇形方向角和夹角。  |
|  2025/2/19   |  <a href="https://gitee.com/scenario-samples/demo-index#%E4%B8%8D%E5%90%8C%E6%97%B6%E9%97%B4%E5%91%A8%E6%9C%9F%E6%97%A5%E5%91%A8%E6%9C%88%E5%B9%B4%E5%B1%95%E7%A4%BA%E7%BB%9F%E8%AE%A1%E6%95%B0%E6%8D%AE"> 不同时间周期（日、周、月、年）展示统计数据 </a>  | 用折线统计图的形式，以各种时间维度（日、周、月、年）的形式展示心率统计数据     |
|  2025/2/19   |  <a href="https://gitee.com/scenario-samples/demo-index#%E9%80%9A%E7%94%A8%E6%9D%83%E9%99%90%E7%94%B3%E8%AF%B7"> 通用权限申请 </a>  |  本demo以打卡场景，申请位置权限为示例，介绍通用权限申请方式，并且将核心功能抽离成组件，一行代码直接调用，免去复杂的编码过程。  |
|  2025/2/19   |  <a href="https://gitee.com/scenario-samples/demo-index#%E7%99%BB%E5%BD%95%E9%A1%B5%E4%B8%80%E5%A4%9A%E9%80%82%E9%85%8D"> 登录页一多适配 </a>  |   通过响应式布局和自适应布局，实现了登陆页面所有组件的多设备适配。  |
|  2025/2/19   |  <a href="https://gitee.com/scenario-samples/demo-index#datetimepicker%E7%BB%84%E4%BB%B6%E5%AE%9E%E7%8E%B0%E4%B8%8D%E5%BE%AA%E7%8E%AF%E6%BB%9A%E5%8A%A8"> DateTimePicker组件实现不循环滚动 </a>  |   本示例介绍DatePicker组件实现不循环滚动，支持选择日期和时间。|
|  2025/2/19   |  <a href="https://gitee.com/scenario-samples/demo-index#%E8%81%8A%E5%A4%A9%E7%B1%BB%E5%AE%9E%E6%97%B6%E8%AF%AD%E9%9F%B3%E8%BD%AC%E6%96%87%E5%AD%97"> 聊天类实时语音转文字 </a>  |  使用speechRecognizer实时语言转文字，并且根据光标位置插入文字，以及文本一键清空功能。 |
|  2025/2/19   |  <a href="https://gitee.com/scenario-samples/demo-index#%E7%A2%B0%E4%B8%80%E7%A2%B0%E6%8B%89%E8%B5%B7%E5%85%83%E6%9C%8D%E5%8A%A1%E5%89%8D%E5%8F%B0"> 碰一碰拉起元服务 </a>  |   通过NFC技术实现前台碰一碰拉起元服务。  |



## 场景化UI

### [Dialog - 弹窗类场景](https://gitee.com/scenario-samples/dialog)
本示例介绍以下五种常见的弹窗场景化案例。
- 应用启动时的隐私政策和用户协议弹窗
- 网络请求完成的结果提示弹窗
- 应用返回上一级页面的退出确认弹窗
- 个人信息填写的信息弹窗
- 应用使用过程中出现的付费类广告弹窗
<br><div align="center">
<img src=image/Dialog.gif height=400 />
</div>

### [Image - 图片操作类场景](https://gitee.com/scenario-samples/image)
本实例主要展示了图片应用场景相关demo。主要包括了图片预览、图片编辑美化、场景变化前后对比、图片切割九宫格、两张图片拼接、AI抠图、图片加水印等场景示例。
<br>
图片预览、图片编辑美化、场景变化前后对比
<div align="center">
<img src=image/图片操作_图片预览.gif height=400 />
<img src=image/图片操作_图片编辑美化.gif height=400 />
<img src=image/图片操作_场景变化前后对比.gif height=400 />
</div>

图片切割九宫格、两张图片拼接、AI抠图
<div align="center">
<img src=image/图片操作_图片切割九宫格.gif height=400 />
<img src=image/图片操作_两张图片拼接.gif height=400 />
<img src=image/图片操作_AI抠图.gif height=400 />
</div>

图片加水印
<div align="center">
<img src=image/图片操作_图片加水印.gif height=400 />
</div>

### [微信支付示例](https://gitee.com/scenario-samples/wechat-pay-demo)
微信支付示例demo。
<br><div align="center">
<img src=image/微信支付示例.gif height=400 />
</div>

### [弹窗并跳转demo](https://gitee.com/scenario-samples/dialog-jump-retained)
应用首次进入时，会有弹窗请求安全隐私信息，用户可点击对应的隐藏协议跳转到对应隐藏协议的详情页面。从详情页面返回时，安全隐私的弹窗依然存在，用户可以继续进行授权/查看的操作。
<br>
<div align="center">
    <img src=https://gitee.com/scenario-samples/dialog-jump-retained/raw/master/screenshot.gif width=200 height=400 />
</div>

### [应用之间分享和文件访问](https://gitee.com/scenario-samples/sandbox-share)
本示例主要展示了沙箱文件分享相关的功能，使用 @ohos.file.fileuri 、@ohos.file.fs、@ohos.ability.wantConstant、@ohos.application.Want 等接口，实现了获取文件uri、创建沙箱文件、提供want中操作want常数和解释Flags说、应用组件间的信息传递的功能。
<br><div align="center">
<img src=image/应用之间分享和文件访问1.png height=400 />
<img src=image/应用之间分享和文件访问2.png height=400 />
<img src=image/应用之间分享和文件访问3.png height=400 />
</div>

### [加载](https://gitee.com/scenario-samples/load-icon)
本示例主要简单构建页面加载 loading 布局。
<br><div align="center">
<img src=image/加载.png height=400 />
</div>

### [Scroll中点击图片移动到顶端](https://gitee.com/scenario-samples/move-to-top)
本示例基于绑定到List组件的Scorller以及Scoll中的ScrollTo实现类似购物软件中的一键回到顶部功能
<br><div align="center">
<img src=https://gitee.com/scenario-samples/move-to-top/raw/master/Screenshots/image.gif height=400 />
</div>


### [应用导航设计](https://gitee.com/scenario-samples/navigation-router)
通过设计单独的路由模块和动态加载方法，解决一个Navigation组件下多har/hsp间路由跳转依赖耦合问题。
<br><div align="center">
<img src=image/应用导航设计.gif height=400 />
</div>

### [跳转三方/系统应用](https://gitee.com/scenario-samples/pull-other-app)
跳转短信、浏览器、设置、相机、拨号、应用市场等系统应用和已知bundlename、abilityname的三方应用。
<br><div align="center">
<img src=image/跳转三方系统应用.gif width=200 height=400 />
</div>


### [沉浸式窗口显示图片](https://gitee.com/scenario-samples/immersive)
沉浸式布局，使窗口覆盖整个页面，上下不会保留状态栏和导航栏
<br><div align="center">
<img src=https://gitee.com/scenario-samples/immersive/raw/master/screenshots/device/demo_image.gif height=400 />
</div>


### [使用canvas预览移动文字和图片水印](https://gitee.com/scenario-samples/move-watermark)
实现了一个预览水印保存图片的功能，其中有文字图片水印并且可移动。
<br><div align="center">
<img src=image/使用canvas预览移动文字和图片水印.gif height=400 />
</div>

### [图片计数&画笔](https://gitee.com/scenario-samples/image-count)
本项目基于Canvas组件进行图片计数、图片局部涂鸦遮盖、图片局部自动绘制圆圈路径功能实现
<br><div align="center">
<img src=image/图片计数&画笔.gif height=400 />
</div>

### [拨号盘](https://gitee.com/scenario-samples/call-phone)
本示例实现一个指定号码，拉起系统拨号页面
<br><div align="center">
<img src=https://gitee.com/scenario-samples/call-phone/raw/master/screenshots/7.gif height=400 />
</div>


### [全局水印](https://gitee.com/scenario-samples/water-mark-view)
使用组件默认属性overlay实现组件级水印效果
<br><div align="center">
<img src=https://gitee.com/scenario-samples/water-mark-view/raw/master/image.png height=400 />
</div>

### [背景显隐虚化](https://gitee.com/scenario-samples/background-blurring)
创建一个可拖动卡片，当拖动卡片时，背景图片模糊；当松开卡片时，背景图片正常显示。
<br><div align="center">
<img src=https://gitee.com/scenario-samples/background-blurring/raw/master/ScreenShots/BackgroundBlurring.gif height=400 />
</div>

### [附近地点，附近门店](https://gitee.com/scenario-samples/near-shop)
获取用户定位权限后，筛选用户定位附近门店信息，并支持地图查找地点来过滤筛选门店
<br><div align="center">
<img src=https://gitee.com/scenario-samples/near-shop/raw/master/pictures/near_shop.gif height=400 />
</div>

### [附近的人](https://gitee.com/scenario-samples/neibor-people)
本示例介绍获取定位后筛选出地理位置在附近的人。
<br><div align="center">
<img src=https://gitee.com/scenario-samples/neibor-people/raw/master/%E9%99%84%E8%BF%91%E7%9A%84%E4%BA%BA.gif height=400 />
</div>


### [监听颜色模式切换](https://gitee.com/scenario-samples/dark-mode)
在应用初始化的时候，主动设置了colorMode之后。修改系统的深色模式后在onConfigurationUpdate(newConfig: Configuration)方法中无法监听到回调。使用setColorMode设置模式为COLOR_MODE_NOT_SET，应用就会跟随系统变化
<br><div align="center">
<img src=https://gitee.com/scenario-samples/dark-mode/raw/master/screenshots/DarkMode.gif height=400 />
</div>

### [单页面防截屏](https://gitee.com/scenario-samples/privacy)
实现对单个页面设置为隐私模式，使其可以禁止截屏，录屏及分享屏幕等行为。
<br><div align="center">
<img src=https://gitee.com/scenario-samples/privacy/raw/master/screenshots/privacy.gif height=400 />
</div>

### [数据迁移](https://gitee.com/scenario-samples/data-migration-demo)
通过重写BackupExtensionAbility来完成自定义的应用数据备份和迁移的逻辑。
<br><div align="center">
<img src=https://gitee.com/scenario-samples/data-migration-demo/raw/master/screenshots/DataMigrationDemo.gif height=400 />
</div>

### [方框式Menu](https://gitee.com/scenario-samples/menu)
当前menu组件都是条状的，有些需求是整块，宽度几乎为页面宽度的菜单，这里使用popup来自定义一个方框的菜单。<br><div align="center">
<img src=https://gitee.com/scenario-samples/menu/raw/master/screenshots/device/demo_image.gif height=400 />
</div>

### [自定义半屏弹窗](https://gitee.com/scenario-samples/animated-scene)
本示例展示了包含设备状态管理场景、自定义半屏弹窗选项、页面切换动画的页面切换动画demo。<br><div align="center">
<img src=https://gitee.com/scenario-samples/animated-scene/raw/master/ScreenShots/AnimatedScene.gif height=400 />
</div>


### [申请弹窗通知权限](https://gitee.com/scenario-samples/ma-la-song-bao-ming)
申请弹窗通知权限
<br><div align="center">
<img src=image/申请弹窗通知权限.gif height=400 />
</div>

### [实现可滑动面板](https://gitee.com/scenario-samples/bind-sheet)
本案例展示了一个可滑动面板的体验，轻量的内容展示窗口，方便在不同尺寸中切换。
<br><div align="center">
<img src=image/实现可滑动面板1.png height=400 />
<img src=image/实现可滑动面板2.png height=400 />
<img src=image/实现可滑动面板3.png height=400 />
</div>

### [上下&左右滑动列表](https://gitee.com/scenario-samples/slide-list)
实现了上下左右滑动列表的效果
<br><div align="center">
<img src=https://gitee.com/scenario-samples/slide-list/raw/master/Screenshots/examples.gif height=400 />
</div>

### [监听设备网络状态](https://gitee.com/scenario-samples/net-status-listen)
监听设备网络状态
<br><div align="center">
<img src=image/监听设备网络变化.gif height=400 />
</div>

### [Video刻度进度条组件](https://gitee.com/scenario-samples/video-progress-bar)
视频刻度进度条demo(video progress bar)。
<br><div align="center">
<img src=image/视频刻度进度条.gif height=400 />
</div>

### [自定义滑块、进度条](https://gitee.com/scenario-samples/custom-slider)
提供一个自定义滑块、自定义进度条的Demo，可实现最大值，最小值，并动态显示当前值。
<br><div align="center">
<img src=https://gitee.com/scenario-samples/custom-slider/raw/master/screenshots/1.gif height=400 />
</div>

### [环形可拖拽进度条](https://gitee.com/scenario-samples/canvas-circle)
基于CanvasRenderingContext2D和三角函数实现了一个环形的可拖拽进度条
<br><div align="center">
<img src=https://gitee.com/scenario-samples/canvas-circle/raw/master/Screenshots/image.gif height=400 />
</div>


### [日期时间不循环滚动](https://gitee.com/scenario-samples/date-picker-no-cycle)
本示例介绍DatePicker组件实现不循环滚动，支持选择日期和时间。
<br><div align="center">
<img src=https://gitee.com/scenario-samples/date-picker-no-cycle/raw/master/ScreenShots/DataPickerNoCycle.gif height=400 />
</div>


### [聊天页面图片视频预览](https://gitee.com/scenario-samples/image-video-preview)
图片视频预览功能，基于组合手势实现双击缩放，双指缩放，拖动查看，下载过程。

### [图片预览](https://gitee.com/scenario-samples/image-preview)
实现图片预览功能，基于组合手势实现双击缩放，双指缩放，拖动查看
<br><div align="center">
<img src=https://gitee.com/scenario-samples/image-preview/raw/master/Screenshots/1.gif  height=400 />
</div>

### [安全验证滑块](https://gitee.com/scenario-samples/security-verification-slider)
实现一个安全验证，将滑块从左滑动到右的效果
<br><div align="center">
<img src=image/安全验证滑块1.png width=200 height=200 />
<img src=image/安全验证滑块2.png width=200 height=200 />
<img src=image/安全验证滑块3.png width=200 height=200 />
</div>

### [相机、位置、运动权限的获取](https://gitee.com/scenario-samples/permission-request-tes)
一个应用需要获取3种不同的权限；每个权限需要用户确认后才开启，没有经过确认的权限不能执行成功。

### [微信图片九宫格demo](https://gitee.com/scenario-samples/weixin9gongge)
本示例基于Grid 网格容器实现图片展示，根据九宫格格式最多展示九张图片，可以点击查看详情等功能。

### [带引导页的webDemo](https://gitee.com/scenario-samples/web-demo)
使用ArkTS编写的带引导页的webDemo实现。
<br><div align="center">
<img src=image/带引导页的webDemo1.png height=400 />
<img src=image/带引导页的webDemo2.png height=400 />
</div>


### [图片滤镜](https://gitee.com/scenario-samples/image-filter)
本项目基于effectKit进行图片滤镜转换功能实现。
<br><div align="center">
<img src=image/图片滤镜.png height=400 />
</div>

### [会议发布页](https://gitee.com/scenario-samples/conference-release)
使用ArkTS编写的会议发布页DEMO。
<br><div align="center">
<img src=image/会议发布页.png height=400 />
</div>

### [List-时间轴（横轴）](https://gitee.com/scenario-samples/list-timeline)
List-时间轴（横轴）





### [中间突起Tab](https://gitee.com/scenario-samples/tab-bar)
本示例介绍中间凸起的底部导航实现。
<br><div align="center">
<img src=https://gitee.com/scenario-samples/tab-bar/raw/master/TabBar.gif height=400 />
</div>

### [图片添加贴纸](https://gitee.com/scenario-samples/image-move)
本示例介绍图片添加贴图的场景化案例。
<br><div align="center">
<img src=https://gitee.com/scenario-samples/image-move/raw/master/demo_image.PNG height=400 />
</div>

### [tabs左对齐](https://gitee.com/scenario-samples/tabs-align-left)
示例实现Tabs的左对齐效果。
<br><div align="center">
<img src=https://gitee.com/scenario-samples/tabs-align-left/raw/master/ScreenShot.png height=400 />
</div>

### [投票结果展示](https://gitee.com/scenario-samples/vote-result-display)
Progress-Linear(线性样式)-投票结果展示。

### [主动刷新卡片](https://gitee.com/scenario-samples/card-refresh-manual)
主动刷新卡片

### [【image】【属性resizable】 【局部拉伸】demo](https://gitee.com/scenario-samples/image-resizable-demo)
【image】【属性resizable】 【局部拉伸】demo。

### [压缩解压缩以及语音识别](https://gitee.com/scenario-samples/search-page_-speech-recognizer)
本示例介绍语音识别即语音转文字功能的实现。
<br><div align="center">
<img src=https://gitee.com/scenario-samples/search-page_-speech-recognizer/raw/master/%E8%AF%AD%E9%9F%B3%E8%AF%86%E5%88%AB.gif height=400 />
</div>


### [tab页+子页](https://gitee.com/scenario-samples/harmony-os_-demo-yong-pai-dev)
子页与tab页互相联动，tab页为界面上方横条，子页变化引起tab页变化，tab页变化带动子页变化。

### [轮播图滑动时图片动效](https://gitee.com/scenario-samples/swiper-demo)
轮播图滑动时图片逐步变大，其他图片逐步变小。

### [导航列表](https://gitee.com/scenario-samples/navigation-list)
本示例介绍实现由icon+Title+Action组合而成的导航列表卡片的功能。
<br><div align="center">
<img src=image/导航列表.png height=400 />
</div>

### [视频添加水印](https://gitee.com/scenario-samples/watermark-for-video)
视频添加水印。
<br><div align="center">
<img src=image/视频添加水印.png height=400 />
</div>

### [组件间通信](https://gitee.com/scenario-samples/communication)
本Demo主要讲解组件间通信方式。
<br><div align="center">
<img src=image/组件间通信.png height=400 />
</div>

### [计算器Demo](https://gitee.com/scenario-samples/calculator)
实现了计算器计算功能的demo。

### [单个页面设置隐私窗口](https://gitee.com/scenario-samples/privacy-entry-demo)
该Demo演示如何设置单个页面为隐私页面，解决在设置隐私后，所有页面都不能截图的问题。

### [关于页](https://gitee.com/scenario-samples/about-page-demo)
告知用户关于应用的一些基本信息，例如：官网、开发者联盟、微信公众号等。
<br><div align="center">
<img src=image/关于页.png height=400 />
</div>


### [Swiper](https://gitee.com/scenario-samples/swiper)
这是一个卡片轮播效果demo。

### [阅读器翻页效果](https://gitee.com/scenario-samples/page-flip)
本示例基于显式动画、List组件、drawing接口实现了阅读器上下翻页、左右覆盖翻页、仿真翻页等效果。
<br><div align="center">
<img src=image/PageFlip翻书效果demo.gif height=400 />
</div>


### [联系人页面](https://gitee.com/scenario-samples/contact-page)
这是一个联系人列表demo，根据联系的姓名首字母进行排序，动态获取所有联系人的首字母，在页面右侧生成字母导航，支持快读定位到某字母行。
<br><div align="center">
<img src=image/联系人页面.png height=400 />
</div>

### [自定义日历实现日程页](https://gitee.com/scenario-samples/calendar-demo)
本示例实践通过组件实现日历页面。
<br><div align="center">
<img src=image/日历控件.gif height=400 />
</div>

### [个人中心Demo](https://gitee.com/scenario-samples/personal-center)
个人中心demo

### [隐私弹窗demo](https://gitee.com/scenario-samples/policy-and-privacy)
隐私弹窗demo
<br><div align="center">
<img src=image/隐私弹窗demo.png height=400 />
</div>

### [基于Navigation实现的自定义弹窗](https://gitee.com/scenario-samples/global-popup)
自定义弹窗是应用开发需要实现的基础功能，包括但不限于鸿蒙开发者文档中定义的模态、半模态、Toast等形式，封装一个好用且和UI组件解耦的弹窗组件是开发者的高频诉求。
<br>
<div align="center">
<img src=https://gitee.com/scenario-samples/global-popup/raw/master/Screenshots/GlobalPopup.gif width=200 height=400 />
</div>

### [自定义键盘](https://gitee.com/scenario-samples/custom-keyboard)
本实例为自定义键盘，有三种模式：数字输入模式、英文键盘和中文键盘。
<br>
<div align="center">
<img src=https://gitee.com/scenario-samples/custom-keyboard/raw/master/Screenshots/CustomKeyboard.gif width=200 height=400 />
</div>

### [窗口与组件横竖屏切换](https://gitee.com/scenario-samples/orientation-switch)
本示例通过 setPreferredOrientation 方法来控制窗口的横竖屏显示，通过设置组件的 rotate 属性来控制组件的横竖屏显示。
<br>
<div align="center">
<img src=https://gitee.com/scenario-samples/orientation-switch/raw/master/screenshots/image.gif width=200 height=400 />
</div>

### [不依赖entry的弹窗Demo](https://gitee.com/scenario-samples/customiz-dialog-without-entry)
在一个非@Entry的类中创建一个CustomDialogController弹窗。
<br>
<div align="center">
    <img src=https://gitee.com/scenario-samples/customiz-dialog-without-entry/raw/master/screenshot.gif width=200 height=400 />
</div>

### [正则匹配高亮关键字Demo](https://gitee.com/scenario-samples/regular-highlight)
提供了使用正则表达式筛出高亮的字符并高亮。
<br>
<div align="center">
    <img src=https://gitee.com/scenario-samples/regular-highlight/raw/master/img_3.png width=200 height=400 />
</div>

### [基础组件使用Demo](https://gitee.com/scenario-samples/common-components)
Demo中演示了一些常用基础组件的使用方法。
<br>
<div align="center">
    <img src=https://gitee.com/scenario-samples/common-components/raw/master/screenshots/img.gif width=200 height=400 />
</div>

### [吸顶效果demo](https://gitee.com/scenario-samples/scroll-ceiling)
此Demo通过设置nestedScroll属性，实现Tab组件的TabBar和List组件吸顶效果。

### [Gauge实现渐变前景色效果](https://gitee.com/scenario-samples/gauge-demo)
利用Gauge实现渐变前景色效果。
<br>
<div align="center">
    <img src=https://gitee.com/scenario-samples/gauge-demo/raw/master/screenshots/img.gif width=200 height=400 />
</div>

### [主窗口和子窗口使用Demo](https://gitee.com/scenario-samples/master-and-sub-window-use)
本Demo介绍主窗口与子窗口的使用。。

### [地址选择列表](https://gitee.com/scenario-samples/select-region)
该Demo实现了地址选择列表。

### [Tab动态滑动切换](https://gitee.com/scenario-samples/tab-dyn-change)
Demo中演示了点击、滑动都可实现切换动效，包含文字切换。
<br>
<div align="center">
    <img src=https://gitee.com/scenario-samples/tab-dyn-change/raw/master/screenshots/img.gif width=200 height=400 />
</div>

### [网格功能区卡片](https://gitee.com/scenario-samples/grid-ribbon)
利用Grid布局实现网格功能区卡片。
<br>
<div align="center">
    <img src=https://gitee.com/scenario-samples/grid-ribbon/raw/master/screenshots/img.png width=200 height=400 />
</div>

### [组件裁剪和不规则圆角组件](https://gitee.com/scenario-samples/rounded-corner-component)
1、对Image组件设置clipShape属性，并通过PathShape传入不同的裁剪命令，将Image组件裁剪为不同形状。
2、使用Path组件，通过设置commands属性，并传入不同的绘制命令，绘制出带圆角的不同形状的组件。

### [List横向滑动容器高度自适应](https://gitee.com/scenario-samples/auto-height-list)
通过List模拟美团首页菜单横向滚动高度自适应效果。
<br>
<div align="center">
    <img src=https://gitee.com/scenario-samples/auto-height-list/raw/master/Screenshots/1.gif width=200 height=400 />
</div>

### [日期下拉选择](https://gitee.com/scenario-samples/dropdown-selection)
利用网格布局实现下拉筛选框。
<br>
<div align="center">
    <img src=https://gitee.com/scenario-samples/dropdown-selection/raw/master/screenshots/img.gif width=200 height=400 />
</div>

### [跑马灯效果](https://gitee.com/scenario-samples/marquee-effect)
通过Marquee组件用于滚动展示一段单行文本。仅当文本内容宽度超过跑马灯组件宽度时滚动，不超过时不滚动。
<br>
<div align="center">
    <img src=image/跑马灯效果.gif width=200 height=400 />
</div>

### [ControlSector-测量方向角以及夹角](https://gitee.com/scenario-samples/measure-the-angle)
示例通过扇形的变化，获取扇形方向角和夹角。
<br>
<div align="center">
    <img src=image/测量方向角以及夹角.gif width=200 height=400 />
</div>

### [不同时间周期（日、周、月、年）展示统计数据](https://gitee.com/scenario-samples/period-chart)
用折线统计图的形式，以各种时间维度（日、周、月、年）的形式展示心率统计数据
<br>
<div align="center">
    <img src=image/不同时间周期（日、周、月、年）展示统计数据.gif width=200 height=400 />
</div>

### [登录页一多适配](https://gitee.com/scenario-samples/multiple-login-page-adapt)
本Demo通过响应式布局和自适应布局，简单实现了一个登陆页面所有组件的多设备适配
保证登录界面在不同的设备上能够根据设备大小、分辨率来展示不同样式的界面。
<br>
<div align="center">
    <p>通常手机</p>
    <img src=image/登录页一多适配_通常手机.gif width=200 height=400 />
    <br>
    <p>平板</p>
    <img src=image/登录页一多适配_平板.gif width=400 height=300 />
    <br>
    <p>折叠屏</p>
    <img src=image/登录页一多适配_折叠屏.gif width=400 height=400 />
    <br>
    <p>横屏状态</p>
    <img src=image/登录页一多适配_横屏状态.gif width=400 height=200 />
</div>

### [DateTimePicker组件实现不循环滚动](https://gitee.com/scenario-samples/data-picker-no-cycle)
本示例介绍DatePicker组件实现不循环滚动，支持选择日期和时间。<br>
· 支持嵌入页面形式展示<br>
· 支持弹窗形式展示
<br>
<div align="center">
    <img src=image/DateTimePicker组件实现不循环滚动.gif width=200 height=400 />
</div>

## 场景化系统接口

### [File - 文件操作类场景](https://gitee.com/scenario-samples/file)
本demo按照文件上传、文件下载、文件预览、文件读取保存、文件压缩解压、文件拷贝6个分类进行场景化子demo构造展示，如文件上传展示中，模拟简易聊天场景，此时发送文件是个正常诉求，基于此场景完成相关元能力实现及展示。	
<br>
文件上传、文件下载、文件预览
<div align="center">
<img src=image/file_upload.gif height=400 />
<img src=image/file_download.gif height=400 />
<img src=image/file_preview.gif height=400 />
</div>

文件读取保存、文件压缩解压、文件拷贝
<div align="center">
<img src=image/file_read_write.gif height=400 />
<img src=image/file_compress.gif height=400 />
<img src=image/file_copy.gif height=400 />
</div>


### [Thread Demo](https://gitee.com/scenario-samples/thread)
实现鸿蒙上ets和cpp层交互 加密和下载
<br><div align="center">
<img src=https://gitee.com/scenario-samples/thread/raw/master/Screenshots/image.gif height=400 />
</div>


### [电话、短信能力](https://gitee.com/scenario-samples/message)
1. 可以通过call.makeCall来拉起拨号界面。并在makeCall函数的第一个参数中指定电话号码，该功能代码在2in1设备中不可用。
2. 可以通过显式指定bundleName为com.ohos.mms、abilityName为com.ohos.mms.MainAbility来拉起联系人应用，其中contactsName为用户名，telephone为电话号码。
<br><div align="center">
<img src=image/拉起电话呼叫、短信发送能力介绍.gif height=400 />
</div>

### [基于ImageKnife的图片处理](https://gitee.com/scenario-samples/image-knife)
基于OpenHarmony三方库 [ImageKnife] 进行场景开发使用：  支持不同类型的本地与网络图片展示。 支持磁拍照展示与图库照片选择展示。 支持进行图片变换: 支持图像像素源图片变换效果。
<br><div align="center">
<img src=image/相册选择图片压缩并转成Base64格式.gif height=400 />
</div>


### [频道选择UI，长按拖动、关闭等动画效果的实现](https://gitee.com/scenario-samples/my-application-xin-lang)
点击右上角的编辑按钮后，可以拖动item，并修改其顺序。
<br><div align="center">
<img src=image/频道选择UI，长按拖动、关闭等动画效果的实现1.jpeg height=400 />
</div>

### [BT_BLE连接](https://gitee.com/scenario-samples/bluetooth-ble)
本示例展示了
BLE服务端的创建
服务端对客户端操作的响应和监听
BLE客户端的创建
客户端对特征值的读写。
<br><div align="center">
<img src=image/BT_BLE连接.png height=400 />
</div>

### [基于关系型数据库的数据持久化](https://gitee.com/scenario-samples/data-management)
基于关系型数据库的数据持久化。

### [密钥库指纹认证加解密案例](https://gitee.com/scenario-samples/huks-user-auth-access)
介绍了使用密钥管理服务与用户认证服务实现指纹识别后加解密的功能。 该场景多用于需要指纹识别或其他身份认证后加解密的安全场景。
<br><div align="center">
<img src=https://gitee.com/scenario-samples/huks-user-auth-access/raw/master/entry/src/main/resources/base/media/effect.gif height=400 />
</div>


### [后台播放在线音频](https://gitee.com/scenario-samples/long-task)
本工程通过Background Tasks Kit实现应用退出后台后继续播放网络音频。
<br><div align="center">
<img src=image/后台播放在线音频.gif height=400 />
</div>

### [国密SM4加解密demo](https://gitee.com/scenario-samples/sm4)
国密算法的加解密：包含了SM2、SM4的加解密示例。
<br><div align="center">
<img src=image/国密SM4加解密demo.png height=400 />
</div>


### [NFC读卡](https://gitee.com/scenario-samples/nfcread-tag)
使用系统提供的NFC能力，简单实现了应用前台读卡效果。
<br><div align="center">
<img src=image/NFC读卡.png height=400 />
</div>


### [运动校园](https://gitee.com/scenario-samples/jsbridge-demo)
本工程实现了简单的JSBridge，使H5和鸿蒙两侧可以互相调用对方的方法。
<br><div align="center">
<img src=image/运动校园.png height=400 />
</div>



### [获取当前地理位置和定位](https://gitee.com/scenario-samples/get-current-location)
通过位置服务获取当前地理位置及经纬度。
<br><div align="center">
<img src=image/获取当前地理位置.gif height=400 />
</div>

### [用户认证、指纹认证、锁屏密码认证](https://gitee.com/scenario-samples/user-auth-demo)
本示例介绍的是拉起设备的认证能力。比如拉起锁屏密码/指纹/人脸认证能力。
<br><div align="center">
<img src=image/用户认证、指纹认证、锁屏密码认证.png height=400 />
</div>

### [加解密-RSA-使用已有公私钥](https://gitee.com/scenario-samples/encrypt-message)
提供通用的RSA加解密Demo。
<br><div align="center">
<img src=image/加解密-RSA-使用已有公私钥.png height=200 />
</div>


### [密钥安卓格式和鸿蒙格式的转换](https://gitee.com/scenario-samples/crypto-demo)
密钥安卓格式和鸿蒙格式的转换。

### [国密SM2加解密demo](https://gitee.com/scenario-samples/sm2)
本示例介绍的SM2加解密的实现方法。

### [设备认证管理](https://gitee.com/scenario-samples/my-application_-distributed-device-manager)
使用了鸿蒙ohos.distributedDeviceManager模块，实现设备间相互认证的能力。


<br><div align="center">
<img src=image/%E8%AE%BE%E5%A4%87%E8%AE%A4%E8%AF%81.gif height=400 />
</div>



### [数据库备份恢复](https://gitee.com/scenario-samples/database-demo)
数据库备份恢复。
<br><div align="center">
<img src=image/数据库备份恢复1.png height=400 />
<img src=image/数据库备份恢复2.png height=400 />
</div>

### [应用内转跳到系统短信发送界面](https://gitee.com/scenario-samples/jump-send-message)
从应用内跳转到短信发送界面，并且携带收件人和发送内容。
<br><div align="center">
<img src=image/应用内转跳到系统短信发送界面1.jpg height=400 />
</div>

### [日历开放能力-一键查看](https://gitee.com/scenario-samples/course-reminder-app-demo)
集成日历kit将选课提醒加入日程，使用日历一键查看能力拉起目标页面。
<br><div align="center">
<img src=image/北大元服务选课提醒demo.gif height=400 />
</div>

### [蓝牙SPP聊天室](https://gitee.com/scenario-samples/bluetooth-socket)
本示例展示了蓝牙socket聊天通话，使用2部手机进行运行。
<br>
<div align="center">
    <img src=https://gitee.com/scenario-samples/bluetooth-socket/raw/master/img.png width=400 height=400 />
</div>

### [进程内emitter请求封装](https://gitee.com/scenario-samples/emitter)
本示例使用'@ohos.events.emitter'模块,实现了在同一进程不同线程间通信的能力，包括单次订阅事件、取消订阅事件，以及发送信息能力。
<br>
<div align="center">
<img src=https://gitee.com/scenario-samples/emitter/raw/master/emitterRDM.gif width=200 height=400 />
</div>

### [rcp get请求](https://gitee.com/scenario-samples/rcp-demo)
使用@hms.collaboration.rcp接口提供的远程通信能力，支持http会话功能，应用程序可通过HTTP发起数据请求。常见的HTTP方法包括GET、POST、HEAD、PUT、DELETE、PATCH、OPTIONS。本示例实现get请求发送并接收网站的信息。
<br>
<div align="center">
    <img src=https://gitee.com/scenario-samples/rcp-demo/raw/master/rcpGetRDM.gif width=200 height=400 />
</div>

### [彻底清除应用缓存](https://gitee.com/scenario-samples/clean-cache-demo)
清理应用中缓存的Demo。

### [多模输入服务](https://gitee.com/scenario-samples/input-method)
包含获取输入设备，监听设备热插拔，获取鼠标样式，设置鼠标样式，显示/隐藏鼠标。

### [H5页面跳转微信小程序](https://gitee.com/scenario-samples/web-jump-miniprogram)
本示例基于web组件加载H5页面，通过拦截H5页面中基于微信协议的url链接，通过want和startAbility机制，由鸿蒙app拉起微信app，并跳转到对应的小程序链接，在微信app内拉起小程序。
<br>
<div align="center">
    <img src=image/H5页面跳转微信小程序.gif width=200 height=400 />
</div>

### [H5页面转图片保存](https://gitee.com/scenario-samples/h5-to-photo)
本示例基于web组件加载H5页面，通过enableWholeWebPageDrawing设置网页开启全量绘制能力，再使用webPageSnapshot获取网页全量绘制结果，最后使用SaveButton安全机制把图片资源保存到媒体库。
<br>
<div align="center">
    <img src=image/H5页面转图片保存.gif width=200 height=400 />
</div>

### [通用权限申请](https://gitee.com/scenario-samples/perms-demo)
本demo以打卡场景，申请位置权限为示例，介绍通用权限申请方式，并且将核心功能抽离成组件，一行代码直接调用，免去复杂的编码过程。
<br>
<div align="center">
    <img src=image/通用权限申请.gif width=200 height=400 />
</div>




## 媒体&图形

### [自定义相机](https://gitee.com/scenario-samples/camera)
自定义相机拍照+图库文件选择/保存。
<br><div align="center">
<img src=image/自定义相机.gif height=400 />
</div>

### [录制视频demo](https://gitee.com/scenario-samples/camera-kit-avrecorder)
实现了使用手机摄像头进行视频录制、预览的功能。
<br><div align="center">
<img src=image/录制视频demo.png height=400 />
</div>

### [YUV数据渲染](https://gitee.com/scenario-samples/yuv-demo)
OpenGLES渲染yuv数据。
<br><div align="center">
<img src=image/openGL渲染.gif height=400 />
</div>

### [音视频录制demo](https://gitee.com/scenario-samples/avrecorder-demo)
使用AVRecorder实现音视频录制。
<br><div align="center">
<img src=image/音视频播放demo.gif height=400 />
</div>

### [短视频播放demo](https://gitee.com/scenario-samples/short-avplayer-demo)
使用Swiper+AVPlayer实现短视频播放。
<br><div align="center">
<img src=image/短视频播放demo.gif height=400 />
</div>

### [相机图片放大](https://gitee.com/scenario-samples/scale-image)
实现了图片转成pixelmap格式并移动和放大缩小
<br><div align="center">
<img src=image/万能水印相机图片放大.gif height=400 />
</div>


### [相册选择图片压缩并转成Base64格式](https://gitee.com/scenario-samples/select-and-compress-pictures)
从相册中批量选择图片并通过imagePackerApi进行压缩，压缩后转成base64格式，可用于arkui或则H5中进行图片展示。
<br><div align="center">
<img src=image/相册选择图片压缩并转成Base64格式.gif height=400 />
</div>

### [音视频播放demo](https://gitee.com/scenario-samples/avplayer-demo)
使用AVPlayer实现音视频播放。
<br><div align="center">
<img src=image/音视频播放demo.gif height=400 />
</div>

### [聊天类实时语音转文字](https://gitee.com/scenario-samples/live-speech-to-text-conversion)
本示例介绍如何使用speechRecognizer实时语言转文字，并且根据光标位置插入文字，以及文本一键清空功能。
<br><div align="center">
<img src=image/聊天类实时语音转文字.gif height=400 />
</div>








## Web	

### [Web - 网页交互类场景](https://gitee.com/scenario-samples/web)
本示例共介绍了五种Web相关的使用场景。为开发者提供了Web页面请求拦截加载、PDF预览以及下载、Web页面与应用侧交互等功能，方便开发者开发类似场景。
<br>
Web页面请求拦截加载、PDF预览以及下载、Web页面实名认证
<div align="center">
<img src=image/Web用户权限校验以及应用广告.gif height=400 />
<img src=image/PDF文件浏览以及下载.gif height=400 />
<img src=image/Web页面实名认证.gif height=400 />
</div>

Web页面手机充值、Web页面长按菜单
<div align="center">
<img src=image/Web页面手机充值.gif height=400 />
<img src=image/Web页面长按菜单.gif height=400 />
</div>


### [Web相关场景Demo](https://gitee.com/scenario-samples/ark-web-demo)
本示例是一个Webview相关场景的示例，搭建了不同的页面向用户提供不同Webview使用的场景。 用于在应用程序中显示Web页面内容，为开发者提供页面加载、页面交互、页面调试等能力。
<br><div align="center">
<img src=image/Web相关场景Demo.png height=400 />
</div>

### [Web组件预览PDF文件](https://gitee.com/scenario-samples/loading-pdf-excel-word)
本示例通过Web组件实现文件预览，支持pdf, docx, xlsx格式

<br><div align="center">
<img src=image/Web组件预览PDF文件.gif height=400 />
</div>


### [Web组件调用相机拍照](https://gitee.com/scenario-samples/webdemos)
web拍照与录音
<br><div align="center">
<img src=https://gitee.com/scenario-samples/webdemos/raw/master/Web%E7%BB%84%E4%BB%B6%E8%B0%83%E7%94%A8%E7%9B%B8%E6%9C%BA%E6%8B%8D%E7%85%A7.gif height=400 />
</div>

### [Web显示缩放](https://gitee.com/scenario-samples/web-adaptation)
Web显示缩放

### [Web组件预览PDF文件](https://gitee.com/scenario-samples/web-pdf-viewer)
本示例通过Web组件实现文件预览，支持pdf, docx, xlsx格式。






## 创新场景

### [免密登录](https://gitee.com/scenario-samples/remember-pwd)
<br><div align="center">
<img src=image/【免密登录】【关键资产存储服务】.gif height=400 />
</div>

### [系统分享](https://gitee.com/scenario-samples/share)
手机使用系统分享API，分享图片或文字，这里重点展示分享图片的效果，参考[手机应用发起系统分享](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/share-mobilephone-app-share-V5?catalogVersion=V5)
<br><div align="center">
<img src=image/系统分享.gif height=400 />
</div>

### [智能图片picker](https://gitee.com/scenario-samples/smartphoto-picker-demo)
本示例展示智能图片picker使用方法

### [基于未成年人模式的应用内容过滤](https://gitee.com/scenario-samples/new-minors-protection)
本实例介绍应用如何与未成年人模式进行关联，从而根据需求来限制未成年人能够浏览的应用内容和使用的应用功能。本实例主要使用系统自带的未成年人模式来实现，同时在应用内也设置了一个简单的自带未成年人模式，在系统不支持或暂无法使用未成年人模式 的情况下使用，一般情况下建议使用系统自带的未成年人模式
<br><div align="center">
<img src=https://gitee.com/scenario-samples/new-minors-protection/raw/master/entry/src/main/resources/base/media/new_minors_mode.gif height=400 />
</div>





	





## 生态规则

### [设置禁止截屏的隐私模式](https://gitee.com/scenario-samples/privacy-window)
本文主要讲如何设置页面隐私模式。在我们需要将手机的部分窗口保密时，就需要设置成禁止截屏或者录屏的模式。系统层面提供了这一能力。
<br><div align="center">
<img src=https://gitee.com/scenario-samples/privacy-window/raw/master/screenshots/display.gif height=400 />
</div>

### [基于设置应用的应用权限、通知设置跳转](https://gitee.com/scenario-samples/to-settings)
场景描述：<br>
引导用户跳转到系统设置页进行权限，通知的相关设置，类似android和iOS应用中常见的应用内跳转到设置进行通知开启或权限设置的操作。<br>
应用经常会遇到如下的业务诉求：<br>
场景一：如果应用首次拒绝了消息通知，应用希望能够引导用户拉起设置应用设置允许通知，用来接收应用内的推送消息；并且在设置完后返回页面可以监听到修改后的状态。<br>
场景二：当用户使用一些需要用户授权的api时（如访问获取联系人信息），若用户首次拒绝授权，则需要引导用户到权限设置页面能够主动进行应用权限的修改。<br>
场景三：支持打开/关闭系统功能如Wi-Fi、NFC、移动网络、蓝牙等。<br>
<br>
<div align="center">
<img src=https://gitee.com/scenario-samples/to-settings/raw/master/entry/src/main/resources/base/media/img_1.gif height=400 />
<img src=https://gitee.com/scenario-samples/to-settings/raw/master/entry/src/main/resources/base/media/img_2.gif height=400 />
</div>




## 行业最佳实践	

### [服务端证书校验](https://gitee.com/scenario-samples/socket-tls)
该示例是一个连接网络的Demo,通过 socket 获取远端证书，在网络通信中，利用套接字（socket）技术来获取与之建立连接的远端服务器的数字证书。

### [餐饮美食Demo](https://gitee.com/scenario-samples/food)
餐饮美食Demo，包含外卖、店铺地图展示、店铺选择、商品列表，下单；扫码选择店铺。
<br><div align="center">
<img src=image/餐饮美食Demo.gif height=400 />
</div>

### [招聘求职类](https://gitee.com/scenario-samples/job)
鸿蒙生态招聘类元服务demo
<br><div align="center">
<img src=image/招聘求职类.gif height=400 />
</div>

### [时钟demo](https://gitee.com/scenario-samples/world-clock)
通过app.json5中bundleName里的城市名称，匹配对应城市时区，并把对应时间显示在界面
<br><div align="center">
<img src=image/时钟demo.gif height=400 />
</div>

### [消息页、服务切换UI Demo](https://gitee.com/scenario-samples/msg-uidemo)
消息页、服务切换UI Demo
<br><div align="center">
<img src=image/参易好-消息页.gif height=400 />
</div>

### [手机银行示例](https://gitee.com/scenario-samples/bankdemo)
手机银行类应用示例，实现了TAB页面的基本布局、动效等。
<br><div align="center">
<img src=image/手机银行示例.png height=400 />
</div>

### [通用模版Demo](https://gitee.com/scenario-samples/generic-template-demo)
对标金融类产品，以此开发的行业通用Demo，实现基础的注册、登录、Web嵌入，一二级页面布局参考等，工程以feature方式进行模块化设计。
<br><div align="center">
<img src=image/通用模版Demo.png height=400 />
</div>

### [教师教育应用Demo](https://gitee.com/scenario-samples/teacher)
教师教育应用demo
<br><div align="center">
<img src=image/教师教育应用Demo.gif height=400 />
</div>

### [旅游Demo](https://gitee.com/scenario-samples/traveldemo)
地图展示 用户社区评论页demo

<br><div align="center">
<img src=image/woyouzijia.gif height=400 />
</div>

### [书籍类应用demo](https://gitee.com/scenario-samples/book)
书籍阅读类应用demo

### [蓝牙应用Demo](https://gitee.com/scenario-samples/blue-tooth)
涉及蓝牙BLE连接 体重、趋势图、柱状图、指标组件 传感器计步能力。
<br><div align="center">
<img src=image/蓝牙应用Demo.png height=400 />
</div>

### [预约、视频通话类demo](https://gitee.com/scenario-samples/meet)
预约、视频通话类demo

### [应用消息列表页demo](https://gitee.com/scenario-samples/message-list)
应用消息列表页UI示例Demo
<br><div align="center">
<img src=image/大参林百科-应用消息列表页.gif height=400 />
</div>

### [卡类应用demo](https://gitee.com/scenario-samples/card-demo)
实现了卡应用的基本框架，包括： 1、登录/首页 2、二维码 3、商城 4、我的/设置 等常见tab页的一级页面，方便同类型应用快速启动开发。
<br><div align="center">
<img src=image/卡类应用demo.gif height=400 />
</div>


### [教育APP示例](https://gitee.com/scenario-samples/score)
构建了一个教育demo，包括我的、提分、首页。

### [鸿蒙化权限二次申请](https://gitee.com/scenario-samples/request-permission)
鸿蒙化权限二次申请。
<br>
<div align="center">
    <img src=https://gitee.com/scenario-samples/request-permission/raw/master/Screenshots/%E6%9D%83%E9%99%90%E7%94%B3%E8%AF%B7.gif width=200 height=400 />
</div>









## NDK	

### [录屏](https://gitee.com/scenario-samples/avscreen-capture-demo)
使用C侧AVScreenCapture模块API完成视频录制到沙箱目录
<br><div align="center">
<img src=image/录屏.gif height=400 />
</div>

### [openGL渲染](https://gitee.com/scenario-samples/gimbal-pro_-open-gl)
相机流OpenGL后处理后通过Xcomponent送显

### [JSVM demo](https://gitee.com/scenario-samples/jsvm)
通过JSVM，可以在应用运行期间直接执行一段动态加载的JS代码。

### [PCM音频编码为AMR示例](https://gitee.com/scenario-samples/audio-encoding)
通过AudioCapture录制PCM码流，并编码为amr格式，最终写入文件。





## 三方框架&三方库	


### [Flutter闪屏页Demo](https://gitee.com/scenario-samples/splashscreen)
在Flutter工程中设置闪屏页

### [Flutter嵌入地图](https://gitee.com/scenario-samples/nativemap/blob/master/README.md)

### [uni-app通过uts插件显示花瓣地图](https://gitee.com/scenario-samples/petal-maps)
uniapp通过uts插件拉起华为花瓣地图。
<br><div align="center">
<img src=image/uni-app通过uts插件显示花瓣地图.png height=400 />
</div>


### [阿里OSS客户端上传demo](https://gitee.com/scenario-samples/ali-ossdemo)
阿里OSS客户端上传demo

<br><div align="center">
<img src=image/阿里OSS客户端上传demo.gif height=400 />
</div>

### [基于声网SDK的简易直播](https://gitee.com/scenario-samples/rtc-live-demo)
基于声网SDK实现的简易直播Demo。
<br><div align="center">
<img src=image/基于声网SDK的简单直播Demo.gif height=400 />
</div>





## 其他	

### [碰一碰拉起元服务（前台）](https://gitee.com/scenario-samples/foreground-tap-to-launch-meta-service)
通过NFC技术实现前台碰一碰拉起元服务。打开手机NFC功能，打开应用使其页面位于前台，此时触碰NFC标签，可获取部分标签信息并展示在首页，并通过Deep Linking拉起本地的元服务。
<br><div align="center">
<img src=image/碰一碰拉起元服务_前台.gif height=400 />
</div>

### [碰一碰拉起元服务（后台）](https://gitee.com/scenario-samples/background-tap-to-launch-meta-service)
通过NFC技术实现后台碰一碰拉起元服务。打开手机NFC功能，触碰NFC标签，点击系统提示框即可后台拉起元服务，并获取部分标签信息展示在首页。
<br><div align="center">
<img src=image/碰一碰拉起元服务_后台.gif height=400 />
</div>