We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
最近学习了一下HarmonyOS 第一课的基础课程,此篇以记录一些课程笔记。
系统环境:MacOS 14.6.1(Apple M2 Pro)
DevEco Studio 是HarmonyOS开发的集成开发环境(IDE),可以去官方下载页面去下载最新版本。安装完成之后,可以对IDE进行诊断和汉化。
诊断主要是识别开发环境是否完备。操作路径:Help > Diagnostic Tools > Diagnose Development Environment。
IDE默认的语种是英语,但自带了汉化包。操作路径:DevEco Studio > Preferences > Plugins,选择Installed标签,搜索「chinese」,然后点击右侧的「Enable」启用插件,重启IDE即可。
Windows 系统为:File > Settings > Plugins
DevEco Studio 支持预览器、模拟器、真机三种本地调试方式,预览器同时支持手机、平板、可折叠设备等多种设备进行本地调试,操作路径:在工程的右侧点击 Previewer > 点击2所指的图标 > 打开Multi-profile preview,在下面能看到对应的设备列表:
但需要注意的是,预览器有一部分能力并不支持:
若工程包含有预览器不支持的能力时,建议用模拟器或真机进行调试。
模拟器所支持的能力可见:模拟器和真机调试
目前流行的编程语言TypeScript是在JavaScript基础上通过添加类型定义扩展而来的,而ArkTS在继承TypeScript语法的基础上进行进一步扩展和优化,以提供更高的性能和开发效率。所以,ArkTS的语法和TypeScript的语法非常类似,这对于前端开发者而言就非常友好了。
const t:string = 'aaa' let b = 2 const c: number[] = [1,2,3] ... enum ENUM { ONE = 1 } class A { name: string = '' getName(): string { return this.name } } interface B {}
ArkTS要求所有字段在声明时或者构造函数中显式初始化,这和TS中的strictPropertyInitialization模式一样。
ArkTS以声明方式组合和扩展组件来描述应用程序的UI,而ArkUI不仅提供基础的系统布局组件和应用组件,例如Text、Image、Row、Column等,同时提供了与组件对应的属性、事件和子组件配置方法。看一个简单示例:
Text
Image
Row
Column
... @Entry @Component struct Index { @State message: string = 'Hello World'; build() { Column(){ // 以下都是子组件 // 文本组件 Text(this.message) .fontSize(30) .fontWeight(FontWeight.Bold) // 图片组件 Image(src).width(100) // 按钮组件 Button() { Text('这是按钮') // 子组件 } .type(ButtonType.Capsule) .margin({ top: 40 }) .onClick(() => { console.log('按钮事件') }) } .height('100%') .width('100%') } }
从上述示例可以看出,对组件属性的配置和CSS的语法是非常像的:
@Entry
页面组件
@Component
struct
build
自定义组件
build()
Vue
React
render
和Vue/React等前端框架的组件一样,ArkUI组件也有自身的生命周期。被@Entry装饰的页面组件生命周期如下图所示:
页面组件具备以下生命周期接口:
onPageShow
onPageHide
onBackPress
自定义组件具备以下生命周期接口:
aboutToAppear
onDidBuild
aboutToDisappear
ArkUI组件的生命周期接口也支持自定义,具体示例可见声明式UI-页面和自定义组件-自定义组件监听页面生命周期
循环渲染一组数据是业务开发中常见的场景,前端框架都提供了相关的指令或语法,ForEach是ArkTS提供的基于数组类型数据来进行循环渲染的接口。看一个简单示例:
ForEach
@Entry @Component struct Index{ arr: string[] = ['one', 'two', 'three'] build(){ Column(){ ForEach(this.arr, (item: string) => { Text(item).margin({ bottom: 20 }) }) } } }
这样就可以把一组数据渲染到界面上:
ForEach需要与容器组件配合使用,且接口返回的组件应当是允许包含在ForEach父容器组件中的子组件。例如,ListItem组件要求ForEach的父容器组件必须为List组件。它的语法如下:
ForEach( Array<Object>, // 数据源 itemGenerator: (item: Object, index: number) => void, // 组件生成函数 keyGenerator?: (item: Object, index: number) => string // 键值生成函数 )
前两个参数是必须的,第三个keyGenerator参数是可选的,这个是用于给组件生成键值的,会和生成的组件绑定。在React/Vue等前端框架中,进行循环渲染时都会建议给组件设定key值,以便于复用组件,提升渲染性能,ArkTS也是如此,但又存在不同。举个例子:
keyGenerator
React/Vue
key
// 数据源 arr = ['one', 'two', 'three', 'two'] // vue <div v-for="item in arr" :key="item" style="margin-top: 20px"> <div>{{ item }}</div> </div> // ArkUI ForEach(this.arr, (item: string) => { Text(item).margin({ bottom: 20 }) }, (item: string) => item)
同样是以arr作为数据源,以arr的数组项作为组件的key值,二者渲染的效果却不同:
arr
从上图可以看出,Vue的渲染结果是符合预期的,ArkTS渲染的列表少了数据源的最后一项。这是因为ForEach遍历数据源时将item作为键值,遍历到索引为1的two时,生成键值为two的组件并进行标记;当遍历到索引为3的two时,当前项的键值也为two,此时不再创建新的组件。倘若组件生成的键值是相同的,那么ArkUI框架的行为也是未定义的,就会出现非预期渲染。而对于Vue等前端框架,即使键值相同,依然会创建组件,只是会出现一个「键值重复」的警告。
item
ForEach的第三个参数是可选的,若未提供则会使用默认的键值生成函数:
(item: Object, index: number) => { return index + '__' + JSON.stringify(item); }
ArkUI框架对于ForEach的键值生成有一套特定的判断规则,这主要与itemGenerator函数的第二个参数index以及keyGenerator函数的第二个参数index有关,具体的键值生成规则判断逻辑如下图所示:
itemGenerator
index
上文说过,build()函数的作用类似于Vue/React等前端框架的render函数,负责组件的渲染。无论是页面组件还是自定义组件,都必须显示声明该函数。所有声明在build()函数内的语句,统称为UI描述。UI描述需要遵循以下规则:
console
switch
build(){ let a:number = 1 // 编译错误 console.log('aaa') // 编译错误 { //创建本地作用域,编译错误 } // 不允许,用if语句代替 switch(exp) {} // 不允许使用表达式,用if语句代替 (this.aVar > 10) ? Text('...') : Image('...') // 不允许改变状态变量 this.a = 1 }
@Builder
@Component struct ParentComponent { doSomeCalculations() { } calcTextValue(): string { return 'Hello World'; } @Builder doSomeRender() { Text(`Hello World`) } build() { Column() { // 反例:不能调用没有用@Builder装饰的方法 this.doSomeCalculations(); // 正例:可以调用 this.doSomeRender(); // 正例:参数可以为调用TS方法的返回值 Text(this.calcTextValue()) } } }
UIAbility组件是一种包含UI的应用组件,是系统调度的基本单元,主要用于和用户交互,其主要特点有两个:
一个应用可以包含一个或多个UIAbility组件,而每个UIAbility组件实例都会在最近任务列表中显示一个对应的任务。对于开发者而言,可以根据具体场景选择单个还是多个UIAbility,划分建议如下:
UIAbility的生命周期包括Create、Foreground、Background、Destroy四个状态:
Create
Foreground
Background
Destroy
onCreate()
onForeground
onBackground()
onBackground
onDestroy
完整的周期示意图如下:
UIAbility的启动模式是指UIAbility实例在启动时的不同呈现状态。针对不同的业务场景,系统提供了三种启动模式:
startAbility()
singleton启动模式时,再次调用startAbility()方法启动该UIAbility实例时,只会进入该UIAbility的onNewWant()回调,不会进入其onCreate()和onWindowStageCreate()生命周期回调。应用可以在该回调中更新要加载的资源和数据等,用于后续的UI展示。
onNewWant()
onWindowStageCreate()
AbilityStage
onAcceptWant()
Key
指定实例模式针对一些特殊场景使用,例如文档编辑,重复打开已保存的文档都希望是打开同一个UIAbility实例
用户应用程序泛指运行在设备的操作系统之上,为用户提供特定服务的程序,简称“应用”。一个应用所对应的软件包文件,称为“应用程序包”。HarmonyOS为应用的开发提供了多Module设计机制,其特点是:
Module按照使用场景可以分为两种类型:
.hap
entry类型
feature类型
Static
Shared
.har
HAR(Harmony Archive)
.hsp
HSP(Harmony Shared Package)
对于同一个Library类型的Module,可以被其他的Module多次引用,二者的编译和运行差异如下:
从上图可以看出,HAR中的代码和资源跟随使用方编译,如果有多个使用方,它们的编译产物中会存在多份相同拷贝;而HSP中的代码和资源可以独立编译,运行时在一个进程中代码也只会存在一份。
HarmonyOS支持两种应用模型:FA(Feature Ability)模型和Stage模型。目前主推且会长期演进的模型是Stage模型。
Stage模型
两种模型的差异可见:应用模型概况
在DevEco Studio上创建的工程也默认采用Stage模型,其工程结构示意图如下:
entry
注意:Module目录名可以自定义,Module的类型是配置文件module.json5中的type字段指定的,跟目录名无关。type可选值为:entry、feature、har和shared,分别对应上文的Module类型。
module.json5
type
feature
har
shared
如上文所述,一个应用可以包含多个Module,不同类型的Module编译后会生成对应的HAP、HAR、HSP等文件,开发态视图与编译态视图的对照关系如下:
(全文完)
The text was updated successfully, but these errors were encountered:
Sorry, something went wrong.
No branches or pull requests
前言
最近学习了一下HarmonyOS 第一课的基础课程,此篇以记录一些课程笔记。
核心理念
DevEco Studio的使用
DevEco Studio 是HarmonyOS开发的集成开发环境(IDE),可以去官方下载页面去下载最新版本。安装完成之后,可以对IDE进行诊断和汉化。
诊断IDE
诊断主要是识别开发环境是否完备。操作路径:Help > Diagnostic Tools > Diagnose Development Environment。
汉化
IDE默认的语种是英语,但自带了汉化包。操作路径:DevEco Studio > Preferences > Plugins,选择Installed标签,搜索「chinese」,然后点击右侧的「Enable」启用插件,重启IDE即可。
本地调试
DevEco Studio 支持预览器、模拟器、真机三种本地调试方式,预览器同时支持手机、平板、可折叠设备等多种设备进行本地调试,操作路径:在工程的右侧点击 Previewer > 点击2所指的图标 > 打开Multi-profile preview,在下面能看到对应的设备列表:
但需要注意的是,预览器有一部分能力并不支持:
若工程包含有预览器不支持的能力时,建议用模拟器或真机进行调试。
ArkTS & ArkUI
目前流行的编程语言TypeScript是在JavaScript基础上通过添加类型定义扩展而来的,而ArkTS在继承TypeScript语法的基础上进行进一步扩展和优化,以提供更高的性能和开发效率。所以,ArkTS的语法和TypeScript的语法非常类似,这对于前端开发者而言就非常友好了。
ArkTS以声明方式组合和扩展组件来描述应用程序的UI,而ArkUI不仅提供基础的系统布局组件和应用组件,例如
Text
、Image
、Row
、Column
等,同时提供了与组件对应的属性、事件和子组件配置方法。看一个简单示例:从上述示例可以看出,对组件属性的配置和CSS的语法是非常像的:
@Entry
装饰的自定义组件将作为UI页面的入口组件,即页面的根节点。一个页面有且仅能有一个@Entry
装饰的组件,这类组件也叫页面组件
@Component
装饰器仅能装饰struct
关键字声明的数据结构。struct
被@Component
装饰后具备组件化的能力,需要实现build
方法描述UI。一个struct
只能被一个@Component
装饰,被@Component
装饰的组件也叫自定义组件
build()
函数用于定义自定义组件的声明式UI描述(作用类似于Vue
/React
等前端框架的render
函数),这是组件必须要声明的函数组件的生命周期
和
Vue
/React
等前端框架的组件一样,ArkUI组件也有自身的生命周期。被@Entry
装饰的页面组件生命周期如下图所示:页面组件
具备以下生命周期接口:onPageShow
:页面每次显示时触发一次,包括路由过程、应用进入前台等场景onPageHide
:页面每次隐藏时触发一次,包括路由过程、应用进入后台等场景onBackPress
:当用户点击返回按钮时触发自定义组件
具备以下生命周期接口:aboutToAppear
:组件即将出现时回调该接口,具体时机为在创建自定义组件的新实例后,在执行其build()
函数之前执行。onDidBuild
:组件build()
函数执行完成之后回调该接口。aboutToDisappear
:在自定义组件被销毁之前执行。组件的销毁是从组件树上直接摘下子树,对于嵌套组件而言,会先调用父组件的aboutToDisappear
,再调用子组件的aboutToDisappear
。ForEach循环
循环渲染一组数据是业务开发中常见的场景,前端框架都提供了相关的指令或语法,
ForEach
是ArkTS提供的基于数组类型数据来进行循环渲染的接口。看一个简单示例:这样就可以把一组数据渲染到界面上:
ForEach
需要与容器组件配合使用,且接口返回的组件应当是允许包含在ForEach父容器组件中的子组件。例如,ListItem组件要求ForEach的父容器组件必须为List组件。它的语法如下:前两个参数是必须的,第三个
keyGenerator
参数是可选的,这个是用于给组件生成键值的,会和生成的组件绑定。在React/Vue
等前端框架中,进行循环渲染时都会建议给组件设定key
值,以便于复用组件,提升渲染性能,ArkTS也是如此,但又存在不同。举个例子:同样是以
arr
作为数据源,以arr
的数组项作为组件的key
值,二者渲染的效果却不同:从上图可以看出,
Vue
的渲染结果是符合预期的,ArkTS渲染的列表少了数据源的最后一项。这是因为ForEach
遍历数据源时将item
作为键值,遍历到索引为1的two时,生成键值为two的组件并进行标记;当遍历到索引为3的two时,当前项的键值也为two,此时不再创建新的组件。倘若组件生成的键值是相同的,那么ArkUI框架的行为也是未定义的,就会出现非预期渲染。而对于Vue
等前端框架,即使键值相同,依然会创建组件,只是会出现一个「键值重复」的警告。ForEach
的第三个参数是可选的,若未提供则会使用默认的键值生成函数:ArkUI框架对于
ForEach
的键值生成有一套特定的判断规则,这主要与itemGenerator
函数的第二个参数index
以及keyGenerator
函数的第二个参数index
有关,具体的键值生成规则判断逻辑如下图所示:build()函数
上文说过,
build()
函数的作用类似于Vue
/React
等前端框架的render
函数,负责组件的渲染。无论是页面组件还是自定义组件,都必须显示声明该函数。所有声明在build()
函数内的语句,统称为UI描述。UI描述需要遵循以下规则:@Entry
装饰的自定义组件,其build()
函数下的根节点唯一且必要,且必须为容器组件,其中ForEach禁止作为根节点@Component
装饰的自定义组件,其build()
函数下的根节点唯一且必要,可以为非容器组件,其中ForEach禁止作为根节点console
语句、使用switch
语句、使用表达式以及直接改变状态变量。@Builder
装饰的方法,但允许系统组件的参数是TS方法的返回值。UIAbility组件
UIAbility组件是一种包含UI的应用组件,是系统调度的基本单元,主要用于和用户交互,其主要特点有两个:
一个应用可以包含一个或多个UIAbility组件,而每个UIAbility组件实例都会在最近任务列表中显示一个对应的任务。对于开发者而言,可以根据具体场景选择单个还是多个UIAbility,划分建议如下:
生命周期
UIAbility的生命周期包括
Create
、Foreground
、Background
、Destroy
四个状态:onCreate()
回调,可以在该回调中进行页面初始化操作,例如变量定义资源加载等,用于后续的UI展示onForeground
回调,可以在该回调中申请系统需要的资源,或者重新申请在onBackground()
中释放的资源onBackground
回调,可以在该回调中释放UI不可见时无用的资源,或者在此回调中执行较为耗时的操作,例如状态保存等onDestroy
回调,可以在该回调中进行系统资源的释放、数据的保存等操作完整的周期示意图如下:
启动模式
UIAbility的启动模式是指UIAbility实例在启动时的不同呈现状态。针对不同的业务场景,系统提供了三种启动模式:
startAbility()
方法时,如果应用进程中该类型的UIAbility实例已经存在,则复用系统中的UIAbility实例。系统中只存在唯一一个该UIAbility实例,即在最近任务列表中只存在一个该类型的UIAbility实例startAbility()
方法时,都会在应用进程中创建一个新的该类型UIAbility实例。即在最近任务列表中可以看到有多个该类型的UIAbility实例startAbility()
方法时,会先进入对应的AbilityStage
的onAcceptWant()
生命周期回调中,以获取该UIAbility实例的Key
值。然后系统会自动匹配,如果存在与该UIAbility实例匹配的Key,则会启动与之绑定的UIAbility实例,并进入该UIAbility实例的onNewWant()
回调函数;否则会创建一个新的UIAbility实例,并进入该UIAbility实例的onCreate()
回调函数和onWindowStageCreate()
回调函数。应用程序
用户应用程序泛指运行在设备的操作系统之上,为用户提供特定服务的程序,简称“应用”。一个应用所对应的软件包文件,称为“应用程序包”。HarmonyOS为应用的开发提供了多Module设计机制,其特点是:
Module类型
Module按照使用场景可以分为两种类型:
.hap
为后缀的文件,称为HAP(Harmony Ability Package)包。HAP包可以独立安装和运行,是应用安装的基本单位,一个应用中可以包含一个或多个HAP包,具体包含如下两种类型:entry类型
的HAP。每一个应用分发到同一类型的设备上的应用程序包,只能包含唯一一个entry类型的HAPfeature类型
的HAP。一个应用中可以包含一个或多个feature类型的HAP,也可以不包含Static
和Shared
两种类型,编译后会生成共享包:.har
为后缀的文件,即静态共享包HAR(Harmony Archive)
.hsp
为后缀的文件,即动态共享包HSP(Harmony Shared Package)
对于同一个Library类型的Module,可以被其他的Module多次引用,二者的编译和运行差异如下:
从上图可以看出,HAR中的代码和资源跟随使用方编译,如果有多个使用方,它们的编译产物中会存在多份相同拷贝;而HSP中的代码和资源可以独立编译,运行时在一个进程中代码也只会存在一份。
应用模型
HarmonyOS支持两种应用模型:FA(Feature Ability)模型和Stage模型。目前主推且会长期演进的模型是
Stage模型
。在DevEco Studio上创建的工程也默认采用
Stage模型
,其工程结构示意图如下:entry
,也是一个entry类型
的Module如上文所述,一个应用可以包含多个Module,不同类型的Module编译后会生成对应的HAP、HAR、HSP等文件,开发态视图与编译态视图的对照关系如下:
(全文完)
The text was updated successfully, but these errors were encountered: