72 Star 275 Fork 168

HarmonyOS-Cases / Cases

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MulanPSL-2.0

HarmonyOS NEXT应用开发性能指导

在开发HarmonyOS NEXT应用时,优化应用性能是至关重要的。本文将介绍应用开发过程中常见的一些性能问题,并提供相应的解决方案,配合相关参考示例,帮助开发者解决大部分性能问题。我们把应用性能分析的方法划分为了性能分析四板斧,详细介绍可以参考文章HarmonyOS NEXT应用开发性能优化入门指导

  • 第一板斧:合理使用并行化、预加载和缓存,我们需要合理的使用并行化、预加载和缓存等方法,例如使用多线程并发、异步并发、Web预加载等能力,提升系统资源利用率,减少主线程负载,加快应用的启动速度和响应速度。

  • 第二板斧:尽量减少布局的嵌套层数,在进行页面布局开发时,应该去除冗余的布局嵌套,使用相对布局、绝对定位、自定义布局、Grid、GridRow等扁平化布局,减少布局的嵌套层数,避免系统绘制更多的布局组件,达到优化性能、减少内存占用的目的。

  • 第三板斧:合理管理状态变量,应该合理的使用状态变量,精准控制组件的更新范围,控制状态变量关联组件数量,控制对象级状态变量的成员变量关联组件数,减少系统的组件渲染负载,提升应用流畅度。

  • 第四板斧:合理使用系统接口,避免冗余操作,应该合理使用系统的高频回调接口,删除不必要的Trace和日志打印,避免注册系统冗余回调,减少系统开销。

性能文章总览目录

分类 性能文章
ArkTS高性能编程 高性能编程规范高效并发编程N-API高效开发指导多线程能力场景化利用native的方式实现跨线程调用
减少卡顿丢帧 正确使用LazyForEach优化组件复用使用指导组件复用四板斧WaterFlow高性能开发指导Swiper高性能开发指导合理进行状态管理精准控制组件的更新范围合理使用renderGroup减少动画丢帧合理使用多线程共享内存Grid高性能开发指导状态管理优秀实践合理处理高负载组件的渲染避免开发过程中的冗余操作
提升应用启动和响应速度 提升应用冷启动速度提升应用响应速度Flex布局性能提升使用指导优化布局性能合理选择条件渲染和显隐控制合理使用IPC通信文件上传下载性能提升指导减少首帧绘制时的冗余操作列表场景性能提升实践动效能力实践性能提升的其他方法运行时动态加载页面提升性能合理运行后台任务Web组件开发性能提升指导减小应用包大小
性能工具 性能分析工具CPU Profiler页面布局检查器ArkUI Inspector内存分析器Allocation Profiler帧率分析工具 Frame Profiler启动分析工具Launch Profiler内存快照Snapshot Profiler耗时分析器Time Profiler性能测试工具SmartPerf Editor性能优化工具HiDumper性能优化工具SmartPerf-Host状态变量组件定位工具实践

HarmonyOS NEXT应用开发案例集

概述

随着应用代码的复杂度提升,为了使应用有更好的可维护性和可扩展性,良好的应用架构设计变得尤为重要。本篇文章将介绍一个应用通用架构的设计思路,以减少模块间的耦合、提升团队开发效率,为开发者呈现一个清晰且结构化的开发框架。 本文以“应用通用开发范例App”为例,从分层架构设计和模块化设计的方面介绍应用的架构组成。

分层架构设计:将应用划分为产品定制层、基础特性层和公共能力层,可以降低层间的依赖性,从而提升代码的可维护性。应用通用开发范例App分层架构如下:

common_app_development
|---AppScope
|---common    // 公共能力层,包括公共UI组件、数据管理、通信和工具库等
|---feature   // 基础特性层,包含独立的业务模块,如启动页、登录模块、导航栏等
|---libs      // 三方依赖库
|---product   // 产品定制层,作为不同设备或场景应用入口,例如phone、tv等

模块化设计:应用被分解为多个功能模块,其中每个模块负责执行特定的功能。通过模块化设计提高了代码的可理解性和可复用性,使应用的扩展和维护变得更为简便,同时降低了系统各部分之间的耦合度。应用通用开发范例App模块化结构如下:

