许小墨のBlog

004_鸿蒙如何实现自定义 Canvas？底层如何进行 Ui 的渲染 flutter skia在鸿蒙系统中实现自定义 Canvas 的详细过程可能会涉及到多个方面，包括底层图形库的使用、渲染流程的设计以及 API 的提供等。以下是一个基于现有知识和鸿蒙系统设计原则的高级概述： 选择或集成图形库 鸿蒙系统可能会选择使用现有的图形库，如 Skia，或集成其他图形处理技术来实现自定义 Canvas。Skia 是一个功能强大的 2D 图形处理库，已经广泛用于多个平台和项目，包括 Chrome 浏览器和 Android 操作系统。 定义 Canvas API 鸿蒙系统需要定义一套 Canvas API，这套 API 将为开发者提供绘制图形和图像所需的方法和功能。这些 API 可能会包括绘制形状（如线条、矩形、圆形等）、文本、图像以及处理图像变换（如旋转、缩放、平移等）的函数。 渲染流程设计 自定义 Canvas 的渲染流程需要精心设计，以确保高效且准确的图形渲染。这通常涉及以下几个步骤： 绘制命令收集：当开发者通过 Canvas API 发出绘制命令时，这些命令会被收集并存 ...

003_了解过鸿蒙的 Napi 吗？如果我需要编译三方库如何链接？ NAPI 框架简介Node.js 的 N-API NAPI 其实是最早应该是来自 node.js 中的一个拓展库（也可以说是一整套 API 接口），叫 Node-API ，叫做 N-API 。是用来构建本地插件的 API，将所有的 nodejs 底层数据结构黑盒化，封装成二进制接口，这样就可以实现不同版本的 Node.js 使用同样的接口，其目的是为了简化开发和维护。 NAPI （OpenHarmony） NAPI，全称 Native API ，是 OpenHarmony 系统中的一套原生模块拓展开发框架，基于 Nodejs 中的 N-API 开发，为开发者提供了 JS 与 C/C++不同语言模块之间的相互访问，交互的能力。它可以用于规范化封装 IO、OS 底层等，并可以提供相应的 JS 接口供开发者调用。当然。 N-API 也可以做到这一点。 区别于 N-API ，主要在于 NAPI 针对 OpenHarmony 系统做了 一些适配化和优化。但二者的目的都是为了简化和统一原生模块的开发和维护，提高跨平台和 ...

002_音视频开发，鸿蒙实现播放器的 Ui 部分+底层部分 在鸿蒙系统中实现音视频播放器的 UI 部分和底层部分是一个涉及多个方面的复杂过程。下面将详细解释 这两个部分的具体实现： UI 部分实现： 设计界面：首先，需要设计播放器的用户界面。这包括视频播放器控件、播放/暂停按钮、音量控制、进度条、时间显示等。可以使用鸿蒙系统提供的 UI 组件和布局管理器来创建这些元素。 实现交互：接下来，需要实现用户与界面之间的交互。例如，当用户点击播放按钮时，播放器应该开始播放视频；当用户点击暂停按钮时，播放器应该暂停播放。这些交互可以通过事件监听器来实现。 更新 UI：在视频播放过程中，需要不断更新 UI 以显示当前播放时间、总时间等信息。这可以通过定时器或回调函数来实现。 底层部分实现： 选择播放器框架：在鸿蒙系统中，可以选择使用系统提供的播放器框架或第三方播放器框架来实现音视频播放。例如，可以使用鸿蒙系统的 MediaPlayer 类来播放音视频文件。 加载音视频资源：在底层部分，需要加载音视频资源并准备播放。这包括从本地文件、网络流或其他来源获取音视频数据，并将其解码为适合播放 ...

001_组件化开发原理，鸿蒙组件化实现思路组件化开发原理详解： 组件化开发是一种软件开发方法，它将大型的应用程序或系统分解成更小的、独立的、可复用的软件单 元，这些单元被称为组件。每个组件都封装了特定的功能或界面，并且有自己的生命周期和状态管理。 通过组件化开发，开发人员可以更加专注于组件本身的功能实现，而无需过多关注整个应用程序的逻 辑。 组件化开发的主要优势包括： 提高开发效率：组件可以独立开发、测试和复用，避免了重复开发，提高了开发效率。 代码重用：组件化的设计使得代码可以在多个项目或组件之间重用，减少了代码冗余。 易于维护：由于组件之间的耦合度较低，当一个组件出现问题时，其他组件不会受到影响，从而降 低了维护成本。 可扩展性：通过组合不同的组件，可以构建出更复杂的功能，提高了系统的可扩展性。 鸿蒙组件化实现思路详解： 鸿蒙系统是华为推出的一款分布式操作系统，它注重跨设备协同和高效性能。在鸿蒙系统中，组件化开发被广泛应用，以实现跨设备的应用开发和部署。鸿蒙的组件化实现思路主要包括以下几个方面： 分布式架构：鸿蒙系统采用分布式架构，使得应用程序可以跨设备运行。这意味着一个组件 ...

