02.鸿蒙笔记

说明+计划

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

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

01.概念：

02.问题&解决方法：

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

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

• 完成黑马星河课程

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

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

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

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

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

其他

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

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

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

不加width：默认居中

width(100%)：默认居左

行注释 ： ctrl +/

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

ArkTS

认识和存储数据


常量和变量的命名规则




函数的基本使用



函数的完整写法





箭头前：参数部分

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

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

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

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

箭头后：函数体部分

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

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

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









引入枚举类型




ArkUI

界面开发-布局思路







文字溢出省略号、行高















布局元素组成&内边距padding








综合：QQ音乐登录









特殊形状圆角设置




背景属性

背景属性-背景图片















线性布局

线性布局-主轴对其方式




综合案例-个人中心




column

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


row

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





layoutWeight












































和模板字符串








1. 字符串转数字





2. 数字转字符串






























这个案例代码是复制的




**修改成状态变量**


数组操作-增加删除替换



**增加数组元素**



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

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





















62-while语句 & 三个练习









break和continue





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


for 和 for of







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







ForEach渲染控制







抽卡

8.






数据动态渲染




效果








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





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


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

数轴的右边

例如：

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

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

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


用数字代替图片


用随机数

floor向下取整，舍去小数


大奖结构和显隐控制



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

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








再来一次




1. swiper基本用法





2. swiper常见属性



3. swiper样式自定义

indicator ：指示器


问题


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

设置一个宽100%，

然后用aspectdatio存好图片比例



复用该组件内的重复代码





Styles: 抽取通用属性、事件

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





Buolder: 自定义构建函数












快速滑动到顶部、底部






[](https://www.helloimg.com/i/2024/12/20/676463311fcc7.gif)


currentOffset：当前偏移量，

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

[Offset](audio:Offset)：记忆

[attribute](audio:attribute)：属性

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


[](https://www.helloimg.com/i/2024/12/20/67651fa3e7fc6.gif)


1. 点击火箭回顶部



2. 显示效果切换





1. 基本使用



2. 常用属性



3. 滚动导航栏



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

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

• 基础结构



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



• 高亮切换





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




class




可选链操作符





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

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




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

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

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






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

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

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









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



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

运算符instanceof











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


只能读不能改






剩余参数...

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



展开运算符

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






接口实现

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



泛型




[param](audio:param):参数











模块化

[export](audio:export) default

[default](audio:default): 默认






tools这里

新建目录 → 新建ArkTS File





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




自定义组件

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

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













[Panel](audio:Panel): 面板





param：参数


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






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








状态管理








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




[](https://www.helloimg.com/i/2025/01/07/677cfb76aebf0.gif)

[](https://www.helloimg.com/i/2025/01/08/677d689958395.gif)




掘金评论



index页


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






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

[stroke](audio:stroke)轻挪






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















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

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

[convert](audio:convert): 转换



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





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

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









组件传递拓展











路由

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

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

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



replaceUrl 没动画


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

这里就需要用replaceUrl

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



[](https://www.helloimg.com/i/2025/02/20/67b6eaaa6d5a3.gif)



aboutToAppear():从一开始就执行