普通网友-优快云博客

原创 HarmonyOS 开发实践——基于原生的跨模块资源访问

对于“color”、“float”、“string”、“plural”、“media”、“profile”等类型的资源，通过"$r(‘app.type.name’)"形式引用。其中，app为resources目录中定义的资源；type为资源类型或资源的存放位置；name为资源名，开发者定义资源时确定。

2024-10-24 16:00:40 476

原创 ArkTS基础知识 - 类、接口及泛型

前面我们学习了 ArkTS基础知识 - 声明变量、常量、类型和函数，本文我们继续学习鸿蒙开发中使用ARKTS的类、接口、泛型、字段、方法、继承以及模块导出和导入的概念，为鸿蒙应用开发者提供了基础理论支持。学完本章，ArkTS的基础语法基本上就是学完了。

2024-10-23 17:54:25 1112

组件内容和组件内容区不一定匹配，比如设置了固定的width和height，此时组件内容的大小就是设置的width和height减去padding和border值，但文本内容则是通过文本布局引擎测算后得到的大小，可能出现文本真实大小小于设置的组件内容区大小。相对布局是在二维空间中的布局方式，不需要遵循线性布局的规则，布局方式更为自由。组件内容区（黄色方块）：组件内容区大小为组件区域大小减去组件的 border 值，组件内容区大小会作为组件内容（或者子组件）进行大小测算时的布局测算限制。

2024-10-23 17:03:07 1072

原创前端转鸿蒙必看篇：组件生命周期

自定义组件的生命周期包括:五种状态，如图所示函数在创建自定义组件的新实例后，在执行其build函数之前执行。该函数仅会在自定义组件实例创建后执行一次。允许在该函数中改变状态变量，但是更改将在后续执行build函数中生效。可以用于接收自定义组件实例创建时的状态参数，初始化页面状态变量等。onPageShow页面每次显示时触发一次，包括路由过程、应用进入前后台等场景，仅@Entry修饰的自定义组件生效。onPageHide页面每次隐藏时触发一次，包括路由过程、应用进入前后台等场景，仅@Entry。

2024-10-23 16:09:07 322

原创前端转鸿蒙必看篇：路由跳转

前端开发 SPA 应用的时候通常会存在多个页面的跳转，我们称之为路由跳转，React 有 react-router，Vue 下 vue-router，常见的小程序框架也有一套对应的路由跳转 API，比如：xx.redirectTo;在鸿蒙原生中，也有对应的路由系统。它在应用程序中实现不同页面之间的跳转和数据传递。Router模块通过不同的url地址，可以方便地进行页面路由，轻松地访问不同的页面。

2024-10-23 15:47:27 1088

原创 HarmonyOS 开发实践——模块化架构组件（使用系统路由表+注解+hvigor插件自动配置项目模块化）

satis/oh-router 与 hvigor插件 @satis-sun/modularity-plugin 配合使用，无需手动配置系统路由表，使用注解的方式即可完成系统路由表的配置。

2024-10-23 14:56:54 655

原创 HarmonyOS 开发实践——List组件的使用与AlphabetIndexer联动实践

在鸿蒙应用开发中，List组件是一个非常重要的元素，它用于展示一系列数据项，非常适合构建列表界面，例如商品列表、联系人列表、消息列表等，可以轻松高效地显示结构化、可滚动的信息。：可以与容器组件联动用于按逻辑结构快速定位容器显示区域的组件，常配合List组件使用。ListScroller继承自Scroller，具有Scroller的全部方法。子组件，ListItemGroup组件内部仅支持ListItem组件。List组件的滚动控制器，通过它可以控制List组件的滚动。List组件内部仅支持。

2024-10-23 14:55:46 1048

原创 HarmonyOS 开发实践——自定义弹框使用（CustomDialog+TextPicker组合）

