首页
CtrlK
社群论坛拆分

02.鸿蒙笔记

02.鸿蒙笔记

说明+计划

主题 说明

笔记在不断整理，包括格式，目前也没确定，等完成计划的课程做一次整理。

02.鸿蒙笔记 : 这个时间线是根据课程来

01.概念：

02.问题&解决方法：

主题 计划

几乎没有任何编程基础，会遇到很多不知道的概念，所以前置知识缺很多，看不懂正常。

  • 边学边写问题库，把想到的问题都写出来，比如项目目录里的文件都是啥意思？然后查官方文档、问鸿蒙智能客服、搜论坛、问GPT等大模型

  • 完成黑马星河课程

  • 完成黑马端云一体化课程

  • 把鸿蒙课程概念梳理一遍，尽可能地整理成渐构格式学习材料

  • 开发简单的自己想做的项目

主题 经验

1 .听课时间应该是要大于课程时间的

需要自己归纳分析对比代码，

/

#

其他

column

单独一个内容，比如只有图片，会靠左，有多个就会自动居中。

padding

这个容器里面元素本来是挨着边，加点padding，就会把容器里的元素往里面挤。

margin

.margin, 改的 ' . ’前面的，往外面挤，推展空间

width

不加width：默认居中

width(100%)：默认居左

主题 快捷键：

行注释 ： ctrl +/

page：新增一个文件，复制index-粘贴改名，index中的内容删除。

ArkTS

03.存储数据

认识和存储数据

image.png

04.常量变量命名

常量和变量的命名规则

image.png

05.数组

image.png

image.png

06.函数基本使用

函数的基本使用

image.png

image.png

07.函数完整写法

函数的完整写法

image.png

image.png

08.箭头函数

image.png

image.png

箭头前：参数部分

  • **参数列表**：箭头前的部分是箭头函数的参数列表，用来接收传入的值。

    • 如果没有参数，写成空括号 `()`。

    • 如果只有一个参数，可以省略括号。

    • 如果有多个参数，需要用逗号分隔并用括号括起来 `()`。

箭头后：函数体部分

  • **函数体**：箭头后的部分是箭头函数的具体实现部分。

    • 如果函数体是单一表达式，可以直接写表达式的值，省略大括号 `{}` 和 `return`，该表达式的值会作为返回值。

    • 如果函数体是多行代码，需要用大括号 `{}` 包裹，并显式使用 `return` 返回结果。

image.png

image.png

image.png

09.接口&对象

image.png

image.png

10.对象方法

image.png

11.联合类型

image.png

image.png

12.枚举类型

引入枚举类型

image.png

image.png

image.png

ArkUI

主题 14.界面布局思路

界面开发-布局思路

image.png

image.png

image.png

15.组件属性细节

image.png

image.png

16.文本颜色

image.png

17.文字溢出

文字溢出省略号、行高

image.png

image.png

18.图片组件

image.png

image.png

image.png

19.输入框和按钮

image.png

image.png

image.png

20.华为登录实战

image.png

image.png

image.png

主题 21.设计资源svg

image.png

image.png

image.png

22.内边距padding

布局元素组成&内边距padding

image.png

image.png

image.png

image.png

23.外边距margin

image.png

image.png

image.png

24.QQ音乐登录

综合：QQ音乐登录

image.png

image.png

主题 25.边框border

image.png

image.png

image.png

主题 26.设置组件圆角

image.png

image.png

image.png

主题 27.特殊形状圆角

特殊形状圆角设置

image.png

image.png

image.png

背景属性

主题 28.背景图片

背景属性-背景图片

image.png

image.png

image.png

image.png

image.png

主题 29.背景位置

image.png

image.png

image.png

主题 30.背景定位单位

image.png

image.png

image.png

主题 31.背景尺寸大小

image.png

image.png

image.png

线性布局

主题 32.主轴对齐方式

线性布局-主轴对其方式

image.png

image.png

image.png

33.案例-个人中心

综合案例-个人中心

image.png

image.png

主题 34.交叉轴对齐

image.png

column

// Column的交叉轴的对齐方式(水平往右的交叉轴)HorizontalAlign
// .alignItems(HorizontalAlign.Center) Star Center End

image.png

row

// Row的交叉轴的对齐方式(垂直往下的交叉轴)VerticalAlign
// alignItems(VerticalAlign.Top) Center Bottom

image.png

image.png

35.案例-得物列表

image.png

image.png

