鸿蒙 HarmonyOS NEXT星河版零基础入门到实战

联合类型

截屏2024-08-20 09.49.24.png

枚举类型

截屏2024-08-16 09.10.26.png

界面开发起步

截屏2024-08-16 09.35.47.png

界面开发-布局思路

截屏2024-08-16 09.38.09.png

截屏2024-08-16 09.39.45.png

组件的属性方法

截屏2024-08-16 09.45.42.png

字体颜色

截屏2024-08-16 09.53.33.png

文字溢出省略号、行高

截屏2024-08-16 10.06.20.png

Image图片组件

截屏2024-08-16 10.22.48.png

输入框与按钮

截屏2024-08-16 10.29.40.png

综合实战-华为登录

截屏2024-08-16 10.31.50.png

截屏2024-08-16 10.42.33.png

设计资源-svg图标

截屏2024-08-16 10.45.04.png

布局元素的组成&内边距

截屏2024-08-16 10.53.49.png

外边距

截屏2024-08-16 10.58.51.png

边框border

截屏2024-08-16 11.12.08.png

设置组件圆角

截屏2024-08-16 11.43.56.png

特殊形状的圆角设置

截屏2024-08-16 11.48.24.png

背景属性

截屏2024-08-16 11.55.08.png

截屏2024-08-16 11.56.54.png

截屏2024-08-16 11.56.04.png

背景图位置

截屏2024-08-16 12.03[图片上传中...(截屏2024-08-17 10.48.00.png-886c42-1723862885693-0)] .17.png

单位问题

默认的单位都是vp，vp基于设备转换，保证不同设备视觉效果一致

截屏2024-08-17 10.34.14.png

截屏2024-08-17 10.37.40.png

背景图尺寸

截屏2024-08-17 10.40.48.png

线性布局

截屏2024-08-17 10.50.46.png

截屏2024-08-17 11.02.01.png

自适应伸缩

截屏2024-08-17 11.12.50.png

弹性布局（flex）

截屏2024-08-17 16.06.11.png

截屏2024-08-17 16.11.16.png

绝对定位

截屏2024-08-17 16.17.51.png

截屏2024-08-17 16.26.30.png

层叠布局

截屏2024-08-17 16.32.26.png

截屏2024-08-17 16.31.14.png

字符串拼接

截屏2024-08-17 16.50.07.png

截屏2024-08-17 16.54.15.png

类型转换

字符串转数字

截屏2024-08-17 16.59.32.png

截屏2024-08-17 17.00.25.png

截屏2024-08-17 17.00.48.png

截屏2024-08-17 17.00.05.png

数字转字符串

截屏2024-08-17 17.08.12.png

交互-点击事件

截屏2024-08-17 17.13.54.png

状态管理

截屏2024-08-17 17.20.23.png

截屏2024-08-17 17.23.20.png

运算符

截屏2024-08-17 17.31.40.png

截屏2024-08-17 17.33.16.png

截屏2024-08-17 17.41.09.png

截屏2024-08-17 17.44.26.png

截屏2024-08-17 17.48.13.png

运算符优先级

截屏2024-08-17 17.50.56.png

数组的操作

截屏2024-08-17 18.01.11.png

截屏2024-08-17 18.00.44.png

截屏2024-08-17 18.03.48.png

截屏2024-08-17 18.05.42.png

截屏2024-08-17 18.07.36.png

语句

截屏2024-08-17 18.11.36.png

if分支语句

截屏2024-08-17 18.14.29.png

截屏2024-08-17 18.15.19.png

截屏2024-08-17 18.19.32.png

switch分支

截屏2024-08-17 18.23.14.png

三元条件表达式

截屏2024-08-17 18.27.25.png

条件渲染

截屏2024-08-17 18.28.43.png

循化语句while

截屏2024-08-17 18.38.07.png

循化语句for

截屏2024-08-17 18.44.17.png

截屏2024-08-17 18.47.02.png

退出循环

截屏2024-08-17 18.52.34.png

便历数组

截屏2024-08-17 18.56.32.png

截屏2024-08-17 18.58.05.png

对象数组

截屏2024-08-17 19.01.21.png

ForEach-渲染控制

截屏2024-08-17 19.09.46.png

阶段案例-生肖抽奖卡

截屏2024-08-18 09.26.44.png

截屏2024-08-18 09.30.20.png

截屏2024-08-18 09.48.10.png

截屏2024-08-18 09.52.42.png

截屏2024-08-18 09.57.03.png

截屏2024-08-18 10.07.03.png

Swiper轮播组件

截屏2024-08-18 10.22.30.png

