【HarmonyOS 4】从零开始，快速上手

卿卿qing

已于 2024-09-11 11:30:39 修改

阅读量1.1k

点赞数 25

文章标签： HarmonyOS 4.0

于 2024-08-13 17:33:15 首次发布

本文链接：https://blog.csdn.net/weixin_43900414/article/details/141161046

版权

在这里插入图片描述

1. 搭建开发环境，运行项目，启动本地模拟器

1.1 下载并安装 DevEco Studio
1.2 创建项目并初始化

项目 build init 时报错：request to http://registry.cnpmjs.org/pnpm failed, reason: getaddrinfo ENOTFOUND registry.cnpmjs.org
运行 npm install -g cnpm --registry=https://registry.npm.taobao.org，仍报错：request to https://registry.npm.taobao.org/cnpm failed, reason: certificate has expired. 显示证书过期。使用的是老版本的淘宝镜像，淘宝不在维护.
设置淘宝最新的镜像源. 运行 npm install -g cnpm --registry=https://registry.npmmirror.com. 成功

1.3 创建模拟器

创建模拟器前需要先申请参加模拟器Beta活动.
若提示该账号没有权限，请先点击“Submit the application form”完成权限申请.

1.4 修改模拟器全屏显示本地项目，不显示顶部状态栏

windows：设置 —> 显示和亮度 —> 更多显示设置 —> 屏幕顶部显示 —> 应用自定义 —> 往下拉找到我们的项目 —> 弹框选择显示顶部区域

1.5 了解项目目录：工程级目录 / 模块级目录

通过修改下面俩个文件路径设置模拟器打开的主页面
1.1 src/main/ets/entryability/entryability.ts ⇒ windowStage.loadContent(‘test_pages/test2’)
1.2 resources/base/profile/main_pages.json ⇒ { “src”: [‘test_pages/test2’] }，配置router路径

1.6 DevEco Studio 配置 TypeScript

安装 Nodejs，配置 Nodejs 的环境变量
安装 typescript，npm install -g typescript，tsc -v 查看版本号
编译 .ts 文件的命令：tsc 文件名
编译 .js 文件的命令：node 文件名

2. TypeScript 快速入门

TypeScript 快速入门

3. ArkTs/ArkUI

继承 TS 的所有特性，是 TS 的超集。
ArkUI 是一套构建分布式应用界面的声明式UI开发框架，只能使用表达式。组件中不需要renturn。

3.1 声明式UI

声明式描述：开发者只需描述界面在不同状态下要呈现的最终效果，而无需关注界面变化的具体过程
开发者只需修改状态变量的值，界面就会自动更新。

3.2 组件化

4. 配置组件的事件方法

事件方法以 “.” 链式调用的方式配置系统组件支持的事件，建议每个事件方法单独写一行。

// 1. 使用箭头函数配置组件的事件方法
Button('Click me')
	.onClick(() => {})

// 2. 使用匿名函数表达式配置组件的事件方法，要求使用bind，以确保函数题中的this指向当前组件
Button('add counter')
	.onClick(function(){}.bind(this))

// 3. 使用组件的成员函数配置组件的事件方法，⚠️组件的成员函数只能在事件方法上面定义
myClickHandler(): void {}
Button('add counter')
	.onClick(this.myClickHandler.bind(this))

5. 指定应用初始页面

修改entry/src/main/ets/entryability/EntryAbility.ts文件中的如下内容，例如指定应用初始页面为欢迎页。

onWindowStageCreate(windowStage: window.WindowStage): void {
  // Main window is created, set main page for this ability
  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
  // 修改位置
  windowStage.loadContent('pages/SplashPage', (err) => {
    if (err.code) {
      hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
      return;
    }
    hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
  });
}

6. 像素单位

px、vp、fp

7. 变量常用类型定义

ArkTs 常用类型定义

8. 装饰器

常用装饰器

9. 容器组件

容器组件均支持子组件配置，可以实现相对复杂的多级嵌套。
常用容器组件布局

10. 基础组件

ArkTs 常用基础组件

11. 自定义组件

ArkTs 自定义组件

12. 渲染控制

ArkTs 渲染控制能力

13. UI结构复用

@Builder 自定义构建函数

14. @BuilderParam 装饰器

@BuilderParam 装饰器

15. 组件样式复用

组件样式复用

16. 全局UI方法

全局UI方法

17. 组件级变量的状态管理

状态变量：被状态装饰器(@State) 装饰的变量叫状态变量，状态变量值的改变会引起UI的渲染更新。@State count: number = 0
常规变量：没有被状态装饰器修饰的变量，通常应用于辅助计算。它的改变永远不会引起UI的渲染更新。private/public increaseBy: number = 1
数据源/同步源：状态变量的原始来源，可以同步给不同的状态数据。通常意义为父组件传给子组件的数据。
命名参数机制：父组件通过指定参数传递给子组件的状态变量，为父子传递同步参数的主要手段
从父组件初始化：父组件使用命名参数机制，将指定参数传递给子组件。子组件初始化的默认值在有父组件传值的情况下，会被覆盖。
初始化子组件：父组件中状态变量可以传递给子组件，初始化子组件对应的状态变量
本地初始化：在变量声明的时候赋值，作为变量的默认值。

组件级变量的状态管理