回复
HarmonyOS NEXT场景化示例代码（第一期）#鸿蒙示例代码# 原创
鸿蒙场景化示例代码技术工程师
发布于 2025-2-7 09:33
浏览
1收藏
在HarmonyOS NEXT应用开发的征程中，我们精心打造了一系列强大且实用的鸿蒙场景化代码。这些代码凝聚着经验与汗水，如同精密的积木，为开发者提供了坚实的基础架构。
它们具备高度的灵活性和可扩展性，能够轻松应对鸿蒙场景的复杂需求，无论是构建一个功能丰富的应用，还是打造一个高效互动的元服务，这些鸿蒙场景化代码都能让开发过程变得更加高效、便捷、稳定。
它们经过了严格的测试与优化，确保在鸿蒙系统上能够稳定运行，帮助开发者跨越技术难题，快速实现创意构想，在鸿蒙生态的广阔天地中抢占先机，开启一段充满无限可能的开发之旅。
本贴持续系列更新中，开发者也可在鸿蒙场景化示例gitee仓中根据需求寻找示例代码。
更多精彩示例分享：
HarmonyOS NEXT场景化示例代码（第二期）#鸿蒙示例代码#
本文原创发布在华为开发者社区。
示例代码索引
- 89.实现容器高度自适应
- 88.实现手机银行应用框架
- 87.构建服务端证书校验
- 86.构建JSBridge
- 85.实现可滑动面板
- 84.实现创建子窗口功能
- 83.实现书籍类应用框架
- 82.实现预约会见应用
- 81.基于蓝牙连接应用实现
- 80.实现基础组件使用
- 79.实现个人中心
- 78.构建关于页面
- 77.实现安全验证滑块
- 76.实现安全隐私弹窗
- 75.实现计算器计算功能
- 74.实现页面加载
- 73.实现全局水印
- 72.实现课程安排模板
- 71.实现金融类应用
- 70.实现非entry弹窗
- 69.构建时间轴（横轴）
- 68.实现组件间通信
- 67.实现自定义弹窗
- 66.实现多har间跳转
- 65.实现自定义键盘
- 64.实现吸顶效果
- 63.实现渐变前景色
- 62.实现横竖屏切换
- 61.实现高亮关键字
- 60.实现Tab动效切换
- 59.实现图片添加水印功能
- 58.实现隐私弹窗
- 57.实现频道选择UI
- 56.实现卡片轮播
- 55.实现联系人页面
- 54.实现NFC读取
- 53.构建卡应用框架
- 52.实现图片添加贴纸
- 51.实现多种加解密
- 50.实现Tabs左对齐
- 49.构建会议发布页
- 48.实现图片局部拉伸
- 47.应用获取不同权限
- 46.实现图片视频预览功能
- 45.实现卡片刷新功能
- 44.实现图片九宫格
- 43.实现餐饮美食应用
- 42.实现应用内跳转短信
- 41.实现图片添加滤镜功能
- 40.实现录制视频功能
- 39.实现智能图片推荐功能
- 38.实现中间凸起导航
- 37.实现视频添加水印功能
- 36.基于OpenGL渲染相机流
- 35. 实现短信发送功能
- 34. 多种弹窗实现方法
- 33. 多种图片操作实现方法
- 32. Web功能介绍
- 31. 实现多个文件操作功能
- 30. 实现图片压缩功能
- 29. 实现简易的直播功能
- 28. 实现免密登录功能
- 27. 实现应用跳转功能
- 26. 实现图片处理功能
- 25. 实现系统分享功能
- 24. 实现音视频录制功能
- 23. 实现音视频播放功能
- 22. 实现短视频播放功能
- 21. 添加视频播放进度条
- 20. 实现文件预览功能
- 19. 实现图片计数功能
- 18. 实现图片放大功能
- 17. 实现录屏功能
- 16. 实现拍照、录音功能
- 15. 实现自定义相机拍照
- 14. 访问阿里云OSS
- 13. 实现后台播放在线音频
- 12. 实现自定义日历
- 11. 实现世界时钟
- 10. 实现设备认证功能
- 9. 实现日程添加功能
- 8. 实现数据DLP加密
- 7. 简单店铺应用实现
- 6. 实现简单旅游应用
- 5. 实现多线程并发功能
- 4. 实现应用消息列表
- 3.系统应用权限设置跳转
- 2. 获取当前地理位置
- 1. 实现设备网络监听
89.实现容器高度自适应
该示例实现了List横向滑动容器高度自适应，通过List模拟美团首页菜单横向滚动高度自适应效果。
88.实现手机银行应用框架
本示例提供了一个手机银行应用的基本框架，包含“首页”、“财富”、“生活”、“我的”四个模块。应用只展示了基本的页面，其中具体功能的实现，开发者可根据需求自行开发。
87.构建服务端证书校验
该示例是一个连接网络的Demo,通过socket获取远端证书，在网络通信中，利用套接字（socket）技术来获取与之建立连接的远端服务器的数字证书。
86.构建JSBridge
本示例实现了简单的JSBridge，使H5和原生两侧可以互相调用对方的方法。
85.实现可滑动面板
本示例实现了一个可滑动面板的体验，轻量的内容展示窗口，方便在不同尺寸中切换。
84.实现创建子窗口功能
本示例基于@ohos.window实现了创建和关闭两个子窗口的功能。
83.实现书籍类应用框架
本示例提供了一个书籍类应用的基本框架，包含“书城”、“分类”、“福利”、“书架”、“我的”五个模块。应用只展示了基本的页面，其中具体功能的实现，开发者可根据需求自行开发。
82.实现预约会见应用
本示例是对标预约会见类产品，以此开发的行业通用Demo，实现基础的注册、登录、一二级页面布局参考等功能，工程以feature方式进行模块化设计。本示例是使用ArkTS编写的预约会见类产品UI页面，方便开发者后续进行进一步开发。
81.基于蓝牙连接应用实现
本示例是主要分为3个部分：
蓝牙BLE连接
通过@kit.ConnectivityKit实现蓝牙设备搜索和连接
体重、趋势图、柱状图、指标组件
通过canvas画布组件绘制体重仪表以及指标线，进行体重情况的可视化展示
通过mpchart实现趋势图以及柱状图的设计
传感器计步能力
初始化页面获取一次计步器传感器数据
获取完订阅计步检测器传感器数据
80.实现基础组件使用
本示例主要演示了一些常用基础组件的使用方法。
79.实现个人中心
本示例基于ArkUI基础组件、布局，实现个人中心页的页面和功能。
78.构建关于页面
本示例是ArkTS编写的关于UI页面，方便开发者后续进行进一步开发。
77.实现安全验证滑块
本示例基于Slider组件和自定义弹窗实现了安全验证，将滑块从左滑动到右的效果。
76.实现安全隐私弹窗
本示例基于Navigation和GridRow组件实现安全隐私弹窗。应用首次进入时，会有弹窗请求安全隐私信息，用户可点击对应的隐藏协议跳转到对应隐藏协议的详情页面。从详情页面返回时，安全隐私的弹窗依然存在，用户可以继续进行授权/查看的操作。
75.实现计算器计算功能
本示例实现了计算器的计算功能，包括加减乘除四个基本运算，小数计算、百分数计算以及清除结果功能。
74.实现页面加载
本示例主要简单构建页面加载 loading 布局。
73.实现全局水印
本示例使用组件默认属性overlay实现组件级水印效果。
72.实现课程安排模板
本示例基于Tabs容器组件、Scroll组件、Grid组件实现了上课模块的排版、下半部分使用List组件实现了第一天、第二天的任务列表、班级群界面中使用List组件实现消息的通知。
71.实现金融类应用
本示例是对标金融类产品，使用ArkTS编写金融类产品UI页面，以此开发的行业通用Demo，实现基础的注册、登录、Web嵌入，一二级页面布局参考等功能，工程以feature方式进行模块化设计。
70.实现非entry弹窗
本示例在一个非@Entry的类中创建一个CustomDialogController弹窗，以此来实现不依赖entry的弹窗。
69.构建时间轴（横轴）
本示例通过List组件实现时间轴（横轴）构建。
68.实现组件间通信
本示例主要讲解组件间通信方式，包含以下几种场景：
父子组件单向通信
父子组件双向通信
前后代组件双向同步
组件嵌套类双向同步
67.实现自定义弹窗
本示例基于Navigation实现以下四种自定义弹窗。
用户隐私协议弹窗
切换页面弹窗不消失
半模态弹窗
动态半模态弹窗
66.实现多har间跳转
本示例通过设计单独的路由模块和动态加载方法，解决一个Navigation组件下多har/hsp间路由跳转依赖耦合问题。
65.实现自定义键盘
本示例实现自定义键盘，有三种模式：数字输入模式、英文键盘和中文键盘。
64.实现吸顶效果
本示例通过设置nestedScroll属性，实现Tab组件的TabBar和List组件吸顶效果。
63.实现渐变前景色
本示例使用Gauge将数据展示为环形图表来实现渐变前景色。
62.实现横竖屏切换
本示例通过 setPreferredOrientation 方法来控制窗口的横竖屏显示，通过设置组件的 rotate 属性来控制组件的横竖屏显示。
61.实现高亮关键字
本项目通过RegExp正则匹配实现了高亮关键字功能。
60.实现Tab动效切换
本项目实现了点击、滑动都可实现Tab切换动效，包含文字切换。
59.实现图片添加水印功能
本示例基于图片处理能力、Canvas组件以及组合手势拖动组件实现了为图片添加文字水印和水印图像的功能，添加的水印可拖动。
58.实现隐私弹窗
本示例使用@CustomDialog实现隐私弹窗，使用AppStorage+PersistentStorage保存用户是否同意。
57.实现频道选择UI
该示例实现频道选择UI，通过Grid实现页面布局，实现长按拖动、删除等动画效果。
56.实现卡片轮播
本示例使用Swiper（滑块视图容器）实现卡片轮播的功能。
55.实现联系人页面
本示例是一个联系人列表demo，使用三方库@ohos/pinyin4js实现中文排序，根据联系人的姓名首字母进行排序； 动态获取所有联系人的首字母，在页面右侧生成字母导航，支持快速定位到某字母行。
54.实现NFC读取
本项目使用系统提供的NFC能力，简单实现了应用前台读卡效果，参考NFC标签读写开发指南。
53.构建卡应用框架
本项目实现了卡应用的基本框架，包括： 1、登录/首页 2、二维码 3、商城 4、我的/设置 等常见tab页的一级页面，方便同类型应用快速启动开发。
52.实现图片添加贴纸
本示例基于PanGesture（手势处理）实现了图片添加贴图，并通过手势更新贴图位置的功能。
51.实现多种加解密
该示例主要分为3个部分：
国密算法的加解密：包含了SM2、SM4的加解密示例；
安卓格式和鸿蒙格式的转换：包含了安卓格式的公私钥，转化为鸿蒙格式的公私钥；安卓加密的密文，在鸿蒙解密；鸿蒙生成的密文解码，用于安卓解密；
以AES128算法为例，实现了CBC/ECB/GCM算法分组的加解密示例。
50.实现Tabs左对齐
本示例使用BarPosition（Tabs页签位置）实现了Tabs左对齐的功能。
49.构建会议发布页
本示例是使用ArkTS编写的会议发布UI页面，该页面提供了会议内容和人员的填写功能，方便开发者后续进行进一步开发。
48.实现图片局部拉伸
本示例基于属性resizable实现图片局部拉伸的功能。
47.应用获取不同权限
本示例基于abilityAccessCtrl实现了应用获取相机权限，位置信息以及步数信息三种常见权限的功能，每个权限都需要向用户申请，用户确认后才可开启。
46.实现图片视频预览功能
本示例基于组合手势实现图片视频的预览功能，支持双击缩放图片，双指缩放图片，拖动图片以及点击视频进行预览。
45.实现卡片刷新功能
本示例基于用户首选项实现刷新服务卡片数据的功能。
44.实现图片九宫格
本示例基于Grid网格容器实现图片九宫格展示功能，使用swipr实现图片滑动预览功能。
43.实现餐饮美食应用
本示例基于ArkUI中各类基础组件与各样布局，实现简单的餐饮美食应用UI界面。
42.实现应用内跳转短信
本示例基于Want实现应用内点击按钮，即可拉起系统短信界面，并预设短信接收人以及短信内容。
41.实现图片添加滤镜功能
本示例基于effectKit能力实现给图片添加不同滤镜，一键还原图片以及保存图片的功能。
40.实现录制视频功能
本示例基于Camera Kit（相机服务）实现了使用手机摄像头进行视频的拍摄录制，并在首页进行视频的预览。
39.实现智能图片推荐功能
本示例基于PhotoViewPicker能力实现智能推荐符合设定条件的图片的功能，缩短用户筛选图片的时间。
38.实现中间凸起导航
本示例实现点击底部TabBar切换展示页面，同时会有选中的图标变化动效，中间凸起的底部导航。
37.实现视频添加水印功能
本示例构建自定义水印组件，利用Video组件的属性为视频添加水印并附有视频播放、暂停、倍速等功能。
36.基于OpenGL渲染相机流
本示例基于OpenGL对相机流进行处理操作，然后通过Xcomponen渲染显示相机，实现相机的录制、播放视频功能。
35. 实现短信发送功能
本示例实现跳转到短信发送页面的功能。
34. 多种弹窗实现方法
本示例介绍以下五种常见的弹窗场景化案例。
- 应用启动时的隐私政策和用户协议弹窗
- 网络请求完成的结果提示弹窗
- 应用返回上一级页面的退出确认弹窗
- 个人信息填写的信息弹窗
- 应用使用过程中出现的付费类广告弹窗
33. 多种图片操作实现方法
本实例主要展示了图片应用场景相关demo。主要包括了图片预览、图片编辑美化、场景变化前后对比、图片切割九宫格、两张图片拼接、AI抠图、图片加水印等场景示例。
场景1：图片预览
场景2：图片编辑美化
场景3：场景变化前后对比
场景4：图片切割九宫格
场景5：两张图片拼接
场景6：AI抠图
场景7：图片加水印
32. Web功能介绍
本示例介绍了Web请求拦截、Web与应用侧交互、Web侧PDF文件操作以及Web长按菜单功能使用。
场景1：Web用户权限校验以及应用广告
场景2：PDF文件浏览以及下载
场景3：Web页面手机充值
场景4：Web页面实名认证
场景5：Web页面长按菜单
31. 实现多个文件操作功能
本demo按照文件上传、文件下载、文件预览、文件读取保存、文件压缩解压、文件拷贝6个分类进行场景化子demo构造展示。
场景1：文件预览
场景2：文件下载
场景3：文件读取与保存
场景4：文件上传
场景5：文件解压、压缩
场景6：文件拷贝
30. 实现图片压缩功能
本示例基于imagePackerss Api实现了图片压缩功能，并将压缩后的图片转成base64格式。开发者可将压缩后的图片用于arkui或者H5中进行图片展示。
29. 实现简易的直播功能
本示例使用声网SDK构建了一个简易的直播场景，模拟主播开、关直播以及观众进入、离开直播间时的弹幕互动。
28. 实现免密登录功能
本示例基于关键资产存储服务API实现了免密登录功能。
27. 实现应用跳转功能
本示例介绍了应用跳转的多个场景案例。
-
跳转短信、浏览器、设置、相机、拨号、应用市场等系统应用和已知bundlename、abilityname的三方应用。
-
跳转相机拍照后返回照片展示。
-
跳转三方应用，模拟简易支付。
-
跳转web页，拉起相机和三方应用。
26. 实现图片处理功能
本项目基于OpenHarmony三方库ImageKnife 进行图片处理场景开发使用：
- 支持不同类型的本地与网络图片展示。
- 支持拉起相机拍照展示与图库照片选择展示。
- 支持图片单一种变换效果。
- 支持本地/在线图片格式：JPG、PNG、SVG、GIF、DPG、WEBP、BMP
25. 实现系统分享功能
本示例基于Share Kit能力实现了宿主应用分享图片的功能。
24. 实现音视频录制功能
本示例基于AVRecorder实现音视频录制，包括开始录制、暂停、结束、上一个等几乎所有录制音视频的基本操作。
23. 实现音视频播放功能
本示例基于Avplayer构建了一个音视频播放器，包括音视频的播放、暂停、全屏播放、倍速播放、快进等基本操作。
22. 实现短视频播放功能
本示例使用Swiper+AVPlayer构建了一个短视频上下滑动并播放的场景。
21. 添加视频播放进度条
本示例构建了一个视频播放进度条案例，主要实现的功能是为正在播放的视频添加一个刻度条组件用以表示进度。
20. 实现文件预览功能
本示例通过Web组件实现文件预览，支持PDF, word, excel格式。其中，word和excel仅实现了基本预览功能，例如excel的公式和单元格样式未实现，需自行拓展。
19. 实现图片计数功能
本项目基于Canvas组件进行图片计数、图片局部涂鸦遮盖、图片局部自动绘制圆圈路径功能实现：
- 支持图片内部圆圈计数，可通过按钮增加或减少已有数值。
- 支持画笔对图片进行局部涂鸦遮盖，可切换画笔颜色以及线条粗细程度，可用橡皮擦功能撤销当前涂鸦路径
- 支持图片局部自动绘制圆圈路径并填充颜色以及数字标识，可调整切换圆圈路径底部颜色
18. 实现图片放大功能
本示例构建了一个图片放大案例，主要实现两个功能。
- 点击放大镜，实现图片放大功能
- 点击重置图片，将放大后的图片回归原位
17. 实现录屏功能
本示例基于C侧AVScreenCapture模块API实现视频录制功能，并将生成的录屏文件保存到到沙箱目录。
16. 实现拍照、录音功能
本示例演示如何使用Web组件拍照和录音。
- web拉起系统相机拍照，并返回base64数据给web页面。
- web调用麦克风录音，并保持录音文件到指定沙箱目录。
15. 实现自定义相机拍照
本示例实现了自定义相机拍照功能以及保存图片功能，用到的API如下。
- 使用@kit.CameraKit实现自定义相机拍照、双路预览功能
- 使用@kit.MediaLibraryKit、@kit.ImageKit、@kit.CoreFileKit、安全保存控件SaveButton实现图片保存到系统图库
- 使用@kit.MediaLibraryKit实现图库图片/视频选择
- 使用@kit.CoreFileKit实现保存文件到文件管理器中
14. 访问阿里云OSS
本示例介绍通过URL签名(v4)方式使用API访问阿里云OSS。
13. 实现后台播放在线音频
本示例基于Background Tasks Kit能力实现应用退出后台后继续播放网络音频。
12. 实现自定义日历
本示例通过原生组件实现日历页面，根据不同场景利用ForEach或LazyForEach进行数据循环渲染。
11. 实现世界时钟
本示例通过app.json5中bundleName里的城市名称，匹配对应城市时区，并把对应时间显示在时钟界面。
10. 实现设备认证功能
本示例使用鸿蒙ohos.distributedDeviceManager模块，实现设备间相互认证的能力。
9. 实现日程添加功能
本示例通过集成日历kit将选课提醒加入日程，使用日历一键查看能力拉起目标页面。
8. 实现数据DLP加密
本示例演示了如何创建、编辑一个dlp文件。
7. 简单店铺应用实现
本示例构建了一个简单的店铺应用，应用案例内主要包含以下两个功能。
- 消息页面，通过任务、消息、通报Tab的切换，实现消息的分类
- 店掌页面，点击全部应用按钮后，自定义布局展示常用服务以及各类经营服务，点击编辑按钮可进行新增操作
6. 实现简单旅游应用
本示例构建了一个简单的旅游应用，应用案例内主要包含以下三种功能。
- 通过列表展示用户动态信息
- 通过地图功能展示旅游景点位置
- 通过列表展示旅游景点信息
5. 实现多线程并发功能
本示例分别利用TaskPool和Worker开发多线程并发场景，以此来展示两者的不同之处以及相似之处。
4. 实现应用消息列表
本示例为模拟应用内消息场景。模拟实现的主要功能有以下两点：
- 模拟消息设置页面，可以设置接受新消息提醒和横幅提醒
- 模拟应用消息列表，可以查看应用内所有消息，也可以点击进入查看消息详细内容
3.系统应用权限设置跳转
本示例基于设置应用实现引导用户跳转到系统设置页进行权限，通知的相关设置，包含以下两个场景。
场景一：如果应用首次拒绝了消息通知，应用希望能够引导用户拉起设置应用设置允许通知，用来接收应用内的推送消息；并且在设置完后返回页面可以监听到修改后的状态。
场景二：当用户使用一些需要用户授权的api时（如访问获取联系人信息），若用户首次拒绝授权，则需要引导用户到权限设置页面能够主动进行应用权限的修改。
场景一：
场景二：
2. 获取当前地理位置
示例功能：通过位置服务获取当前地理位置及经纬度。
1. 实现设备网络监听
示例功能包含：监听当前网络连接状态；监听网络类型（wifi、蜂窝网络）；判断蜂窝网络类型（3G\4G\5G）和信号强度。
©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任
分类
已于2025-3-14 11:13:12修改
赞
1
收藏 1
回复
1
1
相关推荐
