【HarmonyOS Next应用开辟案例】130案例应用开辟1-130
本帖下方集中了HarmonyOS Next应用开辟时，会遇到的常见应用案例。后续会连续更新大量案例，帮助开辟者快速学习。我们同时归纳了一些常见的性能问题，并提供相应的解决方案，详情可参考应用开辟性能指导总览。
130.画笔调色板案例（0827更新）（点此查看源码实现）
本示例实现了一个网格渐变的画笔调色板，可以大概根据给定的 HSL 范例颜色和色阶数，按亮度生成渐变色，用户可以通过调色板选择颜色并在画布上绘制路径。
https://img-blog.csdnimg.cn/img_convert/5a56e1f2e10df003c16f93c292d29cb4.gif
129.骨架屏实现案例（0824更新）（点此查看源码实现）
本示例介绍通过骨架屏提拔加载时用户体验的方法。骨架屏用于在页面数据加载完成前，先给用户展示出页面的大抵布局（通常以灰色或其他浅色系的占位图情势出现），待接口数据加载完成后，再渲染出实际页面内容并替换掉骨架屏。 通过网络接口返回的状态改变 loadingCollectedStatus 值，动态切换页面内容：初始体现骨架屏（LoadingView）；成功且有数据则体现列表页（ListView）；数据为空体现无数据页（NoneContentView）；加载失败则体现失败页（LoadingFailedView）。
https://img-blog.csdnimg.cn/img_convert/4dfb6cae37c3a048d888cbbf450ae0e8.gif
128.组件集合案例（0812更新）（点此查看源码实现）
本示破例层为睁开收起的长列表，内层是ArkUI中组件、通用、动画、全局方法的示例代码，重要展示长列表睁开收起的利用和多种ArkUI的示例。
https://img-blog.csdnimg.cn/img_convert/4c610a338b08945a27637410f6d7744d.gif
127.发短信案例（0709更新）（点此查看源码实现）
本示例介绍怎样在应用中调起系统短信，通过startAbility接口中的指定号码并调起系统的发送短信页面。
https://img-blog.csdnimg.cn/img_convert/a9353dfa77f568602b77d1941c83b221.gif
126.TaskPool线程中利用关系型数据库实现案例（0709更新）（点此查看源码实现）
本实例通过列表场景实例讲解，介绍在TaskPool线程中利用关系型数据库的方法，涵盖单条插入、批量插入、删除和查询利用。
https://img-blog.csdnimg.cn/img_convert/ef242f1ae60dd996fa8fb6b7bc591a02.gif
125.自定义组件复用池文章示例代码（0709更新）（点此查看源码实现）
本示例是《全局自定义组件复用实现》的示例代码，重要讲解怎样通过BuilderNode创建全局的自定义组件复用池，实现跨页面的组件复用。
https://img-blog.csdnimg.cn/img_convert/ddb8c2098a727773e856c7fe75114124.gif
124.H5页面调用自定义输入法案例（0617更新）（点此查看源码实现）
本示例介绍了Web场景中利用CustomDialog接口实现H5页面调用自定义输入法的功能。该场景多用于浏览器须要利用安全输入法时。
https://img-blog.csdnimg.cn/img_convert/2fee25d4a9bb02ea40217ba9a6cf2e1b.gif
123.NavDestination弹窗（0617更新）（点此查看源码实现）
本案例介绍了利用NavDestination组件的Dialog模式实现与前一个页面的联动的品评弹窗。
https://img-blog.csdnimg.cn/img_convert/9b0192e83bae422ee391fd46c5855e81.gif
122.视频卡片和列表地区的联动滚动（0603更新）（点此查看源码实现）
本示例利用Scroll和List组件嵌套，通过List组件的滚动控制器和nestedScroll属性实现了视频卡片和列表地区的联动滚动场景。
https://img-blog.csdnimg.cn/img_convert/a28fd171fb917b2892896f878aba73f0.gif
121.合理处理高负载组件的渲染文章示例代码（0603更新）（点此查看源码实现）
重要讲解怎样通过DisplaySync优化高负载组件的渲染，淘汰丢帧情况的发生。
https://img-blog.csdnimg.cn/img_convert/bd8e3faeff8e1b83cff7d91ca1c421fd.gif120.搜索框热搜词自动滚动（0527更新）（点此查看源码实现）
本示例介绍利用TextInput组件与Swiper组件实现搜索框内热搜词自动切换。
https://img-blog.csdnimg.cn/img_convert/06c0e438c628bbf15366b4b85426d7cd.gif
119.自动生成动态路由（0523更新）（点此查看源码实现）
本示例将介绍怎样利用装饰器和插件，自动生成动态路由表，并通过动态路由跳转到模块中的页面，以及怎样利用动态import的方式加载模块。
118.利用GTest测试C++案例（0521更新）（点此查看源码实现）
本案例介绍怎样在HarmonyNext应用中接入GTest测试框架测试C++代码。
https://img-blog.csdnimg.cn/img_convert/a64e8f5af5f659181db7259bcfb18c75.png
117.自定义Stepper（0516更新）（点此查看源码实现）
在许多场景下，我们都须要引导用户按照步调完成任务，此功能在HarmonyOS Next中可以利用Stepper来实现，但是Stepper的定制化本领较弱，开辟者无法定制上下页切换按钮的样式、位置，因此本例介绍了怎样基于Swiper实现Stepper的本领。
https://img-blog.csdnimg.cn/img_convert/bc7b74ef88ded5fdbf724a17f3f1a205.gif
116.边缘渐变实现（0515更新）（点此查看源码实现）
本案例介绍组件内容边缘渐变的实现，通常用于提示长列表滑动到边缘的场景。
https://img-blog.csdnimg.cn/img_convert/853edaf0902a957ad8ef94ca5a53d817.gif
115.textOverflow长文本省略（0515更新）（点此查看源码实现）
本示例实现了回复品评时，当回复人的昵称与被回复人的昵称长度都过长时，利用textOverflow和maxLines()实现昵称的长文本省略展示的功能。
https://img-blog.csdnimg.cn/img_convert/d95ee2e10bf89a0a036e66d169e0cc70.gif
114.水印案例（0515更新）（点此查看源码实现）
在很多的场景中，如保存图片以及容器封面都可以大概见到水印，本案例通过Canvas组件以及OffscreenCanvas实现了页面添加水印以及保存图片时添加水印的功能。
https://img-blog.csdnimg.cn/img_convert/1fb4d93333b861380ad0ce45c62ac036.gif
113.边框或配景图片拉伸案例（0513更新）（点此查看源码实现）
HarmonyOS上不支持.9资源文件进行安全拉伸。作为替代方案，本案例中商城页面的促销标签边框利用同一张图片资源，通过设置图片的resizable属性，展示差别长度的促销标签结果。
https://img-blog.csdnimg.cn/img_convert/e722d9f039bf1cfd6a5f0114c5163d4e.png
112.笔墨睁开收起案例（0513更新）（点此查看源码实现）
本示例介绍了@ohos.measure组件接口实现笔墨睁开收起的功能。该场景多用于图文列表展示等。
https://img-blog.csdnimg.cn/img_convert/b2257aadb4fb44eb2920ade12d1013ee.gif111.全局弹窗封装案例（0507更新）（点此查看源码实现）
本示例介绍两种弹窗的封装案例。一种是自定义弹窗封装成自定义组件的方式，利用一句代码即可控制体现；一种是利用子窗口的方式实现弹窗，利用一句代码即可展示。
https://img-blog.csdnimg.cn/img_convert/59f9c6f5e39f1a4954d5a4f455089778.gif
110.Navigation路由拦截案例（0507更新）（点此查看源码实现）
本示例介绍在Navigation中怎样完成路由拦截：首次登录时记载登录状态，再次登录时可以直接访问主页无需重复登录，当退出登录时，下次需重新登录。
https://img-blog.csdnimg.cn/img_convert/32f8c18b697762277da9c52d30be6f1c.gif
109.Text实现部分文本高亮和超链接样式（0430更新）（点此查看源码实现）
本示例通过自定义Span范例，在Text组件中利用ForEach遍历，根据差别的Span范例生成差别样式和功能的Span组件，实现部分文本高亮和超链接。
https://img-blog.csdnimg.cn/img_convert/9ea0346687d534cbb2dccac5cc932e8a.gif
108.首页下拉进入二楼结果案例（0430更新）（点此查看源码实现）
本示例重要介绍了利用position和onTouch来实现首页下拉进入二楼、二楼上划进入首页的结果场景，利用translate和opacity实现动效的移动和缩放，并将界面沉醉式（全屏）体现。
https://img-blog.csdnimg.cn/img_convert/a2e16e8a8c44b9660349a035e83abce3.gif
107.图片肴杂案例（0430更新）（点此查看源码实现）
本实例重要通过BlendMode属性来实现挂件和图片的肴杂，通过更改差别的肴杂参数，可以大概展示差别的肴杂结果。
https://img-blog.csdnimg.cn/img_convert/71bccf870743470c6a75da5e1e572d13.gif
106.通过全局状态保存弹窗实现品评组件案例（0426更新）（点此查看源码实现）
品评组件在目前市面上的短视频app中是一种很常见的场景，本案例利用全局状态保存本领弹窗来实现品评组件。
https://img-blog.csdnimg.cn/img_convert/c6d7047b3e919446ca348415e36d8178.gif
105.网格元素交换案例（0426更新）（点此查看源码实现）
直接进行交换和删除元素会给用户带来不好的体验结果，因此须要在此过程中注入一些特色的动画来提拔体验结果，本案例通过Grid组件、attributeModifier、以 及animateTo函数实现了拖拽动画和删除动画。
https://img-blog.csdnimg.cn/img_convert/67e19b4a01e671b05398a01b7b53e213.gif
104.timeline时间轴下拉刷新结果（0423更新）（点此查看源码实现）
本示例介绍利用PullToRefresh、List等组件、onAreaChange变乱，实现时间轴下拉刷新结果。
https://img-blog.csdnimg.cn/img_convert/81b70ea232ffe0333247c371845aa9f4.gif103.定制HAP多目的构建产物（0419更新）（点此查看源码实现）
本案例展示怎样将工程打包成差别版本，并单独设置资源文件。
102.表情谈天案例（0419更新）（点此查看源码实现）
本示例重要介绍怎样在谈天信息中参加表情图片。通过利用CustomDialog创建表情键盘对话框，利用RichEdit接收所选表情的ImageSpan。在发送信息时将图片和笔墨消息分别通过ImageSpan、Span参加到消息列表中，体现的时候将消息列表中的ImageSpan、Span包裹在Text中进行体现。
https://img-blog.csdnimg.cn/img_convert/959e65c1332de5624b378e0489f8e611.gif
101.Web页面长截图（0419更新）（点此查看源码实现）
本案例实现了Web组件中网页长截图的方案。支持截图后展示大小浮窗预览、保存图片到相册、手势左滑关闭等功能。
https://img-blog.csdnimg.cn/img_convert/952af333637a90d9bc5a9116add646d5.gif
100.音乐播放转场一镜到底结果实现（0419更新）（点此查看源码实现）
音乐播放的Mini条播放栏在转场时的一镜到底动画是音乐播放器应用开辟中常见的需求。本示例将介绍怎样实现Mini条的一镜到底动画，如Mini条歌曲封面的缩放动画，Mini条的睁开收起动画等。
https://img-blog.csdnimg.cn/img_convert/ce4b75faadbd9a13d13554fb4983b142.gif
99.tabContent内容可以在tabBar上体现并响应滑动变乱案例（0418更新）（点此查看源码实现）
本示例实现了tabContent内容可以在tabBar上体现并且tabBar可以响应滑动变乱的功能。
https://img-blog.csdnimg.cn/img_convert/c4115aa2d547defbdc183eb7f9163e52.png
98.利用预渲染实现Web页面瞬开结果实践（0418更新）（点此查看源码实现）
为了便于大家在利用本案例集时可以大概更具体的相识各个案例，本案例基于Web预渲染实现了案例介绍功能，即在大部分案例右上角的问号icon。
https://img-blog.csdnimg.cn/img_convert/e6beb2f038870057826aa018bb02dc56.gif
97.XComponent + Vsync 实现自定义动画（0418更新）（点此查看源码实现）
XComponent 提供了应用在 native 侧调用 OpenGLES 图形接口的本领，本文重要介绍怎样配合 Vsync 变乱，完成自定义动画。在这种实现方式下，自定义动画的绘制不在 UI 主线程中完成，即使主线程卡顿，动画结果也不会受影响。
https://img-blog.csdnimg.cn/img_convert/192c3af44e837be43dd0bce7f72fa23d.gif
96.Canvas实现模仿时钟案例（0418更新）（点此查看源码实现）
本示例介绍利用Canvas和定时器实现模仿时钟场景，该案例多用于用户须要体现自定义模仿时钟的场景。
https://img-blog.csdnimg.cn/img_convert/720fbf8f60125107c098aabfd391483c.gif
95.Grid和List内拖拽交换子组件位置（0417更新）（点此查看源码实现）
本示例分别通过onItemDrop()和onDrop()回调，实现子组件在Grid和List中的子组件位置交换。此案例目前已有动效升级版，请参考：列表项交换案例、网格元素交换案例。
https://img-blog.csdnimg.cn/img_convert/0c278a379aaced5fbdb500cc3ed716ff.gif
94.视频弹幕功能（0417更新）（点此查看源码实现）
本示例介绍怎样利用@ohos.danmakuflamemaster和@ohos.gsyvideoplayer开辟支持视频弹幕的播放器。可以自定义弹幕样式、占据屏幕宽度，发送弹幕，开关弹幕视图。
https://img-blog.csdnimg.cn/img_convert/817d7870b9c662a5337d09f81e8d2533.gif
https://img-blog.csdnimg.cn/img_convert/4aa8ed01c33103977f686de9976a7b96.gif
https://img-blog.csdnimg.cn/img_convert/6a36aca7f9aa6482c1f0eeeea85e5dd2.gif93.悬浮窗拖拽和吸附动画（0417更新）（点此查看源码实现）
本示例利用position绝对定位实现应用内悬浮窗，并且通过animateTo结合curves动画曲线实现悬浮窗拖拽跟手和松手吸附边缘的弹性动画结果。
https://img-blog.csdnimg.cn/img_convert/f45b1b6a515ffb2d2eaba3ebfe0a5d81.gif
https://img-blog.csdnimg.cn/img_convert/eb0785004dba5eb856ddb8b0a2f1e27c.gif
https://img-blog.csdnimg.cn/img_convert/29ddaaaf19b9d3022b76f130febfc4ab.gif92.Web自定义长按菜单案例（0411更新）（点此查看源码实现）
本示例介绍了给Webview页面中可点击元素（超链接/图片）绑定长按/鼠标右击时的自定义菜单的方案。
https://img-blog.csdnimg.cn/img_convert/e05ff103d7b89dcf9427e8079aec85fd.gif
https://img-blog.csdnimg.cn/img_convert/ed392965ea3d71d3296d9f7249018b88.gif
https://img-blog.csdnimg.cn/img_convert/4cfa5d184817471ffc20c984e059b061.gif91.阅读翻页方式案例（0411更新）（点此查看源码实现）
本示例展示手机阅读时左右翻页，上下翻页，覆盖翻页的功能。
https://img-blog.csdnimg.cn/img_convert/f3a310d9ad5430b05ba07cb234c62224.gif
https://img-blog.csdnimg.cn/img_convert/db4fd6bf0e4257a347d62c8a8dbffd22.gif
https://img-blog.csdnimg.cn/img_convert/bf15b24009789a1e74500abb40db22c0.gif90.语音录制和声音动效实现（0411更新）（点此查看源码实现）
本示例利用AVrecord录制音频和AVrecord的getAudioCapturerMaxAmplitude接口获取振幅实现UI动效;利用AVplayer播放音频
https://img-blog.csdnimg.cn/img_convert/79f17bf0c20e00b33648e0b9b270cf50.gif https://img-blog.csdnimg.cn/img_convert/e586fe39422561ded69724a28ed26732.gif
https://img-blog.csdnimg.cn/img_convert/d590c0c102fae807980b991eec46420f.gif89.底部面板嵌套列表滑动案例（0411更新）（点此查看源码实现）
本示例重要介绍了利用panel实现底部面板内嵌套列表，分阶段滑动结果场景。
https://img-blog.csdnimg.cn/img_convert/ecce73460a2d1289313320442c8fdbe6.gif
https://img-blog.csdnimg.cn/img_convert/a6383df4d6bb4454483076b08a4b85ac.gif
https://img-blog.csdnimg.cn/img_convert/11a6002dc45555e8dbd98f77d62a4f0e.gif88.列表项交换案例（0411更新）（点此查看源码实现）
本案例通过List组件、组合手势GestureGroup、swipeAction属性以及attributeModifier属性等实现了列表项的交换和删除。
https://img-blog.csdnimg.cn/img_convert/9b093f57cbf39d5bb13915d707792add.gif
https://img-blog.csdnimg.cn/img_convert/83c25ac7e97d432123d782c7f44e6856.gif
https://img-blog.csdnimg.cn/img_convert/219ba77954c217932cb63d497023be72.gif87.动态注册字体案例（0402更新）（点此查看源码实现）
本示例介绍利用上传下载 模块和注册自定义字体模块实现从网络上下载字体并注册应用字体的功能，该场景多用于由特殊字体要求的场景。
https://img-blog.csdnimg.cn/img_convert/eec986e61622f2e79d1d6ddd36d2898d.gif
https://img-blog.csdnimg.cn/img_convert/e96730ee9ba0c965fc91fedc11e6f860.gif
https://img-blog.csdnimg.cn/img_convert/c490e8de13c90f4bffed78ed314ab50d.gif86.边缓存边播放案例（0402更新）（点此查看源码实现）
OhosVideoCache是一个支持边播放边缓存的库，只须要将音视频的url转达给OhosVideoCache处理之后再设置给播放器， OhosVideoCache就可以一边下载音视频数据并保存在本地，一边读取本地缓存返回给播放器，利用者无需进行其他利用。
https://img-blog.csdnimg.cn/img_convert/c283d2b0de0109f28dc8c25a3ef1ef84.gif
https://img-blog.csdnimg.cn/img_convert/7b78c11a5de440ddf331b0c0193d5372.gif
https://img-blog.csdnimg.cn/img_convert/0551295993b9db30e35cfb5afa84e007.gif85.利用colorPicker实现配景跟随主题颜色转换（0402更新）（点此查看源码实现）
本示例介绍利用image库以及effectKit库中的colorPicker对目的图片进行取色，将获取的颜色作为配景渐变色，通过swiper组件对图片进行轮播。
https://img-blog.csdnimg.cn/img_convert/dd465d68f5ba764c91437944cc1b5305.gif
https://img-blog.csdnimg.cn/img_convert/f8d76749354d1d67b7956d5fdc82fcc4.gif
https://img-blog.csdnimg.cn/img_convert/36bed66b38d65915e5ba0a690acd2e6f.gif84.笔墨识别案例（0402更新）（点此查看源码实现）
本示例介绍利用text组件的enableDataDetector属性实现文本特殊笔墨识别。
https://img-blog.csdnimg.cn/img_convert/92bcff7ffba0d32b4caeff68f652cd6e.gif https://img-blog.csdnimg.cn/img_convert/c0eba56a7dd6258e54ba8afd9c94e83a.gif
https://img-blog.csdnimg.cn/img_convert/26cbe8e8a0fbf6aa6b5e687544ba5675.gif83.根据icon自顺应配景颜色（0402更新）（点此查看源码实现）
本示例将介绍怎样根据图片设置自顺应的配景致。
https://img-blog.csdnimg.cn/img_convert/248df9986018339388ea0dac74c41384.png
https://img-blog.csdnimg.cn/img_convert/84421d6719aae62cc73fc70b373947b5.gif
https://img-blog.csdnimg.cn/img_convert/e61ec34185306727f97ec2905a253a7e.gif82.折叠屏扫描二维码方案（0402更新）（点此查看源码实现）
本示例介绍利用自定义界面扫码本领在折叠屏设备中实现折叠态切换适配。自定义界面扫码利用系统本领customScan，其提供相机流的初始化、启动扫码、识别、制止扫码、开释相机流资源等本领。折叠屏折叠状态通过监听display的foldStatusChange变乱实现。
https://img-blog.csdnimg.cn/img_convert/02d539e4c774e1ba0fd743ad88662f99.gif
https://img-blog.csdnimg.cn/img_convert/30be50ff1a98e3884d6d1635b2d0350e.gif
https://img-blog.csdnimg.cn/img_convert/7309cd5f2b2beb0743fc0fe8d3add08a.gif81.搜索页一镜到底案例（0402更新）（点此查看源码实现）
本示例介绍利用bindContentCover、transition、animateTo实现一镜到底转场动画，常用于首页搜索框点击进入搜索页场景。
https://img-blog.csdnimg.cn/img_convert/2a13106096829fda9627ab31840df227.gif
https://img-blog.csdnimg.cn/img_convert/d74f9964bf29f9c966d470aa773696ae.gif https://img-blog.csdnimg.cn/img_convert/9a324ddfe562aac255fad2505cd6d6cf.gif80.自定义Swiper卡片预览结果实现（0326更新）（点此查看源码实现）
本方案做的是接纳Swiper组件实现容器视图居中完全展示，双方等长暴露，并且跟手滑动结果。
https://img-blog.csdnimg.cn/img_convert/0aaa6585bc088c2abc4011b9c3b0604b.gif
https://img-blog.csdnimg.cn/img_convert/2281880a9e5b6875561f8c1502e52049.gif
https://img-blog.csdnimg.cn/img_convert/8aa8228d844ebda87e4a73243ba28819.gif79.Web组件预览PDF文件实现案例（0326更新）（点此查看源码实现）
本案例通过Web组件实现预览本地PDF文件和预览网络PDF文件，第一个Web组件利用resource协议关联本地PDF文件路径以预览本地存储的PDF资源；第二个Web组件则通过设置网络链接属性，实现从互联网加载并预览远程PDF文件内容。
https://img-blog.csdnimg.cn/img_convert/5bd7a34c3287925c007396f358c0c72c.png
https://img-blog.csdnimg.cn/img_convert/7f5237fc9eaf0ab2c4c3d46f689a53ae.gif
https://img-blog.csdnimg.cn/img_convert/72b36a30a5f74edc45840fa3441d3e44.gif78.Navigation实现多设备适配案例（0326更新）（点此查看源码实现）
在应用开辟时，一个应用须要适配多终端的设备，利用Navigation的mode属性来实现一套代码，多终端适配。
https://img-blog.csdnimg.cn/img_convert/68a01210934bd2653a9f0cfa58828e63.gif
https://img-blog.csdnimg.cn/img_convert/5a2d7dd426618fc732ecd583c4b41edf.gif
https://img-blog.csdnimg.cn/img_convert/fa54a005d9c813254c42470b74191d5d.gif77.PixelMap深拷贝案例（0326更新）（点此查看源码实现）
在图片开辟过程中经常会涉及到PixelMap的深拷贝，本例通过利用PixelMap的readPixelsToBuffer方法来实现深拷贝。在创建源PixelMap的时候，须要将解码参数设置为BGRA_8888，而在深拷贝创建目的PixelMap的时候须要将解码参数设置为RGBA_8888。
https://img-blog.csdnimg.cn/img_convert/e0f90dd47cec3e45407ad60edb65d99e.gif
https://img-blog.csdnimg.cn/img_convert/43a0483858aff134fe97aec9b1ae0b6b.gif
https://img-blog.csdnimg.cn/img_convert/781311fc89546f288ef66b5ba5f86c07.gif76.跨文件样式复用和组件复用案例（0326更新）（点此查看源码实现）
本示例重要介绍了跨文件样式复用和组件复用的场景。在应用开辟中，我们通常须要利用相同功能和样式的ArkUI组件，例如购物页面中会利用相同样式的Button按钮、Text体现笔墨，我们常用的方法是抽取公共样式大概封装成一个自定义组件到公共组件库中以淘汰冗余代码。
https://img-blog.csdnimg.cn/img_convert/df494f658eb7bcd5fd5aa99093bd6798.gif
https://img-blog.csdnimg.cn/img_convert/c7cc3666116cfad766bbed46dfacca2e.gif
https://img-blog.csdnimg.cn/img_convert/de2a0224844053b4c41c7eec3a9df228.gif75.图片九宫格封装案例（0321更新）（点此查看源码实现）
本示例介绍利用(Flex) 组件实现图片在差别个数情况下的布局结果(默认布局和自定义布局)。该场景多用于社交类应用。
https://img-blog.csdnimg.cn/img_convert/575e3905e768033787a59affe6a987f0.gif
https://img-blog.csdnimg.cn/img_convert/897a5e3e46245f4127ccaa84d310abaa.gif
https://img-blog.csdnimg.cn/img_convert/d79ac8b9dad0f01492bd4eee912637d9.gif74.数据库版本升级案例（0321更新）（点此查看源码实现）
本示例介绍利用关系型数据库的接口来进行数据库升降级场景实现
https://img-blog.csdnimg.cn/img_convert/bcea9eda4e6ebc605b44824b48f7ea8d.gif
https://img-blog.csdnimg.cn/img_convert/e68b1cefb3cda1b346d64163432988f5.gif
https://img-blog.csdnimg.cn/img_convert/dd1e662c1ea17f0501e320764e8e5aad.gif73.应用新功能引导实现案例（0321更新）（点此查看源码实现）
本文介绍怎样利用high_light_guide三方库完成应用新版本功能导航。通过高亮地区与蒙版配景的明暗度对比，让用户快速锁定重点功能，相识版本变更和业务入口。
https://img-blog.csdnimg.cn/img_convert/a0cb938a1616f77419d7b4ae7ce53c2f.gif
https://img-blog.csdnimg.cn/img_convert/967c724f0e809ae381e375d07d8fa9a7.gif
https://img-blog.csdnimg.cn/img_convert/1b4c6fb928aff9bc11e48f8cddd97615.gif72.监听HiLog日志实现测试用例验证（0321更新）（点此查看源码实现）
本示例通过监听hilog日志的回调，判断指定日志是否打印，来确定测试用例的实验结果是成功还是失败。由于ArkTS没有注册日志回调的接口，示例通过Native来注册日志回调，并在Native的自定义日志处理函数中过滤用户传入的日志内容后回调ArkTS端的回调函数。
https://img-blog.csdnimg.cn/img_convert/1d6fd4af18c33b3a34e3b6d994957ac8.gif
https://img-blog.csdnimg.cn/img_convert/5c6edc783b3fdc82d70f87e5e6dc46c7.gif
https://img-blog.csdnimg.cn/img_convert/39c8daf8456e4b91122c3f602cfc1785.gif71.正确设置ImageKnife请求头实现防盗链功能（0321更新）（点此查看源码实现）
本案例利用了第三方库imageknife，通过在请求头中添加Referer来获取防盗链图片功能。也可以基于此功能设置请求头中的其他参数，例如User-Agent、Origin乃至ETag等等。
https://img-blog.csdnimg.cn/img_convert/1e5b1f0b565af5a9667985d761daa0a4.gif
https://img-blog.csdnimg.cn/img_convert/1474bd00f92a40af2ed431e25ca41497.gif
https://img-blog.csdnimg.cn/img_convert/078445427eb88aa795fa30d0577d4b81.gif70.手写绘制及保存图片案例（0319更新）（点此查看源码实现）
本示例利用drawing库的Pen和Path结合NodeContainer组件实现手写绘制功能，并通过image库的packToFile和packing接口将手写板的绘制内容保存为图片。
https://img-blog.csdnimg.cn/img_convert/5296a15f9b011bf3d81e93a129dc2704.gif
https://img-blog.csdnimg.cn/img_convert/d03668236ce2dc659aaf9ae293a6c0eb.gif
https://img-blog.csdnimg.cn/img_convert/9c5b2f784a3e5a882c6ad62b7fcff477.gif69.多模态页面转场动效实现案例（0319更新）（点此查看源码实现）
本示例介绍多模态页面转场动效实现：通过半模态转场实现半模态登录界面， 与全屏模态和组件转场结合实现多模态组合登录场景，此中手机验证码登录与账号密码登录都为组件， 通过TransitionEffect.move()实现组件间转场达到近似页面转场的结果。
https://img-blog.csdnimg.cn/img_convert/90fea43d26c4d765495807006c6f2cbf.gif
https://img-blog.csdnimg.cn/img_convert/9d72b1ebb2b3b9befe7cffe69bdb0195.gif
https://img-blog.csdnimg.cn/img_convert/421991bdda668105a4483f6050872adc.gif68.一镜到底“页面转场”动画（0319更新）（点此查看源码实现）
本方案做的是页面点击卡片跳转到详情预览的转场动画结果
https://img-blog.csdnimg.cn/img_convert/9f57b6ceed1c73beb2bf8862dec371d6.gif
https://img-blog.csdnimg.cn/img_convert/418116d423c66becec9219e3e44218c1.gif
https://img-blog.csdnimg.cn/img_convert/c178d0e4830f9b7f7ca4ef042180b4a7.gif67.Swiper指示器导航点位于Swiper下方（0319更新）（点此查看源码实现）
本示例介绍通过分割swiper地区，实现指示器导航点位于swiper下方的结果。
https://img-blog.csdnimg.cn/img_convert/4d1ce1ba7bc946216bcf4401d07c7e34.gif
https://img-blog.csdnimg.cn/img_convert/e3cc6259022a676cd29fbdb5495582c8.gif
https://img-blog.csdnimg.cn/img_convert/ac02d1425e3a5a3eb20a961eedeba696.gif66.侧滑返回变乱拦截案例（0319更新）（点此查看源码实现）
在编辑场景中，存在用户误触返回，导致内容未保存就退出编辑页的征象; 本示例介绍利用NavDestination组件的onBackPressed回调对返回变乱进行拦截，提示用户保存编辑内容，并利用preferences实例长期化保存内容。
https://img-blog.csdnimg.cn/img_convert/0ecd52e16a85332ef81110e08182f30b.gif
https://img-blog.csdnimg.cn/img_convert/36af476cdf7ced5c664b40cc48eb49ac.gif
https://img-blog.csdnimg.cn/img_convert/a3167c9074319c0fb359f15c3e92ef5d.gif65.NAPI封装ArkTS接口案例（0312更新）（点此查看源码实现）
本例以DocumentViewPicker的Select方法为例，提供了Napi封装ArkTS API的通用方法。
https://img-blog.csdnimg.cn/img_convert/fb0c4df7499516d9ef52a5cc871bb16d.gif
https://img-blog.csdnimg.cn/img_convert/d6504606fccdc4c1c4120b687cfa0f6b.gif
https://img-blog.csdnimg.cn/img_convert/d6504606fccdc4c1c4120b687cfa0f6b.gif64.ArkWeb同层渲染案例（0312更新）（点此查看源码实现）
该方案展示了ArkWeb同层渲染：将系统原生组件直接渲染到前端H5页面上，原生组件不仅可以提供H5组件无法实现的一些功能，还能提拔用户体验的流通度
https://img-blog.csdnimg.cn/img_convert/4aa31d3b3d503c24c9ce09f28e9dd35a.jpeg
https://img-blog.csdnimg.cn/img_convert/9dbc84820f85e74ff4536b4bae7272ac.gif
https://img-blog.csdnimg.cn/img_convert/f5e09798298037cc817c180ce2f2615d.gif63.页面间共享组件实例的案例（0312更新）（点此查看源码实现）
本示例提供组件实例在页面间共享的解决方案：通过Stack容器，下层放舆图组件，上层放Navigation组件来管理页面，页面可以共享下层的舆图组件，页面中须要体现舆图的地区设置为透明，并参考触摸交互控制，设置变乱透传及响应地区。
https://img-blog.csdnimg.cn/img_convert/abec7c905412e0befabdada5083bac1d.gif
https://img-blog.csdnimg.cn/img_convert/84a474f78719f9fed227adf5fde3902c.gif
https://img-blog.csdnimg.cn/img_convert/162681aeb443be4cbc9f579a72887fe1.gif62.多文件下载监听案例（0312更新）（点此查看源码实现）
多文件下载监听在应用开辟中是一个非经常见的需求。本示例将介绍怎样利用request上传下载模块实现多文件下载监听，如监听每个文件下载任务的进度，任务暂停，下载完成等下载情况。每个应用最多支持创建10个未完成的任务，相干规格阐明请参考request.agent.create。
https://img-blog.csdnimg.cn/img_convert/56670a4b480941f3bfba37fda81deaed.gif
https://img-blog.csdnimg.cn/img_convert/45bcaec9c6264611391de83db7e6fee4.gif
https://img-blog.csdnimg.cn/img_convert/b881f00281331c8458d243210b059c51.gif61.自定义安全键盘案例（0312更新）（点此查看源码实现）
金融类应用在密码输入时，一般会利用自定义安全键盘。本示例介绍怎样利用TextInput组件实现自定义安全键盘场景，重要包罗TextInput.customKeyboard绑定自定义键盘、自定义键盘布局和状态更新等知识点。
https://img-blog.csdnimg.cn/img_convert/dd0c52665d41a87b5ff858a40f5f170c.gif
https://img-blog.csdnimg.cn/img_convert/38b567c9ea806269c452d5ed346702c6.gif
https://img-blog.csdnimg.cn/img_convert/9ede21620ab6b93b30c23387a3b66598.gif60.适配挖孔屏案例（0312更新）（点此查看源码实现）
本示例介绍利用屏幕属性getDefaultDisplaySync、getCutoutInfo接口实现适配挖孔屏。该场景多用于沉醉式场景下。
https://img-blog.csdnimg.cn/img_convert/dbfe890f7f9295e60ff79e34e1a19fb5.gif
https://img-blog.csdnimg.cn/img_convert/1ff1cdfe92ae17688ab1fecd36f6dda2.gif
https://img-blog.csdnimg.cn/img_convert/f9f90b51d05082b7a5ac847348280253.gif59.自定义路由栈管理（0312更新）（点此查看源码实现）
本案例将介绍怎样利用路由跳转返回时获取到来源页的模块名以及路径名，在实际场景中同一页面通常会根据差别来源页展示差别的UI。
58.左右拖动切换图片结果案例（0304更新）（点此查看源码实现）
本示例利用滑动手势监听，实时调整左右两侧内容体现地区大小和结果。通过绑定gesture变乱中的PanGesture平移手势，实时获取拖动间隔。当拖动时，实时地调治左右两个Image组件的宽度，从而成功实现左右拖动切换图片结果的功能。
https://img-blog.csdnimg.cn/img_convert/431e7412bb146efa3ee7e8e692675d6a.gif
https://img-blog.csdnimg.cn/img_convert/3b1acda321b3cc16b217611b375af866.gif
https://img-blog.csdnimg.cn/img_convert/b507a0e74167b5fcd2accf3b07cc9842.gif57.投票动效实现案例（0304更新）（点此查看源码实现）
本示例介绍利用绘制组件中的Polygon组件配合利用显式动画以及borderRadius实现投票pk组件。
https://img-blog.csdnimg.cn/img_convert/3607a45d086caefdfc466df46286fa6a.gif
https://img-blog.csdnimg.cn/img_convert/fe5af7733f08f0b8f5e8c03525095d55.gif
https://img-blog.csdnimg.cn/img_convert/a2f5c6f89f2f5f297890fd825835586e.gif56.汉字转拼音案例（0304更新）（点此查看源码实现）
本示例介绍利用第三方库的pinyin4js组件实现汉字转大写拼音。
https://img-blog.csdnimg.cn/img_convert/b1398b1eb1f60cd1284c28adf5797d83.gif
https://img-blog.csdnimg.cn/img_convert/ab65094983c4d5401927fc836d798a49.gif
https://img-blog.csdnimg.cn/img_convert/03dbdb55fff82f2b7a71d62904df337d.gif55.底部抽屉滑动结果案例（0304更新）（点此查看源码实现）
本示例重要介绍了利用List实现底部抽屉滑动结果场景，并将界面沉醉式（全屏）体现，及配景舆图可拖动。
https://img-blog.csdnimg.cn/img_convert/1ed8ba51412e4609d66f23bfe4ed8f06.gif
https://img-blog.csdnimg.cn/img_convert/c7cce39b140ccf3f67b6fca720912f2a.gif https://img-blog.csdnimg.cn/img_convert/68987ba1b2bb910ad80876506a0cdb23.gif54.MpChart运动康健场景实践案例（0304更新）（点此查看源码实现）
MpChart是一个包罗各种范例图表的图表库，重要用于业务数据汇总，例如贩卖数据走势图，股价走势图等场景中利用，方便开辟者快速实现图表UI，MpChart重要包罗线形图、柱状图、饼状图、蜡烛图、气泡图、雷达图、瀑布图等自定义图表库。 本示例介绍了MpChart图表组件的利用方法。 该组件多用于可视化等场景。
https://img-blog.csdnimg.cn/img_convert/bf2b97ad923c20b872e68f84896976b5.gif
https://img-blog.csdnimg.cn/img_convert/a495e1b139bbc0ba052a43b1c4369c10.gif
https://img-blog.csdnimg.cn/img_convert/0156336670cbb7ac1991b225d2f3fd50.gif53.大文件拷贝案例（0302更新）（点此查看源码实现）
文件拷贝是应用开辟中的一个常见场景，通常有两种方式，一是直接读写文件的全部内容，二是利用buffer多次读写。前者的优点在于利用简单，但是在大文件场景下，内存占用较高，影响应用性能；后者的优点在于内存占用较小，但是编程稍显复杂。本例将展示怎样利用buffer来将大文件的rawfile复制到应用沙箱。
https://img-blog.csdnimg.cn/img_convert/8878183de05e1d3a74f06a6c785bf42b.gif
https://img-blog.csdnimg.cn/img_convert/2f112e5804afbf816726e240f1e7f184.gif
https://img-blog.csdnimg.cn/img_convert/fdf9a68897751dcb1a3377b224a78860.gif52.Web获取相机拍照图片案例（0302更新）（点此查看源码实现）
本示例介绍怎样在HTML页面中拉起原生相机进行拍照，并获取返回的图片。
https://img-blog.csdnimg.cn/img_convert/e631fa16ad6bbbba1442fd22ce3912a5.gif
https://img-blog.csdnimg.cn/img_convert/5a4c3e7d1a7e12f9ed35f26ed2fdc515.gif
https://img-blog.csdnimg.cn/img_convert/496b42ac2d99dea5947882ee0c860be0.gif51.元素超出List地区案例（0302更新）（点此查看源码实现）
本示例介绍在List组件内实现子组件超出容器边缘的布局样式的实现方法。
https://img-blog.csdnimg.cn/img_convert/9acecdb89afce9a130226dfe823c3df5.gif
https://img-blog.csdnimg.cn/img_convert/210e1927ee594c4a0e7d02884781c2cf.gif
https://img-blog.csdnimg.cn/img_convert/ea8a12316f48c1cf23e075ea4fa22205.gif50.数字滚动动效实现（0229更新）（点此查看源码实现）
本示例重要介绍了数字滚动动效的实现方案。 该方案多用于数字刷新，例如页面刷新抢票数量等场景。
https://img-blog.csdnimg.cn/img_convert/fdbc6140a4f6e447fd716f3ca98ac380.gif https://img-blog.csdnimg.cn/img_convert/0b15e15a2ea6f6e887e351b139b912fa.gif
https://img-blog.csdnimg.cn/img_convert/3d681c80b9c2287e2b7815c8254b7b33.gif49.图片拖拽AI抠图案例（0229更新）（点此查看源码实现）
本示例介绍图片AI抠图的利用：通过enableAnalyzer实现长按图片抠图并拖拽/复制到其他应用中。
https://img-blog.csdnimg.cn/img_convert/23a017cf142e202f80a8b9b1a809ccef.gif https://img-blog.csdnimg.cn/img_convert/c4437150443da603164b7f1ce07786bb.gif48.长列表滑动到指定列表项动效实现案例（0229更新）（点此查看源码实现）
本例利用currentOffset方法获取并记载偏移量，然后利用scrollTo方法跳转到上次浏览记载功能，可以流通滑动到上次列表的位置。
https://img-blog.csdnimg.cn/img_convert/00d9dcc987bbc1adb88198aa3ecf7c4b.gif
https://img-blog.csdnimg.cn/img_convert/5c638b4899634d9d3ddd876d78b1c360.gif47.标题下拉缩放案例（0229更新）（点此查看源码实现）
本文以备忘录应用为示例，介绍怎样在实现标题睁开时继续下拉的动效。
https://img-blog.csdnimg.cn/img_convert/f1257ac14662bb0c4c42b399bb41576b.gif
https://img-blog.csdnimg.cn/img_convert/48ec449e6e59ea7ec0f5fa57a326b887.gif46.利用绘制组件实现自定义进度动画（0229更新）（点此查看源码实现）
本示例介绍利用绘制组件中的Circle组件以及Path组件实现实时进度结果。该场景多用于手机电池电量、汽车油量、水位变革等动态变革中。
https://img-blog.csdnimg.cn/img_convert/8bc54daaf4f010a50389975254101cb6.gif
https://img-blog.csdnimg.cn/img_convert/ed9b1342516297a13e8da892ee5829c5.gif
https://img-blog.csdnimg.cn/img_convert/76f21a18a25ae58837f85c17fdfbcba0.gif45.图片压缩方案（0229更新）（点此查看源码实现）
图片压缩在应用开辟中是一个非经常见的需求，特别是在处理用户上传图片时，须要上传指定大小以内的图片。目前图片压缩支持jpeg、webp、png格式。本例中以jpeg图片为例介绍怎样通过packing和scale实现图片压缩到目的大小以内。
https://img-blog.csdnimg.cn/img_convert/aa3bf4f116bbe8191b708d5bbcafc6e7.gif
https://img-blog.csdnimg.cn/img_convert/fed3e428c54c4c7b6422e596e524258a.gif44.Lottie动画（0229更新）（点此查看源码实现）
Lottie是一个实用于OpenHarmony的动画库，它可以剖析Adobe After Effects软件通过Bodymovin插件导出的json格式的动画，并在移动设备上进行本地渲染， 可以在各种屏幕尺寸和分辨率上出现，并且支持动画的交互性，通过添加触摸变乱或其他用户交互利用，使动画更加生动和具有响应性。
https://img-blog.csdnimg.cn/img_convert/bf2e28e66cb1abc66536c6a569d8d543.gif43.SideBarContainer侧边栏淡入淡出动效实现案例（0229更新）（点此查看源码实现）
在2in1或平板上，群聊侧边栏是一种较为常用的功能，虽然HarmonyOS已经具备了基本的动效，但是部分情况下开辟者可能有定制侧边栏动效的需求，本例重要介绍了怎样基于显式动画实现侧边栏的淡入淡出动效。
https://img-blog.csdnimg.cn/img_convert/1594a35e8b17c9675ff933e3995ccd3b.gif https://img-blog.csdnimg.cn/img_convert/fb0a94a7a73da71f0def8b03d0075318.gif42.页面加载结果实现案例（0229更新）（点此查看源码实现）
本示例介绍Stack堆叠组件和LoadingProgress加载组件模仿首次进入页面实现页面加载的结果。加载完成后，LoadingProgress组件会消散并展示加载结果页（即商品页）。
https://img-blog.csdnimg.cn/img_convert/8ea8281e81804f039245149525e88303.gif
https://img-blog.csdnimg.cn/img_convert/ea0c97bddb3bda1db0676dda60dcd2d3.gif41.Native保存图片到应用沙箱（0222更新）（点此查看源码实现）
本示例重要介绍Native怎样将网络上的图片及Rawfile中的图片保存到应用沙箱中。
https://img-blog.csdnimg.cn/img_convert/f2c7586c57ff85b5e2119e4665e1e4aa.gif
https://img-blog.csdnimg.cn/img_convert/e65cdce1dcfccd2d90a765944268daec.gif40.短视频切换实现案例（0222更新）（点此查看源码实现）
短视频切换在应用开辟中是一种常见场景，上下滑动可以切换视频，非常方便。本模块基于Swiper组件和Video组件实现短视频切换功能。
https://img-blog.csdnimg.cn/img_convert/ab94a6650dc7d9216acfb6d87a8f8d34.gif
https://img-blog.csdnimg.cn/img_convert/2ed9eb9566cad5dcbb231cae37fff99e.gif39.都会选择案例（0220更新）（点此查看源码实现）
本示例介绍都会选择场景的利用：通过AlphabetIndexer实现首字母快速定位都会的索引条导航。
https://img-blog.csdnimg.cn/img_convert/14764b6996d359618188634c09ff55df.gif
https://img-blog.csdnimg.cn/img_convert/2ed9eb9566cad5dcbb231cae37fff99e.gif38.多层级轮播图方案（0219更新）（点此查看源码实现）
本示例介绍利用Stack组件实现多层级瀑布流。该场景多用于购物、资讯类应用。
https://img-blog.csdnimg.cn/img_convert/c5239a02295dfb5d69797acf5103ab6e.gif37.搜索功能实现案例（0219更新）（点此查看源码实现）
本示例介绍利用includes方法对数据实现模糊查询
https://img-blog.csdnimg.cn/img_convert/e1935ca93c75d5b4abb5369549d0fc6e.gif
36.Swiper高度可变革结果（0219更新）（点此查看源码实现）
在很多应用中，swiper组件每一个page的高度是不同等的，以是须要swiper组件下方页面的高度跟着一起变革。
https://img-blog.csdnimg.cn/img_convert/acf7499d9f749fa5a6d469ad2c319047.png由于篇幅、链接等限制，无法在一篇文章维护，1-35号案例已归档到：HarmonyOS Next应用开辟案例(更多案例归档)
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]