在移动应用开发中，弹框是一种常见的用户交互组件，用于在应用界面上提供额外的信息或操作选项，也是移动开发中必用的功能，实际开发中系统提供的弹框往往不能完全满足实际业务需求，很多时候需要根据业务需求对弹框内容进行自定义，但凡遇到自定义弹框及弹框内部内容，就需要根据实际情况进行组合式使用。同理，在HarmonyOS开发中系统也提供了弹框的使用及自定义弹框的使用方法，可以说是提供了丰富的API来支持自定义弹框的开发，这可以让开发者根据自己的需求定制独特的用户界面和交互体验。

2024-10-22 21:19:30 1191

原创 HarmonyOS 开发实践——ZRouter让系统路由表变的更简单（轻量级动态路由库）

ZRouter是一款轻量级的动态路由库，基于Navigation系统路由表和Hvigor插件实现的方案。对Navigation组件简化使用，封装一系列简单易用API，支持链式调用，无需再关注路由表的配置，保持着对Navigation组件零侵入零耦合；支持多个拦截器(支持优先级和中断拦截)和全局拦截器，可实现页面跳转和显示、埋点、登录等拦截处理；支持自定义URL路径跳转配置，可以通过URL路径来跳转原生不同页面；支持第三方Navigation的系统路由表使用本库API；

2024-10-22 20:23:06 1028

原创鸿蒙原生APP性能监控之崩溃监测实践

崩溃（Crash）指的是应用程序在运行过程中突然停止运行或出现错误导致程序无法正常继续执行。用户体验：崩溃会直接影响用户体验，操作程序时突然Crash，可能导致用户不再打开应用、卸载应用。用户留存率：在同质化的市场竞争中，稳定的应用程序能够吸引用户并提高用户留存率，而崩溃率低就意味着应用的稳定。数据安全：崩溃可能造成应用数据丢失，影响数据完整性，比如编辑类的应用场景，减少Crash对用户数据的保护至关重要。HiAppEvent。

2024-10-17 17:20:36 2001

原创鸿蒙原生APP性能监控之CppCrash故障定位指南

CppCrash是C/C++运行时崩溃，包括空指针异常、数组越界异常、栈溢出异常等。HarmonyOS系统针对这一类故障，基于系统级DFX能力，能够进行检测并生成故障日志，生成在/data/log/faultlog/faultlogger系统目录下，在DevEcoStudio中的Faultlog工具栏也能进行汇总显示。（1）反编译addr2lineLinux下addr2line命令用于将程序指令地址转换为所对应的函数名、以及函数所在的源文件名和行号。

2024-10-17 17:19:49 1299

原创鸿蒙原生APP性能优化之TaskPool和Worker的对比实践

ArkTS提供了TaskPool与Worker两种多线程并发方案，下面我们将从其工作原理、使用效果对比两种方案的差异，进而选择适用于ArkTS图片编辑场景的并发方案。表2TaskPool与Worker并发方案对比对比维度WorkerTaskPool编码效率Worker需要开发者关注线程数量的上限，管理线程生命周期，随着任务的增多也会增加线程管理的复杂度。TaskPool简单易用，开发者很容易上手。数据传输。

2024-10-16 17:43:06 602

原创鸿蒙原生APP性能优化之长列表加载性能优化

列表是应用开发中最常见的一类开发场景，它可以将杂乱的信息整理成有规律、易于理解和操作的形式，便于用户查找和获取所需要的信息。应用程序中常见的列表场景有新闻列表、购物车列表、各类排行榜等。随着信息数据的累积，特别是一些新闻应用、购物应用、聊天应用，列表数据往往会达到上万条，针对这类大量数据加载的长列表应用，如何对长列表的性能进行优化是非常重要的。一个正确、高性能的长列表应用能明显降低列表渲染时间、提升页面的滑动帧率、降低应用内存占用，大幅提升用户体验。

2024-10-16 16:37:02 919

原创鸿蒙原生APP性能优化之点击响应优化

