许小墨のBlog

CheckBoxGroup 鸿蒙开发以身入局声明式 UI，内有大乾坤组件学习开始了掌握 CheckBoxGroup 组件 复选框群组 用于控制多个复选框全选或者不全选状态 参数 参数形式 ： CheckboxGroup( options?: { group?: string } )创建复选框群组，可以用于控制群组内的 CheckBox 成员 全选 或者 不全选相同 group 的 CheckBox 和 CheckBoxGroup 为同一群组 参数名 参数类型 是否必填 参数描述 group string 否 群组名称 相关属性 属性名 属性类型 默认值 描述 selectAll boolean false 设置组内是否全选 selectAllColor ResourceColor - 设置全选按钮颜色 事件 名称 描述 onChange( callback: ( event: CheckBoxGroupResult ) => void ) CheckBoxGroup 的选中或者群组内 CheckBox 的选中状态发生改 ...

全网最佳 websocket 封装：完美支持断网重连、自动心跳！简介「websocket 在前端开发中，是一个必须掌握的技术！你可以不用，但必须掌握！」 前几天，就遇到这样一个需求，要求界面的数据通过 websocket 实时推送，并且必须支持「断网重连、自动心跳」！ 自动心跳是定期向服务端发送小型数据包，如果一段时间内服务端没有收到心跳响应，系统可能会断开连接。 websokect 的 API 非常简单 123456789101112131415// 创建 ws 连接const ws = new WebSocket('ws://localhost:8080/test')ws.onopen = function () { console.log('WebSocket 连接已经建立。') ws.send('Hello, server!')}ws.onmessage = function (event) { console.log('收到服务器消息：', event.da ...

WebSocket 从入⻔到入土一.WebSocket 基本概念1.WebSocket 是什么？ WebSocket 是基于 TCP 的一种新的应用层网络协议。它提供了一个全双工的通道，允许服务器和客戶端之间实时双向通信。因此，在 WebSocket 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输，客戶端和服务器之间的数据交换变得更加简单。 2.与 HTTP 协议的区别与 HTTP 协议相比，WebSocket 具有以下优点： 更高的实时性能：WebSocket 允许服务器和客戶端之间实时双向通信，从而提高了实时通信场景中的性能。 更少的网络开销：HTTP 请求和响应之间需要额外的数据传输，而 WebSocket 通过在同一个连接上双向通信，减少了网络开销。 更灵活的通信方式：HTTP 请求和响应通常是一一对应的，而 WebSocket 允许服务器和客戶端之间以多种方式进行通信，例如消息 Push、事件推送等。 更简洁的 API：WebSocket 提供了简洁的 API，使得客戶端开发人员可以更轻松地进行实时通信。 当然肯定有缺点的： ...

CheckBox 鸿蒙开发以身入局声明式 UI，内有大乾坤组件学习开始了掌握 CheckBox 组件 复选框组件 参数 注意 ： 配合 CheckBoxGroup 使用 参数形式 ： Checkbox( options?: { name?: string, group?: string } ) 参数名 参数类型 是否必填 默认值 参数描述 name string 否 - 多选框名称 group string 否 - 多选框群组名称 属性 名称 参数类型 默认值 描述 select boolean false 设置多选框是否被选中 selectColor string - 设置多选框选中状态时的颜色 事件 名称 描述 onChange( callback: ( value: boolean ) => void ) 当选中状态发生变化时，触发回调函数;当 value 的值为 true 时，表示已选中;当 value 的值为 false 时，表示未选中 示例 1123456789101112131415161718@ ...