common_app_development
|---AppScope
|---common                             // 公共能力层
|   |---utils  
|   |   |---component                  // 公共布局,如功能介绍布局
|   |   |---log                        // 日志打印 
|---feature                            // 基础特性层
|   |---addressexchange                // 地址交换动画案例
|   |---akiusepractice                 // AKI使用实践
|   |---applicationexception           // 应用异常处理案例
|   |---barchart                       // MpChart图表实现案例
|   |---customtabbar                   // 自定义TabBar页签 案例
|   |---eventpropagation               // 阻塞事件冒泡案例
|   |---fitfordarkmode                 // 深色模式适配案例
|   |---functionalscenes               // 主页瀑布流实现 
|   |---gbktranscoding                 // Axios获取网络数据案例
|   |---handletabs                     // Tab组件实现增删Tab标签案例
|   |---imageviewer                    // 图片预览方案
|   |---marquee                        // 跑马灯案例
|   |---modalwindow                    // 全屏登录页面案例
|   |---nativeprogressnotify           // Native侧进度通知到ArkTS
|   |---nativerawfile                  // Native读取Rawfile中文件部分内容
|   |---navigationparametertransfer    // Navigation页面跳转对象传递案例
|   |---pageturninganimation           // 翻页动效案例
|   |---pendingitems                   // 列表编辑实现案例
|   |---photopickandsave               // 图片选择和下载保存案例
|   |---pulltorefreshnews              // 下拉刷新与上滑加载案例
|   |---secondarylinkage               // 二级联动实现案例
|   |---slidetohideanddisplace         // 滑动页面信息隐藏与组件位移效果案例
|   |---variablewatch                  // 多层嵌套类对象监听案例
|   |---verifycode                     // 验证码布局
|   |---vibrateeffect                  // 基础特性层-抖动动画及手机振动效果
|   |---customcalendarpickerdialog     // 基础特性层-自定义日历选择器
|   |---navigationbarchange            // 基础特性层-状态栏显隐变化案例
|   |---customview                     // 基础特性层-自定义视图实现Tab效果
|   |---waterripples                   // 基础特性层-听歌识曲水波纹特效案例
|   |---citysearch                     // 城市选择案例
|   |---componentstack                 // 组件堆叠案例
|   |---dragandexchange                // Grid和List内拖拽交换子组件位置案例
|   |---foldablescreencases            // 折叠屏音乐播放器案例
|   |---imagecomment                   // 发布图片评论案例
|   |---mediafullscreen                // 视频全屏切换案例
|   |---swipercomponent                // 多层级轮播图案例
|   |---swipersmoothvariation          // Swiper高度可变化效果案例
|   |---decompressfile                 // Worker子线程中解压文件案例
|   |---paintcomponent                 // 使用绘制组件实现自定义进度动画案例
|   |---lottieview                     // Lottie
|   |---imagecompression               // 图片压缩方案
|   |---votingcomponent                // 投票组件
|   |---webgetcameraimage              // WebView拉起原生相机案例
|   |---sidebaranimation               // SideBarContainer侧边栏淡入淡出动效实现案例
|   |---imageenableanalyzer            // 图片拖拽AI抠图案例
|   |---indicatorbelowswiper           // swiper指示器导航点位于swiper下方
|   |---bigfilecopy                    // 大文件拷贝案例
|   |---diggingholescreen              // 适配挖孔屏案例
|   |---dragtoswitchpictures           // 左右拖动切换图片效果案例
|   |---listitemoverflow               // 元素超出List区域
|   |---multiplefilesdownload          // 多文件下载监听案例
|   |---searchcomponent                // 搜索页一镜到底案例
|   |---dynamicattributes              // 跨文件样式复用和组件复用
|   |---etswrapper                     // NAPI封装ArkTS接口案例
|   |---handwritingtoimage             // 手写绘制及保存图片
|   |---multimodaltransion             // 多模态页面转场动效实现案例
|   |---nativeembed                    // ArkWeb同层渲染
|   |---sideslipintercept              // 侧滑返回事件拦截案例
|   |---webpdfviewer                   // Web组件预览PDF文件实现案例
|   |---listslidetohistory             // 长列表滑动到指定列表项动效实现案例
|   |---imagetheft                     // 正确配置ImageKnife请求头实现防盗链功能
|   |---componentinstancesharedinpages // 页面间共享组件实例的案例
|   |---fontdynamicregistration        // 动态注册字体案例
|   |---effectKit                      // 使用colorPicker实现背景跟随主题颜色转换
|   |---cardswiperanimation            // 自定义Swiper卡片预览效果实现
|   |---customscan                     // 折叠屏扫描二维码方案
|   |---imagedepthcopy                 // PixelMap深拷贝案例
|   |---pageflip                       // 阅读翻页方式案例
|   |---videocache                     // 边缓存边播放案例
|   |---iconmaincolor                  // 根据icon自适应背景颜色
|   |---bottomdrawerslidecase          // 底部抽屉滑动效果案例
|   |---chinesetopinyin                // 汉字转拼音案例
|   |---customsafekeyboard             // 自定义安全键盘案例
|   |---nativesavepictosandbox         // Native保存图片到应用沙箱
|   |---shortvideo                     // 短视频切换实现案例
|   |---digitalscrollanimation         // 数字滚动动效实现
|   |---expandtitle                    // 标题下拉缩放案例
|   |---pageloading                    // 页面加载效果实现案例
|   |---databaseupgrade                // 数据库版本升级案例
|   |---hilogmonitormanagement         // 监听HiLog日志实现测试用例验证
|   |---transitionanimation            // 一镜到底“页面转场”动画
|   |---imagegridlayout                // 图片九宫格封装案例
|   |---highlightguide                 // 应用新功能引导实现案例
|   |---wordrecognition                // 文字识别案例
|   |---bottompanelslide               // 底部面板嵌套列表滑动案例
|   |---danmakuplayer                  // 视频弹幕功能
|   |---listexchange                   // 列表项交换案例
|   |---tabcontentoverflow             // tabContent内容可以在tabBar上显示并响应滑动事件案例
|   |---chatwithexpression             // 表情聊天案例
|   |---floatwindow                    // 悬浮窗拖拽和吸附动画
|   |---gridexchange                   // 网格元素交换案例
|   |---miniplayeranimation            // 音乐播放转场一镜到底效果实现
|   |---refreshtimeline                // 下拉展开图片和时间轴效果实现案例
|   |---webpagesnapshot                // Web页面长截图
|---libs
|---product 
|   |---entry                          // 产品定制层-应用入口

工程框架和实现设计

产品定制层

产品定制层专注于满足不同设备或使用场景(如应用/元服务)的个性化需求,包括UI设计、资源和配置,以及针对特定场景的交互逻辑和功能特性。

产品定制层的功能模块独立运作,同时依赖基础特性层和公共能力层来实现具体功能。

可参考如下示例:

phone产品应用入口

基础特性层

基础特性层位于公共能力层之上,用于存放基础特性集合,例如相对独立的功能UI和业务逻辑实现。该层的每个功能模块都具有高内聚、低耦合、可定制的特点,以支持产品的灵活部署。

基础特性层为上层的产品定制层提供稳健且丰富的基础功能支持,包括UI组件、基础服务等。同时依赖于下层的公共能力层为其提供通用功能和服务。