响应（Response）是指应用在运行中，由用户直接或间接做出一个行为请求，当程序接受了该请求，随即做出一系列运算，最终界面发生变化的过程。简单来说，即用户发出指令，程序执行，设备显示变化。在应用生态高速发展的背景下，虽然移动设备的硬件运算性能已经达到了新的高度，但与此同时应用研发者也设计出更加多元化、智能化的产品，展现样式百花齐放，这些产品对高性能的需求与日俱增，加上同类型相近功能的产品互相竞争，用户也会对App产品质量的要求越来越高，对响应速度的要求也愈加严格。

2024-10-16 16:36:04 971

原创鸿蒙原生APP性能优化之页面间转场

页面间转场是用户从一个页面切换到另一个页面时的过程，一个无缝流畅的转场动效可以提升用户的交互体验。从主页到详情页、从列表页到结果页都需要去设置一些转场动效使得用户体验更加流畅。基于用户行为和应用设计模式，我们总结出了一些常见的转场场景，包括层级转场、搜索转场、新建转场、编辑转场、通用转场、跨应用转场。针对这些转场场景，根据“人因研究”（在 HarmonyOS 中，通过大量的人因研究为UX设计提供了系统性的科学指导），给各位开发者推荐一些适合本场景下转场动效，常见的转场动效有左右位移遮罩动效、一镜到底动效等。

2024-10-14 17:00:57 1088

原创【带你轻松学鸿蒙】HarmonyOS原生APP开发（出行导航类）——快捷触达的骑行体验

本场景解决方案主要面向涉及共享租赁、即时配送等场景的应用，以共享单车为案例，使用实况窗、地图导航、原生扫码等技术，为消费者的整个骑行流程带来更好的体验。当前用户想要完成骑行的整个流程，需要先找到应用，再找到功能入口，骑行完成后又需要再重复一遍步骤，对于用户来说操作多，流程繁琐。如果能从首页直接扫码直到解锁界面，换车也只需一步操作即可支付将大大提升用户体验。

2024-10-11 14:06:53 726

原创【带你轻松学鸿蒙】一多开发实例（音乐类APP）

本文将介绍如何将“一次开发，多端部署”应用到音乐播放器的实际开发过程中。音乐播放器是现在较为流行的大众娱乐应用，本文用作示例的音乐应用主要展示播放页在手机、折叠屏、平板和2in1四种产品形态上的“一次开发，多端部署”，在保障基本用户体验的同时，根据不同产品形态特性，适配相应的浏览和交互功能。下文将以架构设计、UX设计和页面开发三个章节来介绍“一多”音乐播放器在开发过程中的最佳实践。

2024-10-10 13:41:43 986

原创【鸿蒙 HarmonyOS实战开发】一多开发实例（新闻阅读）

本文以新闻阅读应用作为典型案例详细介绍 “一多” 在实际开发中的应用。新闻阅读应用在大屏幕设备的使用过程中，不仅要保障用户在界面浏览中的正常使用，也要尽可能提升屏幕的交互效率。该实例主要界面包含首页推荐、热门新闻、新闻详情、刷新闻、精选发现等。挪移布局延伸布局重复布局列表变瀑布流列表变宫格全屏新闻变瀑布流边看边评沉浸浏览文字大小调节下面的章节将分别从 UX设计、架构设计、页面开发三个角度给出推荐的参考样例，介绍“一多”新闻阅读应用在开发过程中的最佳实践。

2024-10-09 16:04:07 1303

原创【鸿蒙 HarmonyOS实战开发】一多开发实例（短视频）页面开发

本章介绍短视频应用如何使用“一多”的布局能力，完成页面层级的一套页面、多端适配。下文将以短视频应用的典型页面为例，一一介绍具体实现方案，帮助开发者快速实现短视频应用的一多开发。

2024-10-08 21:09:55 1125

原创【鸿蒙HarmonyOS实战开发】一多开发实例(长视频)-搜索页

