鸿蒙场景化示例合集: 【鸿蒙 Harmony Next 示例代码】所有仓库Demo集合，便于站内查询。涵盖场景化UI、场景化系统接口、媒体&图形、Web、创新场景、生态规则、行业最佳实践、NDK、三方框架&三方库等类目

# 鸿蒙场景化示例合集

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

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

## 分类索引 —— 点击跳转分类
<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>

## 场景化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>

### [调用元能力startAbility接口指定号码并跳转到发送短信页面](https://gitee.com/scenario-samples/jump-send-message)
从应用内跳转到短信发送界面，并且携带收件人和发送内容
<br><div align="center">
<img src=image/调用元能力startAbility接口指定号码并跳转到发送短信页面新.jpg 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>

### [课程安排模板](https://gitee.com/scenario-samples/teacher)
本示例基于Tabs容器组件、Scroll组件、Grid组件实现了上课模块的排版、下半部分使用List组件实现了第一天、第二天的任务列表、班级群界面中使用List组件实现消息的通知。
<br><div align="center">
<img src=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>

### [使用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/water-mark-view)
使用组件默认属性overlay实现组件级水印效果
<br><div align="center">
<img src=image/全局水印.png 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/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/image-video-preview)
图片视频预览功能，基于组合手势实现双击缩放，双指缩放，拖动查看，下载过程。

### [安全验证滑块](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=image/中间突起Tab.gif height=400 />
</div>

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

### [tabs左对齐](https://gitee.com/scenario-samples/tabs-align-left)
示例实现Tabs的左对齐效果。
<br><div align="center">
<img src=image/tabs左对齐.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=image/压缩解压缩以及语音识别.gif height=400 />
</div>

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

## 场景化系统接口

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

### [鸿蒙上的加解密demo](https://gitee.com/scenario-samples/crypto-demo)
加解密demo。

### [后台播放在线音频](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>

### [鸿蒙DLP API demo](https://gitee.com/scenario-samples/my-application_dlp-permission)
数据防泄漏服务（Data Loss Prevention，简称为DLP），是系统提供的系统级的数据防泄漏解决方案，提供文件权限管理、加密存储、授权访问等能力，数据所有者可以基于账号认证对机密文件进行权限配置，允许拥有只读、编辑、拥有者权限，随后机密文件会通过密文存储，在支持DLP机制的设备上可以通过端云协调进行认证授权，获取对数据的访问和修改的能力。
<br><div align="center">
<img src=https://gitee.com/scenario-samples/demo-index/raw/master/image/%E9%B8%BF%E8%92%99DLP%20API%20demo.gif 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>

### [AES加解密demo](https://gitee.com/scenario-samples/crypto-demo)
鸿蒙上的加解密demo。

### [加解密](https://gitee.com/scenario-samples/sm2)
本示例介绍的SM2加解密的实现方法。
<br><div align="center">
<img src=image/加解密.png height=400 />
</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模块，实现设备间相互认证的能力。

### [数据库备份恢复](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>

## 媒体&图形

### [自定义相机](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数据。

### [音视频录制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>

## Web

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

### [Web组件调用相机拍照](https://gitee.com/scenario-samples/webdemos)
web拍照与录音
<br><div align="center">
<img src=image/Web组件调用相机拍照.gif height=400 />
</div>
### [web预览pdfexcelword](https://gitee.com/scenario-samples/loading-pdf-excel-word)
本示例通过Web组件实现文件预览，支持pdf, docx, xlsx格式

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

### [Web组件抽奖案例](https://gitee.com/scenario-samples/web-network)
主要介绍了Web组件如何加载本地、云端的H5和Vue页面并与原生交互发起请求。

## 创新场景

### [免密登录](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/sample-demo/tree/master/Smartphotopickerdemo)
本示例展示智能图片picker使用方法

## 生态规则

## 行业最佳实践

### [服务端证书校验](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

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

### [会议demo](https://gitee.com/scenario-samples/szmeeting)
会议类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，包括我的、提分、首页。

## 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代码。

## 三方框架&三方库

### [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

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

## 其他

ScenarioSamples/鸿蒙场景化示例合集

简介

发行版

贡献者

近期动态

ScenarioSamples/鸿蒙场景化示例合集 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

ScenarioSamples/鸿蒙场景化示例合集