首页以Navigation组件为基础,通过路由管理实现了页面或者模块间的跳转。

106.通过全局状态保留弹窗实现评论组件案例(0426更新)

评论组件在目前市面上的短视频app中是一种很常见的场景,本案例使用全局状态保留能力弹窗来实现评论组件。详细说明文档全局状态保留能力弹窗说明文档

105.网格元素交换案例(0426更新)

直接进行交换和删除元素会给用户带来不好的体验效果,因此需要在此过程中注入一些特色的动画来提升体验效果,本案例通过Grid组件、attributeModifier、以 及animateTo函数实现了拖拽动画和删除动画。详细说明文档

104.下拉展开图片和时间轴效果实现案例(0422更新)

下拉展开图片效果:初始时顶部图片只显示中间部分,其余部分,分别隐藏在屏幕上边缘和时间轴模块下方,随着下拉,图片会逐渐展开。 时间轴效果:位于左边,虚线贯穿整个List,每个内容模块前都有一个时间轴节点。详细说明文档

103.定制HAP多目标构建产物(0419更新)

本案例展示如何将工程打包成不同版本,并单独配置资源文件,实现定制多目标构建产物功能。详细说明文档

102.表情聊天案例(0419更新)

本示例主要介绍如何在聊天信息中加入表情图片。通过使用CustomDialog创建表情键盘对话框,使用RichEdit接收所选表情的热键字符串,在发送信息时将热键转换为图片后显示在Richtext的聊天信息框中。详细说明文档

101.Web页面长截图(0419更新)

本案例实现了Web组件中网页长截图的方案。支持截图后展示大小浮窗预览、保存图片到相册、手势左滑关闭等功能。详细说明文档

100.音乐播放转场一镜到底效果实现(0419更新)

音乐播放的Mini条播放栏在转场时的一镜到底动画是音乐播放器应用开发中常见的需求。本示例将介绍如何实现Mini条的一镜到底动画,如Mini条歌曲封面的缩放动画,Mini条的展开收起动画等。详细说明文档

99.tabContent内容可以在tabBar上显示并响应滑动事件案例(0418更新)

本示例实现了tabContent内容可以在tabBar上显示并且tabBar可以响应滑动事件的功能。详细说明文档

98.使用预渲染实现Web页面瞬开效果实践(0418更新)

本案例集成在应用entry模块中,使用Web预渲染实现了对各个案例的功能介绍。具体细节见详细说明文档

97.XComponent + Vsync 实现自定义动画(0418更新)

XComponent 提供了应用在 native 侧调用 OpenGLES 图形接口的能力,本文主要介绍如何配合 Vsync 事件,完成自定义动画。在这种实现方式下,自定义动画的绘制不在 UI 主线程中完成,即使主线程卡顿,动画效果也不会受影响。详细说明文档

96.Canvas实现模拟时钟案例(0418更新)

本示例介绍利用Canvas和定时器实现模拟时钟场景,该案例多用于用户需要显示自定义模拟时钟的场景。详细说明文档

95.网格元素交换案例(0417更新)

本示例分别通过onItemDrop()和onDrop()回调,实现子组件在Grid和List中的子组件位置交换。详细说明文档

94.视频弹幕功能(0411更新)

本示例介绍如何使用@ohos.danmakuflamemaster和@ohos.gsyvideoplayer开发支持视频弹幕的播放器。可以自定义弹幕样式、占据屏幕宽度,发送弹幕,开关弹幕视图。详细说明文档

93.悬浮窗拖拽和吸附动画(0417更新)

本示例使用position绝对定位实现应用内悬浮窗,并且通过animateTo结合curves动画曲线实现悬浮窗拖拽跟手和松手吸附边缘的弹性动画效果。详细说明文档

92.Web自定义长按菜单案例(0411更新)

本示例介绍了给Webview页面中可点击元素(超链接/图片)绑定长按/鼠标右击时的自定义菜单的方案。详细说明文档

91.阅读翻页方式案例(0411更新)

本示例展示手机阅读时左右翻页,上下翻页,覆盖翻页的功能。详细说明文档

90.语音录制和声音动效实现(0411更新)

本示例使用AVrecord录制音频和AVrecord的getAudioCapturerMaxAmplitude接口获取振幅实现UI动效;使用AVplayer播放音频。详细说明文档

89.底部面板嵌套列表滑动案例(0411更新)

本示例主要介绍了利用panel实现底部面板内嵌套列表,分阶段滑动效果场景。详细说明文档

88.列表项交换案例(0411更新)

本案例通过List组件、组合手势GestureGroup、swipeAction属性以及attributeModifier属性等实现了列表项的交换和删除。详细说明文档

87.动态注册字体案例(0402更新)

本示例介绍利用上传下载模块和注册自定义字体模块实现从网络上下载字体并注册应用字体的功能,该场景多用于由特殊字体要求的场景。详细说明文档

86.边缓存边播放案例(0402更新)

OhosVideoCache是一个支持边播放边缓存的库,只需要将音视频的url传递给OhosVideoCache处理之后再设置给播放器,OhosVideoCache就可以一边下载音视频数据并保存在本地,一边读取本地缓存返回给播放器,使用者无需进行其他操作。详细说明文档

85.使用colorPicker实现背景跟随主题颜色转换(0402更新)

本示例介绍使用image库以及effectKit库中的colorPicker对目标图片进行取色,将获取的颜色作为背景渐变色,通过swiper组件对图片进行轮播。详细说明文档

84.文字识别案例(0402更新)

本示例介绍使用text组件的enableDataDetector属性实现文本特殊文字识别。详细说明文档

83.根据icon自适应背景颜色(0402更新)

本示例将介绍如何根据图片设置自适应的背景色。详细说明文档

82.折叠屏扫描二维码方案(0402更新)