搜索发现区域中，标题栏中间的空白区域随父容器尺寸变化而伸缩，使用Blank组件实现自适应布局的拉伸能力；List组件的lanes属性在sm和md断点下为2，lg断点下为3，实现不同布局显示。搜索发现、热搜和“华智能提示”区域，均使用List组件，设置在不同断点下的lanes属性来实现。本章节以搜索发现区域作为示例，热搜和“华”智能提示区域的实现读者可以自行查看代码。在实际开发中，区域1为导航栏，区域2和3，区域4，区域5为并列的搜索页内容，所以对应的开发顺序为区域1和区域2-5。

2024-10-08 17:26:15 794

原创【带你轻松学】鸿蒙原生APP开发之性能优化实战-Web组件开发性能提升方案

开发者实现在应用中跳转显示网页需要分为两个方面：使用@ohos.web.webview提供Web控制能力；使用Web组件提供网页显示的能力。在实际应用中往往由于各种原因导致首次跳转Web网页或Web组件内跳转时出现白屏、卡顿等情况。本文介绍提升Web首页加载与Web网页间跳转速度的几种方法。预渲染优化适用于Web页面启动和跳转场景，例如，进入首页后，跳转到其他子页。

2024-10-08 15:05:56 768

原创【带你轻松学】鸿蒙原生APP开发之性能优化实战-电量优化

设备返回主界面、锁屏、应用切换等操作会使应用退至后台。为了降低设备耗电速度、保障用户使用流畅度，系统会对退至后台的应用进行管控，包括进程挂起和进程终止。为了保障后台音乐播放、日历提醒等功能的正常使用，系统提供了受规范约束的后台任务，扩展应用在后台的运行时间。本文将介绍各类后台任务的基本概念和适用场景，并且通过对短时任务和长时任务两个场景的性能分析说明合理运行后台任务的必要性。合理的选择和使用后台任务对于优化用户体验，减少性能消耗非常重要。

2024-10-08 15:03:19 1669

原创【轻松带你学】ArkUI实战开发-引入三方库

笔者在第 4 小节里基于前 3 小结的知识点简单扩展了一个 md5() 方法并成功在 JS 代码里调起了 C++ 代码，本节笔者简单介绍一下引入三方库编译的知识点。

2024-09-28 22:05:40 814

原创【轻松带你学】ArkUI实战开发-NAPI方法扩展

在前 3 小结笔者简单介绍了 NAPI 工程并对生成的源码进行了简单介绍，本节笔者在前 3 小节的基础上对 NAPI 工程做个扩展，再额外添加一个计算 MD5 的方法 md5()。

2024-09-28 21:12:04 718

原创【带你轻松学】ArkUI实战开发-NAPI数据类型

在前两篇文章里笔者简单介绍了 NAPI 工程结构以及生成的 cpp 源码部分，其中 JS 应用层传递过来的数据被封装在了 napi_value 中，使用前先要转换成对应的 C/C++ 数据类型，C/C++ 端的数据也要转换成 napi_value 数据类型传递给 JS 应用层，本节笔者简单介绍一下 NAPI 中提供的数据类型转换相关知识点。

2024-09-28 20:21:36 1064

原创【带你轻松学】ArkUI实战开发-NAPI项目

上节笔者简单介绍了使用 DevEco Studio 创建的默认 NAPI 工程结构，本节笔者简单介绍一下 NAPI 工程下 cpp 目录的源码部分。

2024-09-28 19:55:02 2051

原创【带你轻松学】ArkUI实战开发-初识 NAPI