Button 鸿蒙开发以身入局声明式 UI，内有大乾坤组件学习开始了掌握 Button 组件 按钮组件 可以快速创建不同样式的按钮 可以使用通用属性修饰 参数 参数名 参数类型 是否必填 参数描述 label ResourceStr 否 按钮的文本内容 options { type?: ButtonType, stateEffect?: boolean} 否 按钮的配置项: type：按钮的样式，stateEffect： 按钮的按压效果 ButtonType 枚举说明 名称 描述 Capsule 胶囊型按钮（ 圆角默认为高度的一半 ） Circle 圆形按钮 Normal 普通按钮（默认为不带圆角） 示例 112345678910111213141516171819202122232425262728@Entry@Componentstruct Index { build() { Column() { Row() { Button('A&# ...

Blank 鸿蒙开发以身入局声明式 UI，内有大乾坤组件学习开始了掌握 Blank 组件 空白填充组件 在容器 主轴方向 上 空白填充组件具有自动填充空余部分的能力 注意 ： 仅在父组件为 Row 或者 Column 的时候有效 注意 ： 不能使用通用属性修饰 参数| 参数名 | 参数类型 | 是否必填 | 默认值 | 参数描述 || —— | ——– | ——– | —— | ——– | ————————– || min | number | string | 否 | 0 | 空白填充组件的最小填充尺寸 | 相关属性 属性名 参数类型 默认值 参数描述 color ResourceColor 0xffffff 设置空白填充的颜色 示例 112345678910111213141516171819202122@Entry@Componentstruct Index { build() { Column() { // 没有使用 Blank 组件 Row() { ...

常见装饰器( 简单装饰器 ) 鸿蒙开发以身入局声明式 UI，内有大乾坤什么是装饰器 ？装饰器有什么作用 ？一文带你认识常见的装饰器 ～～ 装饰器是鸿蒙开发中非常重要的一个环节 因为在很多地方我们都需要用到装饰器 并且如果我们想高度的复用, 那么装饰器就是必不可少的一环 接下来我们就来介绍一些常见的装饰器 注意 : 所有装饰器首字母大写 @Entry 用来装饰 struct 使用 表示页面的入口 @Component 装饰 struct, 表示该 struct 具有基于组件的能力 保证 struct 内部 包含一个且只能包含一个 build() 函数, 用于绘制 UI 界面 struct 内部, build() 函数外部, 用于存储数据的位置 注意 : build() 函数内部必须要有 容器组件 12345678@Entry@Componentstruct Index { /* 这里存放数据 */ build() { /* 这里构建 UI 界面 */ }} 以上为基础内容结构 @Component 也可以单独定义组件 ...

像素单位 声明式 UI，内有大乾坤鸿蒙开发，从认识单位开始你写的 30 是 30px 吗 ？你确定吗 ？先来认识一下 HarmonyOS 里的单位吧 ～ 通过之前的学习, 我们也简单接触了一些鸿蒙开发的内容 这里我们先要认识一下鸿蒙开发相关的单位 这样方便我们后期对布局的书写 注意 : 鸿蒙应用开发提供了四种像素单位, 框架采用 vp 为基准数据单位 名称 描述 px 屏幕物理像素单位。 vp 屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素。注意 : 当数值不带单位时，默认单位 vp。在实际宽度为 1440 物理像素的屏幕上，1vp 约等于 3px。 fp 字体像素，与 vp 类似适用屏幕密度变化，随系统字体大小设置变化。 lpx 视窗逻辑像素单位，lpx 单位为实际屏幕宽度与逻辑宽度（通过 designWidth 配置）的比值，designWidth 默认值为 720。当 designWidth 为 720 时，在实际宽度为 1440 物理像素的屏幕上，1lpx 为 2px 大小。 示例 1 - 默认单位展示123456789101112131 ...

你好 声明式 UI 乾坤初翻转鸿蒙才开始你们老说的 “声明式 UI” 到底是个啥 ?我到底应该怎么写代码 ?咋设置宽高 ? 点击事件咋办 ? ArkTS 以声明方式组合和扩展组件来描述应用程序的 UI 同时还提供了基本的属性、事件和子组件配置方法，帮助开发者实现应用交互逻辑。 当前章节的所有内容都是以了解声明式 UI 为主，细节内容后面会详细介绍 一、创建组件 根据组件构造方法的不同，创建组件包含 有参数 和 无参数 两种方式。 注意 ： 创建组件时不需要 new 运算符 无参数组件 如果 组件定义没有包含必选构造参数，则组件后面的 “()” 内不需要配置任何内容 例如 ：Divider 分割线组件就不包含任何构造参数我们在时候用的时候直接书写 “Divider()” 即可 12345678910111213141516171819202122@Entry@Componentstruct Index { @State message: string = 'Hello Harmony' build() { Row()
...

你好 ArkTS 乾坤初翻转鸿蒙才开始到底什么才是鸿蒙开发 ?这写的都是什么东西 ?我怎么一个也看不懂 ? ArkTS 是鸿蒙开发的主力语言，是 HarmonyOS 开发最优选的开发语言 ArkTS 是基于 TypeScript（ 简称 TS ）扩展而来，也可以说是 TS 的超集 一、ArkTS 介绍1. 历史进程 最早的 Mozilla 创造了 JS 后来的 Microsoft 创建了 TS 在原本类型限制不严谨的 JS 语言基础上增加了类型系统声明让我们避免了很多开发过程中可能出现的类型错误导致的项目运行出错提高了开发效率和维护行以及代码的严谨性 今天 HuaWei 推出了 ArkTS（ Ark ： 方舟 ） 在 TS 的基础上扩展了声明式 UI 状态管理的能力提供了更加简洁、清晰的开发方式引入了渲染引擎的增强，包括平台无关的自绘制机制、声明式 UI 后端设计、动态布局等，以提高性能体验。TYPESCRIPTJAVASCRIPT 声明式 U 声明文件状态管理 ARKTS 类型系统 2. 介绍 起源 JavaScript（JS）是由 Mozilla 创建，最初用于解 ...