本示例介绍使用自定义界面扫码能力在折叠屏设备中实现折叠态切换适配。自定义界面扫码使用系统能力customScan,其提供相机流的初始化、启动扫码、识别、停止扫码、释放相机流资源等能力。折叠屏折叠状态通过监听display的foldStatusChange事件实现。详细说明文档

81.搜索页一镜到底案例(0402更新)

本示例介绍使用bindContentCover、transition、animateTo实现一镜到底转场动画,常用于首页搜索框点击进入搜索页场景。详细说明文档

80.自定义Swiper卡片预览效果实现(0326更新)

本方案做的是采用Swiper组件实现容器视图居中完全展示,两边等长露出,并且跟手滑动效果。详细说明文档

79.Web组件预览PDF文件实现案例(0326更新)

本案例通过Web组件实现预览本地PDF文件和预览网络PDF文件,代码为Tabs容器组件包含了两个独立的TabContent子组件,分别标示为预览本地PDF文件和预览网络PDF文件。每个子组件内部构建一个Web组件。第一个Web组件利用resource协议关联本地PDF文件路径以预览本地存储的PDF资源;第二个Web组件则通过配置网络链接属性,实现从互联网加载并预览远程PDF文件内容。详细说明文档

78.Navigation实现多设备适配案例(0326更新)

在应用开发时,一个应用需要适配多终端的设备,使用Navigation的mode属性来实现一套代码,多终端适配。详细说明文档

77.PixelMap深拷贝案例(0326更新)

在图片开发过程中经常会涉及到PixelMap的深拷贝,本例通过使用PixelMap的readPixelsToBuffer方法来实现深拷贝。在创建源PixelMap的时候,需要将解码参数设置为BGRA_8888,而在深拷贝创建目标PixelMap的时候需要将解码参数设置为RGBA_8888。详细说明文档

76.跨文件样式复用和组件复用(0326更新)

本示例主要介绍了跨文件样式复用和组件复用的场景。在应用开发中,我们通常需要使用相同功能和样式的ArkUI组件,例如购物页面中会使用相同样式的Button按钮、Text显示文字,我们常用的方法是抽取公共样式或者封装成一个自定义组件到公共组件库中以减少冗余代码。详细说明文档

75.图片九宫格封装案例(0321更新)

本示例介绍使用(Flex) 组件实现图片在不同个数情况下的布局效果(默认布局和自定义布局)。该场景多用于社交类应用。详细说明文档

74.数据库版本升级案例(0321更新)

本示例介绍使用关系型数据库的接口来进行数据库升降级场景实现。详细说明文档

73.应用新功能引导实现案例(0321更新)

本文介绍如何使用high_light_guide三方库完成应用新版本功能导航。通过高亮区域与蒙版背景的明暗度对比,让用户快速锁定重点功能,了解版本变更和业务入口。详细说明文档

72.监听HiLog日志实现测试用例验证(0321更新)

日常中在进行测试用例验证时,会出现部分场景无法通过判断UI的变化来确认用例是否正常运行,我们可以通过监听日志的方式来巧妙的实现这种场景。本示例通过监听hilog日志的回调,判断指定日志是否打印,来确定测试用例的执行结果是成功还是失败。由于ArkTS没有注册日志回调的接口,示例通过Native来注册日志回调,并在Native的自定义日志处理函数中过滤用户传入的日志内容后回调ArkTS端的回调函数。详细说明文档

71.正确配置ImageKnife请求头实现防盗链功能(0321更新)

本案例使用了第三方库ImageKnife,通过在请求头中添加Referer来获取防盗链图片功能。也可以基于此功能设置请求头中的其他参数,例如User-Agent、Origin甚至ETag等等。详细说明文档

70.手写绘制及保存图片(0319更新)

本示例使用drawing库的Pen和Path结合NodeContainer组件实现手写绘制功能,并通过image库的packToFile和packing接口将手写板的绘制内容保存为图片。详细说明文档

69.多模态页面转场动效实现案例(0319更新)

本示例介绍多模态页面转场动效实现:通过半模态转场实现半模态登录界面,与全屏模态和组件转场结合实现多模态组合登录场景,其中手机验证码登录与账号密码登录都为组件,通过TransitionEffect.move()实现组件间转场达到近似页面转场的效果。详细说明文档

68.一镜到底“页面转场”动画(0319更新)

本方案做的是页面点击卡片跳转到详情预览的转场动画效果。详细说明文档

67.swiper指示器导航点位于swiper下方(0319更新)

本示例介绍通过分割swiper区域,实现指示器导航点位于swiper下方的效果。详细说明文档

66.侧滑返回事件拦截案例(0319更新)

本示例介绍使用NavDestination组件的onBackPressed回调对返回事件进行拦截,提示用户保存编辑内容,并使用preferences实例持久化保存内容。详细说明文档

65.NAPI封装ArkTS接口案例(0312更新)

部分应用的主要开发语言为C/C++,但是HarmonyOS的部分接口仅以ArkTS的形式暴露,因此需要将ArkTS的接口封装为Native接口。本例以DocumentViewPicker的Select方法为例,提供了Napi封装ArkTSAPI的通用方法。详细说明文档

64.ArkWeb同层渲染案例(0312更新)

该方案展示了ArkWeb同层渲染:将系统原生组件直接渲染到前端H5页面上,原生组件不仅可以提供H5组件无法实现的一些功能,还能提升用户体验的流畅度。详细说明文档

63.页面间共享组件实例的案例(0312更新)

本示例提供组件实例在页面间共享的解决方案:通过Stack容器,下层放地图组件,上层放Navigation组件来管理页面,页面可以共享下层的地图组件,页面中需要显示地图的区域设置为透明,并参考触摸交互控制,设置事件透传及响应区域。详细说明文档

62.多文件下载监听案例(0312更新)

本示例介绍如何使用request上传下载模块实现多文件下载监听,如监听每个文件下载任务的进度,下载暂停,下载完成等文件下载情况。详细说明文档

61.自定义安全键盘案例(0312更新)

金融类应用在密码输入时,一般会使用自定义安全键盘。本示例介绍如何使用TextInput组件实现自定义安全键盘场景,主要包括TextInput.customKeyboard绑定自定义键盘、自定义键盘布局和状态更新等知识点。详细说明文档

60.适配挖孔屏案例(0312更新)

本示例介绍使用屏幕属性getDefaultDisplaySync、getCutoutInfo接口实现适配挖孔屏。该场景多用于沉浸式场景下。详细说明文档

59.自定义路由栈管理(0312更新)

本案例将介绍如何使用路由跳转返回时获取到来源页的模块名以及路径名,在实际场景中同一页面通常会根据不同来源页展示不同的UI。详细说明文档

58.左右拖动切换图片效果案例(0304更新)

本示例使用滑动手势监听,实时调整左右两侧内容显示区域大小和效果。通过绑定gesture事件中的PanGesture平移手势,实时获取拖动距离。当拖动时,实时地调节左右两个Image组件的宽度,从而成功实现左右拖动切换图片效果的功能。详细说明文档

57.投票动效实现案例(0304更新)

本示例介绍使用绘制组件中的Polygon组件配合使用显式动画以及borderRadius实现投票pk组件。详细说明文档

56.汉字转拼音案例(0304更新)

本示例介绍使用第三方库的pinyin4js组件实现汉字转大写拼音。详细说明文档

55.底部抽屉滑动效果案例(0304更新)

本示例主要介绍了利用List实现底部抽屉滑动效果场景,并将界面沉浸式(全屏)显示,及背景地图可拖动。详细说明文档

54.MpChart运动健康场景实践案例(0304更新)

MpChart是一个包含各种类型图表的图表库,主要用于业务数据汇总,例如销售数据走势图,股价走势图等场景中使用,方便开发者快速实现图表UI,MpChart主要包括线形图、柱状图、饼状图、蜡烛图、气泡图、雷达图、瀑布图等自定义图表库。 本示例介绍了MpChart图表组件的使用方法。 该组件多用于可视化等场景。详细说明文档

53.大文件拷贝案例(0302更新)

文件拷贝是应用开发中的一个常见场景,通常有两种方式,一是直接读写文件的全部内容,二是使用buffer多次读写。前者的优点在于使用简单,但是在大文件场景下,内存占用较高,影响应用性能;后者的优点在于内存占用较小,但是编程稍显复杂。本例将展示如何使用buffer来将大文件的rawfile复制到应用沙箱。详细说明文档

52.Web获取相机拍照图片案例(0302更新)

本示例介绍如何在HTML页面中拉起原生相机进行拍照,并获取返回的图片。详细说明文档

51.元素超出List区域(0302更新)

本示例介绍在List组件内实现子组件超出容器边缘的布局样式的实现方法。详细说明文档

50.数字滚动动效实现(0229更新)

本示例主要介绍了数字滚动动效的实现方案。 该方案多用于数字刷新,例如页面刷新抢票数量等场景。详细说明文档

49.图片拖拽AI抠图案例(0229更新)

本示例介绍图片AI抠图案例的使用:通过Image.enableAnalyzer(true)实现长按图片抠图并拖拽/复制到其他应用中。详细说明文档

48.长列表滑动到指定列表项动效实现案例(0229更新)

本示例使用currentOffset方法获取并记录偏移量,然后使用scrollTo方法跳转到上次浏览记录功能,可以流畅滑动到上次列表的位置。详细说明文档

47.标题下拉缩放案例(0229更新)

本文以备忘录应用为示例,介绍如何在实现标题展开时继续下拉的动效。详细说明文档

46.使用绘制组件实现自定义进度动画(0229更新)

本示例介绍使用绘制组件中的Circle组件以及Path组件实现实时进度效果。该场景多用于手机电池电量、汽车油量、水位变化等动态变化中。详细说明文档

45.图片压缩方案(0229更新)

本示例介绍如何通过packing和scale实现图片压缩到指定大小以内。详细说明文档

44.Lottie动画(0229更新)

Lottie是一个适用于OpenHarmony的动画库,它可以解析Adobe After Effects软件通过Bodymovin插件导出的json格式的动画,并在移动设备上进行本地渲染,可以在各种屏幕尺寸和分辨率上呈现,并且支持动画的交互性,通过添加触摸事件或其他用户交互操作,使动画更加生动和具有响应性。详细说明文档

43.SideBarContainer侧边栏淡入淡出动效实现案例(0229更新)

在pc或平板上,群聊侧边栏是一种较为常用的功能,虽然HarmonyOS已经具备了基本的动效,但是部分情况下开发者可能有定制侧边栏动效的需求,本例主要介绍了如何基于显式动画实现侧边栏的淡入淡出动效。详细说明文档

42.页面加载效果实现案例(0229更新)

本示例介绍Stack堆叠组件和LoadingProgress加载组件模拟首次进入页面实现页面加载的效果。加载完成后,LoadingProgress组件会消失并展示加载结果页(即商品页)。详细说明文档

41.Native保存图片到应用沙箱(0222更新)

本示例主要介绍Native如何将网络上的图片及Rawfile中的图片保存到应用沙箱中。详细说明文档

40.短视频切换实现案例(0222更新)

短视频切换在应用开发中是一种常见场景,上下滑动可以切换视频,十分方便。本模块基于Swiper组件和Video组件实现短视频切换功能。详细说明文档

39.城市选择案例(0220更新)

本示例介绍城市选择场景的使用:通过AlphabetIndexer实现首字母快速定位城市的索引条导航。详细说明文档