NAPI 工程创建完后，在entry目录下多了一个cpphello.cppindex.d.ts文件中声明的方法的 C++ 实现源码。：是cmake用来生成Makefile文件需要的一个描述编译链接的脚本文件。index.d.ts：对 ts 提供的方法声明。：打包的配置文件。另外文件还会在"externalNativeOptions": { // CPP相关配置"path": "./src/main/cpp/CMakeLists.txt", // CMake 文件的路径。

2024-09-27 22:07:10 1083

原创【带你轻松学】ArkUI实战开发-窗口模块（Window）

/ Winodw 的能力模块提供的静态方法及Windowcreate()：创建一个子窗口。find()：查找指定id所对应的窗口：获取当前应用内最后显示的窗口。show()：显示当前窗口。destroy()：销毁当前窗口。moveTo()：移动当前窗口。on()：监听窗口对应事件。off()：取消监听对应窗口事件。：设置窗口布局是否为全屏布局。：为当前窗口加载具体页面内容。：设置窗口的背景色。：设置导航栏、状态栏是否显示。：设置窗口是否全屏显示。

2024-09-27 21:19:34 785

原创【带你轻松学】ArkUI实战开发-页面导航（Navigation）

Navigation的定义不需要传递相关参数，我们先看下NavigationNavigation() { // Navigation只能包含一个子组件.size({width: '100%', height: '100%'}) // Navigation只设置了size，没有设置任何其它属性样例运行结果如下图所示：由运行结果可知，在默认情况下，Navigation的样式是一个带有返回箭头的标题栏加子控件组成的。title：设置导航栏的标题，当参数类型为string。

2024-09-27 20:24:07 678

原创【带你轻松学】ArkUI实战开发-页面跳转（Router、Ability）

push：打开新的页面，新页面在栈顶位置，定义了以下参数：url：目标页面的路径，该路径必须在的pages下配置，否则不起作用。params：可选参数，向目标页面传递参数。replace：新页面替换当前页面并把当前页面销毁。back：返回上一页。clear：清空路由栈里的其它页面。getLength：获取当前路由栈里的页面数量。getState：获取当前页面的状态，参数说明如下：index：当前页面是第几个打开的。path：当前页面的路径。name：当前页面的名称。

2024-09-27 17:55:29 1024

原创【带你轻松学】ArkUI实战开发-手势密码（PatternLock）

reset();在使用的时候，接收一个类型的控制器，该控制器用来控制组件的状态，比如重置解锁状态。build() {sideLength：设置组件的宽度和高度，默认值为 300vp ，最小可以设置为 0。：设置宫格圆点的半径，默认值为 14vp。：设置宫格圆点在 “未选中” 状态的填充颜色，默认值为黑色。：设置宫格圆点在 “选中” 状态的填充颜色，默认值为黑色。：设置宫格圆点在 “激活” 状态的填充颜色，默认值为黑色。pathColor：设置连线的颜色，默认值为蓝色。

2024-09-27 17:30:16 386

原创【带你轻松学】ArkUI实战开发-网页加载（Web）

使用Web组件时，需要传递一个WebOptions类型的参数，WebOptionssrc：待加载的网页资源地址。controller：页面控制器，主要控制Web组件各种行为，一个对象只能控制一个Web组件，且必须在Web组件和绑定后，才能调用上的方法。// Web控制器build() {Web({src: "https://www.arkui.club", // 默认加载 www.arkui.club 网址})// 省略部分方法。

2024-09-27 16:26:06 882

原创【带你轻松学】ArkUI实战开发-视频播放（Video）

/ Video创建需要传递一个必要参数valuesrc?previewUri?controller?value：对播放视频相关设置，参数说明如下：src：设置视频地址。：设置视频播放倍速，参数说明如下：：只支持0.751.01.251.752.0。：对 number | string 的封装，防止用户传错参数的。previewUri：视频封面图的路径。controller：设置视频播放的控制器，比如控制视频开始，暂停等。muted：设置视频是否静音。autoPlay。

2024-09-27 16:00:41 324

原创【带你轻松学】ArkUI滚动类组件-下拉刷新（Refresh）

offset?friction?refreshing：控件是否显示刷新动画，默认不显示offset：下拉的偏移量，当下拉的距离超过该值时，控件进入刷新状态friction：下拉时的阻力系数，数值越大，下拉距离越小build() {})})：组件的刷新状态，定义了以下 5 种状态：Inactive：组件的起始状态，当手指点击屏幕时触发此状态。Drag：下拉组件但没有到达刷新距离的状态。OverDrag：下拉组件距离超过了刷新距离的状态。Refresh：正在刷新状态。Done。