主题 36.自适应伸缩

layoutWeight

image.png

image.png

37.案例-得物卡片

image.png

image.png

38.案例-京东登录

image.png

image.png

image.png

image.png

image.png

image.png

主题 39.弹性布局Flex

image.png

image.png

image.png

image.png

39.案例wrap

image.png

image.png

40.绝对定位

image.png

image.png

image.png

image.png

41.人气卡片案例

image.png

image.png

image.png

image.png

42.层叠布局

image.png

image.png

image.png

image.png

43.案例-视频卡片

image.png

image.png

44.1综合-支付宝

image.png

image.png

image.png

image.png

image.png

45.2综合-支付宝

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

46.字符串拼接

和模板字符串

image.png

image.png

image.png

image.png

image.png

image.png

image.png

47.类型转换

  1. 字符串转数字

image.png

image.png

image.png

image.png

  1. 数字转字符串

image.png

image.png

image.png

48.交互-点击事件

image.png

image.png

image.png

49.状态管理

image.png

image.png

image.png

image.png

50.计数器案例

image.png

image.png

image.png

51.运算符

image.png

image.png

image.png

image.png

image.png

52.案例-点赞增加

image.png

image.png

53.1一元-运算符

image.png

image.png

image.png

53.2比较-运算符

image.png

image.png

53.3逻辑-运算符

image.png

image.png

54.运算符优先级

image.png

image.png

55.案例-美团购物

这个案例代码是复制的

image.png

image.png

image.png

**修改成状态变量**

image.png

56.数组操作增删

数组操作-增加删除替换

image.png

image.png

**增加数组元素**

image.png

image.png

开头 (S): unshift (开头增) shift (开头删)

结尾 (P): push (结尾增) pop (结尾删)

image.png

image.png

image.png

image.png

57.if，else语句

image.png

image.png

image.png

image.png

image.png

image.png

image.png

58.if多分支

image.png

image.png

59.switch-多分支

image.png

image.png

60三元条件表达式

image.png

image.png

61.条件渲染

image.png

image.png

61.京东加购 61.条件渲染

image.png

62循环语句while

62-while语句 & 三个练习

image.png

image.png

image.png

image.png

image.png

63循环语句for

image.png

image.png

image.png

64退出循环

break和continue

image.png

image.png

image.png

image.png

// for中加if， if后面不用加 { }

image.png

65.遍历数组

for 和 for of

image.png

image.png

image.png

image.png

image.png

image.png

加入新数组，数组名.push( 变量 )

image.png

image.png

66.对象数组

image.png

image.png

image.png

image.png

67.ForEach渲染

ForEach渲染控制

image.png

image.png

image.png

image.png

image.png

image.png

抽卡

68.抽卡-badge组件