38.多层级轮播图案例(0219更新)

本示例介绍使用ArkUI Stack组件实现多层级瀑布流。该场景多用于购物、资讯类应用。详细说明文档

37.搜索功能实现案例(0219更新)

本示例介绍使用includes方法对数据实现模糊查询。详细说明文档

36.Swiper高度可变化效果实现(0219更新)

在很多应用中,swiper组件每一个page的高度是不一致的,所以需要swiper组件下方页面的高度跟着一起变化。详细说明文档

35.听歌识曲水波纹特效案例(0219更新)

本示例介绍水波纹的特效。该场景多用于各种软件的按钮。听歌识曲水波纹特效案例可以参考此详细说明文档

34.自定义日历选择器(0219更新)

日历选择器是出行类应用常见模块。自定义日历选择器案例可以参考详细说明文档

33.组件堆叠案例(0219更新)

本示例介绍运用Stack组件以构建多层次堆叠的视觉效果。通过绑定Scroll组件的onScroll滚动事件回调函数,精准捕获滚动动作的发生。当滚动时,实时地调节组件的透明度、高度等属性,从而成功实现了嵌套滚动效果、透明度动态变化以及平滑的组件切换。详细说明文档

32.自定义视图实现Tab效果(0219更新)

本示例介绍使用Text、List等组件,添加点击、动画等事件 onClick animateTo 自定义视图实现类似Tab效果。自定义视图实现Tab效果的方案可以参考此详细说明文档

31.Worker子线程中解压文件案例(0219更新)

本示例介绍在Worker子线程使用@ohos.zlib提供的zlib.decompressfile接口对沙箱目录中的压缩文件进行解压操作,解压成功后将解压路径返回主线程,获取解压文件列表。详细说明文档

30.折叠屏音乐播放器案例(0219更新)

本示例介绍使用ArkUI中的容器组件FolderStack在折叠屏设备中实现音乐播放器场景。详细说明文档

29.发布图片评论案例(0219更新)

本示例将通过发布图片评论场景,介绍如何使用startAbilityForResult接口拉起相机拍照,并获取相机返回的数据。详细说明文档

28.视频全屏切换案例(0219更新)

本示例介绍了Video组件和@ohos.window接口实现媒体全屏的功能。该场景多用于首页瀑布流媒体播放等。。详细说明文档

27.Navigation页面跳转对象传递案例(0219更新)

本示例主要介绍在使用Navigation实现页面跳转时,如何在跳转页面得到转入页面传的类对象的方法。实现过程中使用了第三方插件class-transformer,传递对象经过该插件的plainToClass方法转换后可以直接调用对象的方法详细说明文档

26.动态路由(0219更新)

本示例将介绍如何使用动态路由跳转到模块中的页面,以及如何使用动态import的方式加载模块。详细说明文档

25.状态栏显隐变化案例(0204更新)

本示例介绍使用Scroll组件的滚动事件 onScroll 实现状态栏显隐变化。该场景多用于各种软件的首页、我的等页面中。状态栏显隐变化的方案可以参考此详细说明文档

24.使用弹簧曲线实现抖动动画及手机振动效果案例(0204更新)

抖动动画和手机振动效果是手机使用时常见的效果。抖动动画及手机振动效果案例可以参考详细说明文档

23.验证码布局(0204更新)

本示例介绍如何使用Text组件实现验证码场景,并禁用对内容的选中、复制、光标。详细说明文档

22.在Native侧实现进度通知功能(0204更新)

本示例通过模拟下载场景介绍如何将Native的进度信息实时同步到ArkTS侧。详细说明文档

21.翻页动效案例(0204更新)

翻页动效是应用开发中常见的动效场景,常见的有书籍翻页,日历翻页等。本例将介绍如何通过ArkUI提供的显示动画接口animateTo实现翻页的效果。详细说明文档

20.下拉刷新上滑加载案例(0204更新)

本示例介绍使用第三方库的PullToRefresh组件实现列表的下拉刷新数据和上滑加载后续数据。详细说明文档

19.跑马灯案例(0204更新)

本示例介绍了文本宽度过宽时,如何实现文本首尾相接循环滚动并显示在可视区,以及每循环滚动一次之后会停滞一段时间后再滚动。详细说明文档

18.深色模式案例(0204更新)

本示例介绍在开发应用以适应深色模式时,对于深色和浅色模式的适配方案,采取了多种策略。详细说明文档

17.应用异常处理案例(0204更新)

本示例介绍了通过应用事件打点hiAppEvent获取上一次应用异常信息的方法,主要分为应用崩溃、应用卡死以及系统查杀三种。详细说明文档

16.图片选择和下载保存案例(0204更新)

本示例介绍图片相关场景的使用:包含访问手机相册图片、选择预览图片并显示选择的图片到当前页面,下载并保存网络图片到手机相册或到指定用户目录两个场景。详细说明文档

15.多层嵌套类监听案例(0130更新)

对于多层嵌套的情况,比如二维数组,或者数组项class,或者class的属性是class,他们的第二层的属性变化是无法观察到的。@Observed/@ObjectLink装饰器可以解决, 多层嵌套类对象监听方案可以参考详细说明文档

14.使用AKI轻松实现跨语言调用(0130更新)

AKI提供了极简语法糖使用方式,一行代码完成JS与C/C++的无障碍跨语言互调,使用方便。本模块将介绍使用AKI编写C++跨线程调用JS函数场景,为开发者使用AKI提供参考。AKI使用实践可参考此详细说明文档

13.Tab组件实现增删Tab标签方案案例(0129更新)

本示例介绍使用了Tab组件实现自定义增删Tab页签的功能。该场景多用于浏览器等场景。详细说明文档

12.Axios获取解析网络数据案例(0204更新)