2024-09-27 15:30:23 450

原创【带你轻松学】ArkUI滚动类组件-Swiper

controller：给Swiper绑定一个控制器，控制页面翻页。Swiper() {index：默认显示显示第几页，默认值为 0。autoPlay：是否自动播放，默认值为 false ，当设置为自动播放时，导航点无法点击。interval：设置自动播放时，播放的时间间隔，单位毫秒，默认是 3000。indicator：是否显示导航点指示器，默认显示。loop：是否开启循环显示，也就是说当翻页到最后一页再往下翻页是否会回到第一页，默认开启。duration。

2024-09-27 14:19:29 497

原创【带你轻松学】ArkUI滚动类组件-Grid、GridItem

(scroller?scroller：绑定一个滚动控制器，控制Grid的滚动。Grid() {ForEach(this.columns, (item) => { // ForEach语法，循环创建GridItemGridItem() { // 子组件只能是GirdItem}).columnsTemplate("1fr 1fr 1fr") // 设置Grid为3列，并且均分.columnsGap(10) // 设置列间距为10vp.rowsGap(10) // 设置行间距为10vp。

2024-09-27 13:42:01 897

原创【带你轻松学】ArkUI滚动类组件-Scroll、Scroller

(scroller?scroller：给Scroll绑定一个滚动控制器，该控制器可以控制子组件的各种滚动能力，Scroller目前只支持绑定到Scroll和List。Scroll() {Text('Text1')// 子组件的高度小于Scroll高度，不会触发滚动scrollable：设置Scroll的滚动方向，提供了以下 3 种滚动方向：Vertical（默认值）：仅支持竖直方向滚动。Scroll() {// Scroll没有设置滚动方向，默认竖直方向滚动Column() {

2024-09-26 21:47:19 1265

原创【带你轻松学】ArkUI容器类组件-相对布局容器（RelativeContainer）

build() {.id("text1") // 必须添加 id，否则不显示.width(90).id("text2") // 必须添加 id，否则不显示.width(90)// .id("text3") // 注释掉id，组件不显示样例运行结果如下图所示：📢：由运行结果可知在默认情况下，子组件是按照堆叠排列并沿着自身左上角对齐。设置水平方向对齐的子组件在水平方向对齐方式分为leftmiddle和right设置子组件在水平方向上左边框设置子组件左边框相对锚点组件的左边框位置对齐。

2024-09-26 21:10:07 829

原创【带你轻松学】ArkUI容器类组件-计数器组件（Counter）

由源码可知，Counter使用时暂不需要配置额外参数。build() {Column() {Row() {Counter() // 默认效果Counter() { // 包含一个子组件Text('1') // Text 默认值为 1.fontSize(18) // Text 字体大小Counter没有提供额外的属性方法，只提供了onInc()和onDec()onInc：数字增加的事件回调。onDec：数字减少的事件回调。

2024-09-26 20:12:37 280

原创【带你轻松学】ArkUI容器类组件-角标组件（Badge）

position?maxCount?: number;position?Badge的构造方法允许接收和两种类型的参数，它们都继承自BadgeParamBadgeParamposition：设置 badge 的显示位置，提供了以下 3 种位置：Right： badge 显示在右侧纵向居中。RightTop（默认值）： badge 显示在右上角。Left： badge 显示在左侧纵向居中。style：设置 badge 的显示样式，BadgeStyle样式参数说明如下：color。

2024-09-26 17:45:34 337

空空如也

空空如也