Gauge 鸿蒙开发以身入局声明式 UI，内有大乾坤组件学习开始了掌握 Gauge 组件 数据量规图表组件 用于将数据展示为环形图表 参数 参数形式 ： Gauge( options: { value: number, min?: number, max?: number } ) 参数名 参数类型 是否必填 默认值 参数描述 value number 是 - 量规图的当前数据值，即图中指针指向位置。用于组件创建时量规图初始值预设 min number 否 0 当前数据段最小值 max number 否 100 当前数据段最大值 注意 ： 当 max 小于 min 的时候，min 和 max 都会使用默认值，即 0 和 100。max 和 min 支持填写负数注意 ： 当 value 值不在 min 和 max 范围内的时候使用 min 作为默认值 属性 名称 参数类型 默认值 描述 value number 0 设置量规图的数据值，可用于动态修改量规图的数据值 startAngle number 0 设置起始角度位置，时钟 0 点为 0 ...

JS 逆向时碰到了恶心的死代码怎么办？手把手教你解决！你是否也曾有过「在逆向时看到一大坨代码，但自己却无从下手」的遭遇？ 你是否也曾有过「跟着代码跳了很久之后，才发现那一大坨代码其实没有任何作用」的惨痛经历？ 你是否也曾碰到过「代码量特别大、一格式化就卡死，但后来发现有很大一坨代码都没有任何用处」的狗血场景？ 别担心，其实这些情况我们只需要静下心来好好分析一下代码，并将无用代码统统剔除，就能轻松解决掉。 本文将带你实际地分析一段被知名 Javascript 代码混淆工具 Obfuscator 混淆过的代码，并将混淆后的代码中的无用代码全部剔除，尽可能地将这段代码打回原形。 基础知识在开始之前，我们先了解一下这种「在代码中插入大量无用代码以混淆视听」的混淆方式吧。这种混淆方式有两种叫法，或者说是两种做法，它们分别是「_死代码_」和「_花指令_」。 死代码死代码一开始是被用来描述一些人写代码时写出的没有用到的代码的，为了编译后的文件尽可能地小，编译器通常会对死代码进行移除处理。 而在不知道什么时候开始，死代码被安全工作者们用来作为一种混淆机制，以将代码量变得极为庞大，使进行逆向工程的人难以 ...

花式 console.log背景简介入职爱奇艺以来，我发现本地代码的控制台有很多 console 日志打印，用来为我们开发时做提示，非常方便，但是上线上线后就不会再打印了，不影响性能，代码内有判断的，只有开发环境会打印！ 于是，我就想研究一下这个功能是怎么实现的，在搜集了一些资料之后，搞个花式 console.log，让代码更优雅，更易读，更易维护，更易调试。 console 简介console 是一个用于调试和记录信息的内置对象， 提供了多种方法，可以帮助开发者输出各种信息，进行调试和分析。 「console.log()」 : 用于输出一般信息，大家应该在熟悉不过了。 「console.info()」 : 输出信息，与 console.log 类似，但在某些浏览器中可能有不同的样式。 「console.warn()」 : 输出警告信息，通常会以黄色背景或带有警告图标的样式显示。 「console.error()」 : 输出错误信息，通常会以红色背景或带有错误图标的样式显示。 「console.table()」 : 以表格形式输出数据，适用于数组和对象。 例如： 12345c ...

Divider 鸿蒙开发以身入局声明式 UI，内有大乾坤组件学习开始了掌握 Divider 组件 分割器组件，分割不同内容快/内容元素 参数 无 属性 名称 参数类型 默认值 描述 vertical boolean false 使用水平分割线还是垂直分割线（false ： 水平分割线；true ： 垂直分割线） color ResourceColor - 设置分割线颜色 strokeWidth number ｜ string 1 设置分割线宽度 lineCap LineCapStyle LineCapStyle.Butt 设置分割线的端点样式 LineCapStyle 名称 描述 Butt 分割线两端为 无端点 Round 分割线两端为 圆角端点 Square 分割线两端为 直角端点 事件 无 不支持通用事件 示例 112345678910111213141516171819202122@Entry@Componentstruct Index { @State values: number[] = [ 10 ...

DatePicker 鸿蒙开发以身入局声明式 UI，内有大乾坤组件学习开始了掌握 DatePicker 组件 选择日期的滑动选择器组件 参数 参数形式 ： DatePicker( options?: { start?: Date, end?: Date, selected?: Date } )根据指定范围的 Date 创建可以选择日期的滑动选择器 参数名 参数类型 是否必填 默认值 参数描述 start Date 否 Date(‘1970-1-1’) 指定选择器的开始日期 end Date 否 Date(‘2100-12-31’) 指定选择器的结束日期 selected Date 否 当前系统日期 设置选中项目的日期 属性 名称 参数类型 默认值 描述 lunar boolean false 日期是否显示农历。true：展示农历；false：不展示农历 事件 名称 描述 onChange( callback: ( value: DatePickerResult ) => void ) 选择日期时触发该事件 Da ...

DataPanel 鸿蒙开发以身入局声明式 UI，内有大乾坤组件学习开始了掌握 DataPanel 组件 数据面板组件 用于将多个数据的占比情况使用 占比图 进行展示 参数 参数形式 ： DataPanel( options:{ values: number[], max?: number, type?: DataPanelType } ) 参数名 参数类型 是否必填 默认值 参数描述 values number[] 是 - 数据值列表,最大支持 9 个数据 max number 否 100 max 设置为大于 0 的数据时，表示数据最大值; max 设置为小于等于 0 的数据时，max 等于 value 数组内各项数据的和，按比例显示 type DataPanelType 否 DataPanelType.Circle 数据面板类型 DataPanelType 枚举说明 名称 描述 DataPanelType.Circle 环状数据面板 DataPanelType.Line 线性数据面板 属性 名称 参数类型 默认值 描述 c ...