本示例介绍使用第三方库的Axios获取GBK格式的网络数据时,通过util实现GBK转换UTF-8格式。该场景多用于需要转换编码格式的应用。详细说明文档

11.读取Rawfile中文件部分内容案例(0127更新)

使用native从rawfile中文件读取部分内容。具体方案可以参考此详细说明文档

10.列表编辑实现案例(0127更新)

列表的编辑模式用途十分广泛,常见于待办事项管理、文件管理、备忘录的记录管理等应用场景。列表编辑实现方案可以参考此详细说明文档

9.二级联动实现案例(0126更新)

二级联动是指一个列表(一级列表)的选择结果,来更新另一个列表(二级列表)的选项。二级联动的方案可以参考此详细说明文档

8.阻塞事件冒泡案例(0126更新)

事件冒泡是指触发子组件事件的时候,事件会传递到父组件,这样会导致父组件的事件也会触发。阻塞事件冒泡的方案可以参考此详细说明文档

7.图片缩放效果实现案例(0127更新)

本模块基于Image组件实现了简单的图片预览功能,支持双指捏合等效果。图片预览方案可参考此详细说明文档

6.主页瀑布流实现案例(0127更新)

本示例使用WaterFlow+LazyForeEach实现了瀑布流场景。具体方案可以参考详细说明文档

5.滑动页面信息隐藏与组件位移效果案例(0129更新)

在很多应用中,向上滑动"我的"页面,页面顶部会有如下变化效果:一部分信息逐渐隐藏,另一部分信息逐渐显示,同时一些组件会进行缩放或者位置移动。向下滑动时则相反。详细说明文档

4.MpChart图表实现案例(0126更新)

MpChart是一个包含各种类型图表的图表库,方便开发者快速实现图表UI。使用MpChart可以实现柱状图UI效果,具体方案可以参考此详细说明文档

3.全屏登录页面案例(0129更新)

本例介绍各种应用登录页面。在主页面点击跳转到全屏登录页后,显示全屏模态页面,全屏模态页面从下方滑出并覆盖整个屏幕,模态页面内容自定义,此处分为默认一键登录方式和其他登录方式。详细说明文档

2.自定义TabBar页签案例(0127更新)

TabBar在大部分的APP当中都能够使用到,不同的APP可能存在不一样的TabBar样式,Tab组件自带的TabBar属性对于部分效果无法满足,如页签中间显示一圈圆弧外轮廓等, 因此我们需要去自己定义一个TabBar页签来满足开发的需要。自定义TabBar页签的方案可以参考此详细说明文档

1.地址交换动画案例(0127更新)

在出行类订票软件中,一般都有此动画效果,点击交换后,起点和终点互换。地址交换动画的方案可以参考此详细说明文档

公共能力层

公共功能层用于存放公共基础能力,集中了例如公共UI组件、数据管理、外部交互以及工具库等的共享功能。应用与元服务都可以共享和调用这些公共能力。

公共能力层为上层的基础特性层和产品定制层提供稳定可靠的功能支持,确保整个应用/元服务的稳定性和可维护性。

应用通用开发范例App公共能力层包含以下模块:日志打印功能介绍布局

配套平台

  1. 适用最新HarmonyOS Next版本;

  2. 适用Stage模型,SDK版本为API11;

  3. 适用最新DevEco Studio版本。