截屏2024-08-18 10.23.45.png

截屏2024-08-18 10.28.40.png

截屏2024-08-18 10.41.31.png

截屏2024-08-18 10.39.50.png

样式&结构重用

截屏2024-08-18 11.17.10.png

1、@Extend扩展组件：扩展组件的样式、事件，实现复用效果

截屏2024-08-18 10.52.31.png

2、@Styles抽取通用属性、事件，不支持传参

截屏2024-08-18 10.59.52.png

3、@Builder：自定义构建函数（结构、样式、事件）

如果在组件内使用，则不需要关键字functon

截屏2024-08-18 11.05.42.png

滚动容器Scroll

截屏2024-08-18 11.19.43.png

截屏2024-08-18 11.21.29.png

截屏2024-08-18 11.27.17.png

截屏2024-08-18 11.31.28.png

截屏2024-08-18 11.40.48.png

容器组件Tabs

截屏2024-08-18 11.48.06.png

截屏2024-08-18 11.50.06.png

截屏2024-08-18 11.53.12.png

截屏2024-08-18 14.18.29.png

截屏2024-08-18 14.22.55.png

截屏2024-08-18 14.39.49.png

Class类

截屏2024-08-18 14.47.24.png

截屏2024-08-18 15.16.55.png

截屏2024-08-18 15.23.08.png

截屏2024-08-18 15.29.24.png

截屏2024-08-18 15.33.28.png

截屏2024-08-18 15.45.47.png

截屏2024-08-18 15.50.38.png

截屏2024-08-18 15.56.07.png

截屏2024-08-18 15.56.56.png

截屏2024-08-18 15.58.50.png

截屏2024-08-18 15.59.45.png

截屏2024-08-18 16.02.09.png

截屏2024-08-18 16.23.20.png

剩余参数和展开运算符

截屏2024-08-18 16.31.12.png

截屏2024-08-18 16.34.23.png

接口补充

主要用于定义对象类型，可以对对象的形状进行描述。

截屏2024-08-22 11.33.07.png

截屏2024-08-18 16.39.20.png

截屏2024-08-18 16.40.13.png

范型

截屏2024-08-18 16.53.47.png

截屏2024-08-18 17.22.15.png

截屏2024-08-18 17.24.39.png

截屏2024-08-18 17.28.40.png

截屏2024-08-18 17.31.39.png

模块化语法

截屏2024-08-18 17.34.51.png

截屏2024-08-18 17.35.49.png

截屏2024-08-18 17.41.33.png

截屏2024-08-18 17.45.27.png

自定义组件

截屏2024-08-18 17.48.47.png

截屏2024-08-18 18.00.15.png

截屏2024-08-18 18.02.24.png

@BuilderParam传递ui

截屏2024-08-18 18.13.04.png

多个@BuilderParam参数

截屏2024-08-18 18.19.17.png

状态管理（父子传值）

截屏2024-08-18 18.58.12.png

截屏2024-08-18 19.00.51.png

截屏2024-08-18 20.26.04.png

截屏2024-08-19 20.53.40.png

截屏2024-08-22 11.56.02.png

截屏2024-08-19 20.51.11.png

截屏2024-08-22 12.03.46.png

@0bserved和@0bjectLink
1、属性更新的逻辑: 当我们@0bserved装饰过的数据，属性改变时，就会监听到，
2、然后遍历依赖它的 @0bjectLink 包装类， 通知数据更新
意思是说：数据真的更新了，但是只有用了@0bjectLink的组件的视图才更新，未使用@0bjectLink的组件的视图不更新

截屏2024-08-19 20.57.07.png

list列表组件

截屏2024-08-18 21.14.42.png

截屏2024-08-19 14.39.04.png

截屏2024-08-19 20.52.11.png

IconFont字体图标

截屏2024-08-19 14.45.07.png

image.png

输入框双向绑定

截屏2024-08-19 18.48.02.png

时间函数

截屏2024-08-19 18.11.04.png

@Link双向同步

截屏2024-08-19 19.01.43.png

路由

截屏2024-08-19 22.20.17.png

截屏2024-08-19 22.22.57.png

截屏2024-08-19 22.26.47.png

截屏2024-08-19 22.31.03.png

截屏2024-08-19 22.37.25.png

截屏2024-08-19 22.39.53.png

截屏2024-08-19 22.43.05.png

生命周期

截屏2024-08-19 22.46.22.png

截屏2024-08-22 12.59.31.png

截屏2024-08-22 13.00.30.png