8.![image.png](https://cdn.modevol.com/user/cl74ddttj0wzf01s52ib8emjc/images/li9oxnlmhqfwou1m1cq65wsy.png)image.png

image.png

69.抽卡-Grid布局

image.png

image.png

image.png

image.png

70.抽卡-数据渲染

数据动态渲染

image.png

image.png

image.png

效果

image.png

71.抽卡-遮罩动画

image.png

image.png

image.png

image.png

image.png

image.png

动画是加在后面显示的那个层级上

image.png

image.png

image.png

72.抽卡-随机卡片

image.png

得到0-5的一个随机整数

image.png

`Math.floor`是一个内置的JavaScript函数，用于返回小于或等于一个给定数字的最大整数。这意味着，无论你传入什么数字，`Math.floor`都会将其向下舍入到最接近的整数。

数轴的右边

例如：

  • `Math.floor(3.7)` 将返回 `3`

  • `Math.floor(-1.2)` 将返回 `-2`

定义一个随机数的状态变量

image.png

用数字代替图片

image.png

用随机数

floor向下取整，舍去小数

image.png

73.抽卡-显隐控制

大奖结构和显隐控制

image.png

image.png

如何判断？卡片的右上角如果是否为0，不为零则出现

用boolean，定义一个变量，默认false不显示，不为零则true显示

image.png

image.png

image.png

74.抽卡-再来一次

image.png

image.png

image.png

image.png

再来一次

image.png

image.png

75.swiper轮播

image.png

  1. swiper基本用法

image.png

image.png

image.png

image.png

  1. swiper常见属性

image.png

image.png

  1. swiper样式自定义

indicator ：指示器

image.png

问题

image.png

这种图片固定宽高的就不把width、height定死

设置一个宽100%，

然后用aspectdatio存好图片比例

image.png

76.样式&结构重用

image.png

76.1Extend

复用该组件内的重复代码

image.png

image.png

image.png

image.png

76.2Styles

Styles: 抽取通用属性、事件

适用范围：当是不同的组件时，无法用Extend复用，这时用Styles 抽取通用属性、事件

image.png

image.png

image.png

image.png

76.3Buolder

Buolder: 自定义构建函数

image.png

image.png

image.png

image.png

image.png

image.png

image.png

77.scroll用法

image.png

image.png
image.png

78scroll常见属性

image.png

image.png

79.scroll控制器

快速滑动到顶部、底部

image.png

image.png

image.png

image.png

image.png

80.scroll事件

image.png

主题 80.新词

currentOffset：当前偏移量，

[current](audio:current): 当前的,

[Offset](audio:Offset)：记忆

[attribute](audio:attribute)：属性

willScroll

点击scroll组件滑动时，返回移动的值

image.png

80.京东案例

image.png

  1. 点击火箭回顶部

image.png

image.png

  1. 显示效果切换

image.png

image.png

image.png

image.png

81.Tabs

  1. 基本使用

image.png

image.pngimage.png

  1. 常用属性

image.png

image.png

  1. 滚动导航栏

image.png

image.png

主题 81.新词

[vertical](audio:vertical)：垂直的；纵向的

[scrollable](audio:scrollable)：可滚动的

82.自定义TabBar1

  • 基础结构

image.png

image.png

用this访问定义的结构用作导航栏显示。

image.png

image.png

83.自定义TabBar2

  • 高亮切换

image.png

image.png

image.png

84.小米有品案例

可以复用前面的，就改下中间，加个@Builder ，TabContent.tabBar用一张图就好

image.png

image.png

image.png

class

85.class实例属性

image.pngimage.png

image.png

image.png

85.「?.」

可选链操作符

image.png

image.png

image.png

image.png

85.「_?_a_:_b_」

对同一类型元素进行二选一，

满足执行a，不满足执行b

image.png

86.class构造函数

image.png

image.pngimage.png

  • 如果遇到参数比较复杂的，可以把参数合并到一整个对象里，

  • 基于接口传一整个对象，然后接口调用

  • 调用接口可以不用按顺序

image.pngimage.png

image.png

87.class定义方法

image.png

image.png

image.pngimage.png

87class静态属性

假如你不使用 `static`，方法就会变成实例方法，必须创建对象后才能调用，比如上面需要创建p1

相比之下，静态方法更简单快捷，不需要实例化就可以调用

应用场景：存版本号、工具方法

image.png

image.png

image.png

image.png

88.class-继承

image.png

image.png

image.png

image.png

问题：如何调用父类构造函数？

image.png

image.png

如果调用了父类的方法，那么后面重写的方法不会生效，这里s1.sayHi不生效

89.class检测实例

运算符instanceof

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

90.class修饰符限制访问

image.png

90.class-readonly

image.png

readonly：只可以取值，不可以修改

image.png

只能读不能改

90.class-private

image.png

image.png

90.class-protected

image.png

image.png

90.class-public

image.png

91.剩余参数和展开运算符

剩余参数...

应用场景：参数可以是不固定的

image.png

image.png

展开运算符

应用场景：把两个数组合并到一起

image.png

image.png

image.png

92.接口的继承

image.png

image.png

接口实现

92.接口的实现

可以通过接口结合implements 来限制 类 必须要有 某些属性 和 方法

image.png

image.png

泛型

93.1泛型函数

image.png

image.png

image.png

主题 93.新词

[param](audio:param):参数

93.2泛型约束

image.png

image.png

image.png

93.3多个泛型参数

image.png

image.png

94.1泛型接口

image.png

image.png

image.png

94.2泛型类

image.png

image.png

模块化

主题 95.新词

[export](audio:export) default

[default](audio:default): 默认

95.1默认导入导出

image.png

image.png

image.png

image.png

image.png

tools这里

新建目录 → 新建ArkTS File

image.png

95.2按需导入导出

image.png

image.png

image.png

95.3全部导入

需求：如果特别多，几十个，一个一个写值名太麻烦，如何简单点？

image.png

image.png

image.png

自定义组件

96.自定义组件基础

把一个一个页面拆分成一个一个的自定义组件，可维护性、逻辑性会更强

  • 一个ets文件只能有一个@Entry

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

97.自定义-通用样式事件

image.png

image.png

image.png

98.自定义-成员变量和成员函数

image.png

[Panel](audio:Panel): 面板

image.png

image.png

image.png

image.png

99.BuilderParam构建函数-传递UI

param：参数

image.png

  • @Builder装饰的函数也称为“自定义构建函数”。

image.png

image.png

99.小米有品两面板 99.BuilderParam构建函数-传递UI

image.png

image.png

image.png

后面加，可以称之为：尾部闭包

image.png

image.png

100.多个BuilderParam

image.png

image.png

image.png

image.png

image.png

状态管理

101.状态管理-@state补充

image.png

image.png

image.png

image.png

image.png

image.png

image.png

102.@prop-父向子单向传递

  • 在子组件中写@prop，这样就和父组件建立了通道

image.png

image.png

image.png

103.数字加减

image.png

image.png

掘金评论

主题 掘金评论效果

image.png

104.掘金-头部

image.png

index页

image.png

拆开的自定义的头部组件：

image.png

image.png

105.list列表组件

image.png

image.png

image.png

主题 105.新词

[divider](audio:divider)：分隔物

[stroke](audio:stroke)轻挪

106.掘金-评论列表

image.png

image.png

image.png

image.png

107.iconont注册字体

image.png

图标注册成字体就可以用字体的属性来修改，比如颜色，字体粗细

image.png

image.png

image.png

108.掘金-底部

image.png

image.png

image.png

109110.掘金-数据准备

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

主题 109.新词

[Timestamp](audio:Timestamp): 时间戳

[current](audio:current): 现在的

[convert](audio:convert): 转换

110.列表渲染

image.png

image.png

111.点赞功能

点击+1数字图标变颜色，再点击变回原来的

image.png

image.png

image.png

112.添加评论

image.png

  • 构造函数中多个类型顺序有要求

提供的数组中的元素顺序需要和constructor中的顺序一 一对应，不然会异常

image.pngimage.png

image.png

image.png

113.排序功能

image.png

image.png

image.png

image.png

image.png

组件传递拓展

114.@Link双向同步

image.png

image.png

image.png

image.png

115.@Provide和@Consume后代组件

推测任务

从「祖先组件的状态变量」到「后代组件的绑定状态」的推测

知识类型

联结模型

输入空间

**维度1**：祖先组件中通过@Provide声明的状态变量
**维度2**：后代组件中使用@Consume绑定的状态变量标识符

输出空间

**维度1**：后代组件中绑定的状态值
**维度2**：数据同步机制是否成功

映射关系

**描述1** 当祖先组件中的状态变量被@Provide装饰时，该变量会成为所有后代组件可访问的状态源。
**描述2** 后代组件通过@Consume绑定后，能够实时获取并反映祖先组件中状态变量的变化。
**描述3** 如果状态变量发生变化，后代组件中的绑定状态也会自动更新，实现双向数据同步。

具体应用

**例1** 在一个HarmonyOS应用中，祖先组件A通过@Provide提供了一个名为`count`的状态变量（初始值为0），后代组件B通过@Consume绑定了这个变量。当A中的`count`值变为5时，B中的绑定值也会自动更新为5。
**例2** 在另一个场景中，祖先组件X通过@Provide提供了一个布尔值`isVisible`（初始值为`true`），后代组件Y通过@Consume绑定了这个变量。当X将`isVisible`设置为`false`时，Y中的绑定值也会立即变为`false`，从而触发UI隐藏逻辑。

image.png

image.png

image.png

image.png

image.png

116.@Oberved和@ObjectLink

image.png

路由

主题 路由新词

[router](audio:router): 路由器

[appear](audio:appear): 出现、显现、呈现

117.路由

新建页面、页面跳转、后退

image.png

image.png

replaceUrl 没动画

image.png

118.路由-页面栈

应该是为了防止在使用返回时一直两个或几个页面循环，如果之前一直在两个或多个页面来回多次，就会累加，再用返回就会重走之前的累计跳转的页面，陷入几次循环

这里就需要用replaceUrl

辅助，1. 获取长度， 2. 清空页面栈

image.png

119.路由模式和路由传参

image.png

image.png

image.png

aboutToAppear():从一开始就执行

image.png

image.png

120.生命周期函数
02.鸿蒙笔记
姜帝屋的头像
创建于：2024-10-01
随记
讨论
媒体