木兰宽松许可证, 第2版 木兰宽松许可证, 第2版 2020年1月 http://license.coscl.org.cn/MulanPSL2 您对“软件”的复制、使用、修改及分发受木兰宽松许可证,第2版(“本许可证”)的如下条款的约束: 0. 定义 “软件”是指由“贡献”构成的许可在“本许可证”下的程序和相关文档的集合。 “贡献”是指由任一“贡献者”许可在“本许可证”下的受版权法保护的作品。 “贡献者”是指将受版权法保护的作品许可在“本许可证”下的自然人或“法人实体”。 “法人实体”是指提交贡献的机构及其“关联实体”。 “关联实体”是指,对“本许可证”下的行为方而言,控制、受控制或与其共同受控制的机构,此处的控制是指有受控方或共同受控方至少50%直接或间接的投票权、资金或其他有价证券。 1. 授予版权许可 每个“贡献者”根据“本许可证”授予您永久性的、全球性的、免费的、非独占的、不可撤销的版权许可,您可以复制、使用、修改、分发其“贡献”,不论修改与否。 2. 授予专利许可 每个“贡献者”根据“本许可证”授予您永久性的、全球性的、免费的、非独占的、不可撤销的(根据本条规定撤销除外)专利许可,供您制造、委托制造、使用、许诺销售、销售、进口其“贡献”或以其他方式转移其“贡献”。前述专利许可仅限于“贡献者”现在或将来拥有或控制的其“贡献”本身或其“贡献”与许可“贡献”时的“软件”结合而将必然会侵犯的专利权利要求,不包括对“贡献”的修改或包含“贡献”的其他结合。如果您或您的“关联实体”直接或间接地,就“软件”或其中的“贡献”对任何人发起专利侵权诉讼(包括反诉或交叉诉讼)或其他专利维权行动,指控其侵犯专利权,则“本许可证”授予您对“软件”的专利许可自您提起诉讼或发起维权行动之日终止。 3. 无商标许可 “本许可证”不提供对“贡献者”的商品名称、商标、服务标志或产品名称的商标许可,但您为满足第4条规定的声明义务而必须使用除外。 4. 分发限制 您可以在任何媒介中将“软件”以源程序形式或可执行形式重新分发,不论修改与否,但您必须向接收者提供“本许可证”的副本,并保留“软件”中的版权、商标、专利及免责声明。 5. 免责声明与责任限制 “软件”及其中的“贡献”在提供时不带任何明示或默示的担保。在任何情况下,“贡献者”或版权所有者不对任何人因使用“软件”或其中的“贡献”而引发的任何直接或间接损失承担责任,不论因何种原因导致或者基于何种法律理论,即使其曾被建议有此种损失的可能性。 6. 语言 “本许可证”以中英文双语表述,中英文版本具有同等法律效力。如果中英文版本存在任何冲突不一致,以中文版为准。 条款结束 如何将木兰宽松许可证,第2版,应用到您的软件 如果您希望将木兰宽松许可证,第2版,应用到您的新软件,为了方便接收者查阅,建议您完成如下三步: 1, 请您补充如下声明中的空白,包括软件名、软件的首次发表年份以及您作为版权人的名字; 2, 请您在软件包的一级目录下创建以“LICENSE”为名的文件,将整个许可证文本放入该文件中; 3, 请将如下声明文本放入每个源文件的头部注释中。 Copyright (c) [Year] [name of copyright holder] [Software Name] is licensed under Mulan PSL v2. You can use this software according to the terms and conditions of the Mulan PSL v2. You may obtain a copy of Mulan PSL v2 at: http://license.coscl.org.cn/MulanPSL2 THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. See the Mulan PSL v2 for more details. Mulan Permissive Software License,Version 2 Mulan Permissive Software License,Version 2 (Mulan PSL v2) January 2020 http://license.coscl.org.cn/MulanPSL2 Your reproduction, use, modification and distribution of the Software shall be subject to Mulan PSL v2 (this License) with the following terms and conditions: 0. Definition Software means the program and related documents which are licensed under this License and comprise all Contribution(s). Contribution means the copyrightable work licensed by a particular Contributor under this License. Contributor means the Individual or Legal Entity who licenses its copyrightable work under this License. Legal Entity means the entity making a Contribution and all its Affiliates. Affiliates means entities that control, are controlled by, or are under common control with the acting entity under this License, ‘control’ means direct or indirect ownership of at least fifty percent (50%) of the voting power, capital or other securities of controlled or commonly controlled entity. 1. Grant of Copyright License Subject to the terms and conditions of this License, each Contributor hereby grants to you a perpetual, worldwide, royalty-free, non-exclusive, irrevocable copyright license to reproduce, use, modify, or distribute its Contribution, with modification or not. 2. Grant of Patent License Subject to the terms and conditions of this License, each Contributor hereby grants to you a perpetual, worldwide, royalty-free, non-exclusive, irrevocable (except for revocation under this Section) patent license to make, have made, use, offer for sale, sell, import or otherwise transfer its Contribution, where such patent license is only limited to the patent claims owned or controlled by such Contributor now or in future which will be necessarily infringed by its Contribution alone, or by combination of the Contribution with the Software to which the Contribution was contributed. The patent license shall not apply to any modification of the Contribution, and any other combination which includes the Contribution. If you or your Affiliates directly or indirectly institute patent litigation (including a cross claim or counterclaim in a litigation) or other patent enforcement activities against any individual or entity by alleging that the Software or any Contribution in it infringes patents, then any patent license granted to you under this License for the Software shall terminate as of the date such litigation or activity is filed or taken. 3. No Trademark License No trademark license is granted to use the trade names, trademarks, service marks, or product names of Contributor, except as required to fulfill notice requirements in Section 4. 4. Distribution Restriction You may distribute the Software in any medium with or without modification, whether in source or executable forms, provided that you provide recipients with a copy of this License and retain copyright, patent, trademark and disclaimer statements in the Software. 5. Disclaimer of Warranty and Limitation of Liability THE SOFTWARE AND CONTRIBUTION IN IT ARE PROVIDED WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED. IN NO EVENT SHALL ANY CONTRIBUTOR OR COPYRIGHT HOLDER BE LIABLE TO YOU FOR ANY DAMAGES, INCLUDING, BUT NOT LIMITED TO ANY DIRECT, OR INDIRECT, SPECIAL OR CONSEQUENTIAL DAMAGES ARISING FROM YOUR USE OR INABILITY TO USE THE SOFTWARE OR THE CONTRIBUTION IN IT, NO MATTER HOW IT’S CAUSED OR BASED ON WHICH LEGAL THEORY, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. 6. Language THIS LICENSE IS WRITTEN IN BOTH CHINESE AND ENGLISH, AND THE CHINESE VERSION AND ENGLISH VERSION SHALL HAVE THE SAME LEGAL EFFECT. IN THE CASE OF DIVERGENCE BETWEEN THE CHINESE AND ENGLISH VERSIONS, THE CHINESE VERSION SHALL PREVAIL. END OF THE TERMS AND CONDITIONS How to Apply the Mulan Permissive Software License,Version 2 (Mulan PSL v2) to Your Software To apply the Mulan PSL v2 to your work, for easy identification by recipients, you are suggested to complete following three steps: i Fill in the blanks in following statement, including insert your software name, the year of the first publication of your software, and your name identified as the copyright owner; ii Create a file named “LICENSE” which contains the whole context of this License in the first directory of your software package; iii Attach the statement to the appropriate annotated syntax at the beginning of each source file. Copyright (c) [Year] [name of copyright holder] [Software Name] is licensed under Mulan PSL v2. You can use this software according to the terms and conditions of the Mulan PSL v2. You may obtain a copy of Mulan PSL v2 at: http://license.coscl.org.cn/MulanPSL2 THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. See the Mulan PSL v2 for more details.

简介

看置顶Issue,加入HarmonyOS NEXT应用开发案例交流微信群! 展开 收起
JavaScript 等 6 种语言
MulanPSL-2.0
取消

发行版 (2)

全部

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/harmonyos-cases/cases.git
git@gitee.com:harmonyos-cases/cases.git
harmonyos-cases
cases
Cases
master

搜索帮助