• 有页面、组件嵌套时候的生命周期顺序
  页面aboutToAppear ---> 页面onDidBuild ---> 所有子组件aboutToAppear ---> 所有子组件onDidBuild ---> 页面onPageShow --> 页面onPageHide---> 页面aboutToDisappear ---> 所有子组件aboutToDisappear

• 组件生命周期：
  aboutToappear: 创建组件实例后执行，可以修改状态变量
  onDidBuild：组件build()函数执行完成之后回调该接口，不建议修改状态变量。
  aboutToDisappear：组件实例销毁前执行，不允许修改状态变量

• 页面生命周期（也有普通组件的那三个）：
  onPageShow：页面每次显示触发（路由过程、应用进入前后台）
  onPageHide：页面每次隐藏触发（路由过程、应用进入前后台）
  onBackPress：点击返回触发（reaurn true 阻止返回键默认返回效果）

• 应用生命周期：
  onCreact：应用创建
  onDestory：应用销毁
  onForeground：切换到前台
  onBackground：切换到后台

Stage模型

截屏2024-08-20 07.56.51.png

截屏2024-08-20 08.04.10.png

截屏2024-08-20 08.08.32.png

截屏2024-08-20 08.09.25.png

截屏2024-08-20 08.14.28.png

截屏2024-08-20 08.22.50.png

截屏2024-08-20 09.37.35.png

截屏2024-08-20 09.36.07.png

自定义路由表

• 人面猴

  序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...

  沈念sama阅读 220,295评论 6赞 512
• 死咒

  序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...

  沈念sama阅读 93,928评论 3赞 396
• 救了他两次的神仙让他今天三更去死

  文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...

  开封第一讲书人阅读 166,682评论 0赞 357
• 道士缉凶录：失踪的卖姜人

  文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...

  开封第一讲书人阅读 59,209评论 1赞 295
• 港岛之恋（遗憾婚礼）

  正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...

  茶点故事阅读 68,237评论 6赞 397
• 恶毒庶女顶嫁案：这布局不是一般人想出来的

  文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...

  开封第一讲书人阅读 51,965评论 1赞 308
• 城市分裂传说

  那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...

  沈念sama阅读 40,586评论 3赞 420
• 双鸳鸯连环套：你想象不到人心有多黑

  文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...

  开封第一讲书人阅读 39,487评论 0赞 276
• 万荣杀人案实录

  序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...

  沈念sama阅读 46,016评论 1赞 319
• 护林员之死

  正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...

  茶点故事阅读 38,136评论 3赞 340
• 白月光启示录

  正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...

  茶点故事阅读 40,271评论 1赞 352
• 活死人

  序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...

  沈念sama阅读 35,948评论 5赞 347
• 日本核电站爆炸内幕

  正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...

  茶点故事阅读 41,619评论 3赞 331
• 男人毒药：我在死后第九天来索命

  文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...

  开封第一讲书人阅读 32,139评论 0赞 23
• 一桩弑父案，背后竟有这般阴谋

  文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...

  开封第一讲书人阅读 33,252评论 1赞 272
• 情欲美人皮

  我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...

  沈念sama阅读 48,598评论 3赞 375
• 代替公主和亲

  正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...

  茶点故事阅读 45,267评论 2赞 358

推荐阅读更多精彩内容

• 2、HarmonyOS鸿蒙开发--ArkUI界面开发基础

  ArkUI基础 组件：ArkUI构建页面的最小单元组件分类：容器组件（column，row），基础组件布局思路：先...

  小小一颗卤蛋阅读 471评论 0赞 0
• 实战零基础小程序落地页项目

  前言 微信小程序简单易上手，只要有一些编程基础，即可快速开发基本的项目。本项目是常见的，商品广告落地页小程序。提供...

  袭明_阅读 1,084评论 5赞 5
• Web开发快速入门基础篇（4）前端基础HTML+CSS

  4.前端基础HTML+CSS 简述 一个网站的前端主要是两个部分，界面和交互，界面就是长什么样，有的好看，有的丑。...

  清风闻仙醉阅读 586评论 0赞 1
• 最全鸿蒙（HarmonyOS）开发学习路线+学习资料（含零基础入门、UI、Web、应用模型）分享

  前言 随着越来越多头部App厂商启动鸿蒙（HarmonyOS）原生应用开发，华为鸿蒙开发人才变得紧缺，这也意味着鸿...

  小城哇哇阅读 667评论 0赞 0
• Chapter1HarmonyOS App开发入门

  1.初识HarmonyOS 1.1 简介 1.2 技术架构 1.3 技术特性 硬件互助，资源共享 1.3.1 一次...

  王震阳阅读 716评论 0赞 1