Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
cb277bf6
D
Docs
项目概览
OpenHarmony
/
Docs
1 年多 前同步成功
通知
159
Star
292
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
未验证
提交
cb277bf6
编写于
9月 04, 2023
作者:
O
openharmony_ci
提交者:
Gitee
9月 04, 2023
浏览文件
操作
浏览文件
下载
差异文件
!23771 arkts 告警清理
Merge pull request !23771 from 耿文广/master
上级
5be5552b
72323198
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
305 addition
and
220 deletion
+305
-220
zh-cn/application-dev/quick-start/arkts-builderparam.md
zh-cn/application-dev/quick-start/arkts-builderparam.md
+45
-45
zh-cn/application-dev/quick-start/arkts-localstorage.md
zh-cn/application-dev/quick-start/arkts-localstorage.md
+55
-55
zh-cn/application-dev/quick-start/arkts-mvvm.md
zh-cn/application-dev/quick-start/arkts-mvvm.md
+83
-85
zh-cn/application-dev/quick-start/arkts-state-management-best-practices.md
...-dev/quick-start/arkts-state-management-best-practices.md
+115
-28
zh-cn/application-dev/quick-start/har-package.md
zh-cn/application-dev/quick-start/har-package.md
+7
-7
未找到文件。
zh-cn/application-dev/quick-start/arkts-builderparam.md
浏览文件 @
cb277bf6
...
@@ -34,34 +34,34 @@
...
@@ -34,34 +34,34 @@
-
用父组件自定义构建函数初始化子组件
\@
BuildParam装饰的方法。
-
用父组件自定义构建函数初始化子组件
\@
BuildParam装饰的方法。
```
ts
```
ts
@
Component
@
Component
struct
Child
{
struct
Child
{
@
Builder
componentBuilder
()
{
@
Builder
componentBuilder
()
{
Text
(
`Parent builder `
)
Text
(
`Parent builder `
)
}
}
@
BuilderParam
aBuilder0
:
()
=>
void
=
this
.
componentBuilder
;
@
BuilderParam
aBuilder0
:
()
=>
void
=
this
.
componentBuilder
;
build
()
{
build
()
{
Column
()
{
Column
()
{
this
.
aBuilder0
()
this
.
aBuilder0
()
}
}
}
}
}
}
@
Entry
@
Entry
@
Component
@
Component
struct
Parent
{
struct
Parent
{
@
Builder
componentBuilder
()
{
@
Builder
componentBuilder
()
{
Text
(
`Parent builder `
)
Text
(
`Parent builder `
)
}
}
build
()
{
build
()
{
Column
()
{
Column
()
{
Child
({
aBuilder0
:
this
.
componentBuilder
})
Child
({
aBuilder0
:
this
.
componentBuilder
})
}
}
}
}
}
}
```
```
...
@@ -74,40 +74,40 @@ struct Parent {
...
@@ -74,40 +74,40 @@ struct Parent {
> 开发者谨慎使用bind改变函数调用的上下文,可能会使this指向混乱。
> 开发者谨慎使用bind改变函数调用的上下文,可能会使this指向混乱。
```
ts
```
ts
@
Component
@
Component
struct
Child
{
struct
Child
{
@
Builder
componentBuilder
()
{
@
Builder
componentBuilder
()
{
Text
(
`Child builder `
)
Text
(
`Child builder `
)
}
}
label
:
string
=
`Child`
label
:
string
=
`Child`
@
BuilderParam
aBuilder0
:
()
=>
void
=
this
.
componentBuilder
;
@
BuilderParam
aBuilder0
:
()
=>
void
=
this
.
componentBuilder
;
@
BuilderParam
aBuilder1
:
()
=>
void
=
this
.
componentBuilder
;
@
BuilderParam
aBuilder1
:
()
=>
void
=
this
.
componentBuilder
;
build
()
{
build
()
{
Column
()
{
Column
()
{
this
.
aBuilder0
()
this
.
aBuilder0
()
this
.
aBuilder1
()
this
.
aBuilder1
()
}
}
}
}
}
}
@
Entry
@
Entry
@
Component
@
Component
struct
Parent
{
struct
Parent
{
label
:
string
=
`Parent`
label
:
string
=
`Parent`
@
Builder
componentBuilder
()
{
@
Builder
componentBuilder
()
{
Text
(
`
${
this
.
label
}
`
)
Text
(
`
${
this
.
label
}
`
)
}
}
build
()
{
build
()
{
Column
()
{
Column
()
{
this
.
componentBuilder
()
this
.
componentBuilder
()
Child
({
aBuilder0
:
this
.
componentBuilder
,
aBuilder1
:
this
.
componentBuilder
})
Child
({
aBuilder0
:
this
.
componentBuilder
,
aBuilder1
:
this
.
componentBuilder
})
}
}
}
}
}
}
```
```
...
...
zh-cn/application-dev/quick-start/arkts-localstorage.md
浏览文件 @
cb277bf6
...
@@ -191,37 +191,37 @@ link1.set(49); // two-way sync: link1.get() == link2.get() == prop.get() == 49
...
@@ -191,37 +191,37 @@ link1.set(49); // two-way sync: link1.get() == link2.get() == prop.get() == 49
-
\@
LocalStorageLink绑定LocalStorage对给定的属性,建立双向数据同步。
-
\@
LocalStorageLink绑定LocalStorage对给定的属性,建立双向数据同步。
```
ts
```
ts
// 创建新实例并使用给定对象初始化
// 创建新实例并使用给定对象初始化
let
storage
=
new
LocalStorage
();
let
storage
=
new
LocalStorage
();
storage
[
'
PropA
'
]
=
47
;
storage
[
'
PropA
'
]
=
47
;
@
Component
@
Component
struct
Child
{
struct
Child
{
// @LocalStorageLink变量装饰器与LocalStorage中的'PropA'属性建立双向绑定
// @LocalStorageLink变量装饰器与LocalStorage中的'PropA'属性建立双向绑定
@
LocalStorageLink
(
'
PropA
'
)
storLink2
:
number
=
1
;
@
LocalStorageLink
(
'
PropA
'
)
storLink2
:
number
=
1
;
build
()
{
build
()
{
Button
(
`Child from LocalStorage
${
this
.
storLink2
}
`
)
Button
(
`Child from LocalStorage
${
this
.
storLink2
}
`
)
// 更改将同步至LocalStorage中的'PropA'以及Parent.storLink1
// 更改将同步至LocalStorage中的'PropA'以及Parent.storLink1
.
onClick
(()
=>
this
.
storLink2
+=
1
)
.
onClick
(()
=>
this
.
storLink2
+=
1
)
}
}
}
}
// 使LocalStorage可从@Component组件访问
// 使LocalStorage可从@Component组件访问
@
Entry
(
storage
)
@
Entry
(
storage
)
@
Component
@
Component
struct
CompA
{
struct
CompA
{
// @LocalStorageLink变量装饰器与LocalStorage中的'PropA'属性建立双向绑定
// @LocalStorageLink变量装饰器与LocalStorage中的'PropA'属性建立双向绑定
@
LocalStorageLink
(
'
PropA
'
)
storLink1
:
number
=
1
;
@
LocalStorageLink
(
'
PropA
'
)
storLink1
:
number
=
1
;
build
()
{
build
(
)
{
Column
({
space
:
15
}
)
{
Column
({
space
:
15
})
{
Button
(
`Parent from LocalStorage
${
this
.
storLink1
}
`
)
// initial value from LocalStorage will be 47, because 'PropA' initialized already
Button
(
`Parent from LocalStorage
${
this
.
storLink1
}
`
)
// initial value from LocalStorage will be 47, because 'PropA' initialized already
.
onClick
(()
=>
this
.
storLink1
+=
1
)
.
onClick
(()
=>
this
.
storLink1
+=
1
)
// @Component子组件自动获得对CompA LocalStorage实例的访问权限。
// @Component子组件自动获得对CompA LocalStorage实例的访问权限。
Child
()
Child
()
}
}
}
}
}
}
```
```
...
@@ -234,39 +234,39 @@ struct CompA {
...
@@ -234,39 +234,39 @@ struct CompA {
-
Child组件中,Text绑定的storProp2 依旧显示47。
-
Child组件中,Text绑定的storProp2 依旧显示47。
```
ts
```
ts
// 创建新实例并使用给定对象初始化
// 创建新实例并使用给定对象初始化
let
storage
=
new
LocalStorage
();
let
storage
=
new
LocalStorage
();
storage
[
'
PropA
'
]
=
47
;
storage
[
'
PropA
'
]
=
47
;
// 使LocalStorage可从@Component组件访问
// 使LocalStorage可从@Component组件访问
@
Entry
(
storage
)
@
Entry
(
storage
)
@
Component
@
Component
struct
CompA
{
struct
CompA
{
// @LocalStorageProp变量装饰器与LocalStorage中的'PropA'属性建立单向绑定
// @LocalStorageProp变量装饰器与LocalStorage中的'PropA'属性建立单向绑定
@
LocalStorageProp
(
'
PropA
'
)
storProp1
:
number
=
1
;
@
LocalStorageProp
(
'
PropA
'
)
storProp1
:
number
=
1
;
build
()
{
build
()
{
Column
({
space
:
15
})
{
Column
({
space
:
15
})
{
// 点击后从47开始加1,只改变当前组件显示的storProp1,不会同步到LocalStorage中
// 点击后从47开始加1,只改变当前组件显示的storProp1,不会同步到LocalStorage中
Button
(
`Parent from LocalStorage
${
this
.
storProp1
}
`
)
Button
(
`Parent from LocalStorage
${
this
.
storProp1
}
`
)
.
onClick
(()
=>
this
.
storProp1
+=
1
)
.
onClick
(()
=>
this
.
storProp1
+=
1
)
Child
()
Child
()
}
}
}
}
}
}
@
Component
@
Component
struct
Child
{
struct
Child
{
// @LocalStorageProp变量装饰器与LocalStorage中的'PropA'属性建立单向绑定
// @LocalStorageProp变量装饰器与LocalStorage中的'PropA'属性建立单向绑定
@
LocalStorageProp
(
'
PropA
'
)
storProp2
:
number
=
2
;
@
LocalStorageProp
(
'
PropA
'
)
storProp2
:
number
=
2
;
build
()
{
build
()
{
Column
({
space
:
15
})
{
Column
({
space
:
15
})
{
// 当CompA改变时,当前storProp2不会改变,显示47
// 当CompA改变时,当前storProp2不会改变,显示47
Text
(
`Parent from LocalStorage
${
this
.
storProp2
}
`
)
Text
(
`Parent from LocalStorage
${
this
.
storProp2
}
`
)
}
}
}
}
}
}
```
```
...
...
zh-cn/application-dev/quick-start/arkts-mvvm.md
浏览文件 @
cb277bf6
...
@@ -125,7 +125,7 @@ ViewModel通常包含多个顶层数据源。\@State和\@Provide装饰的变量
...
@@ -125,7 +125,7 @@ ViewModel通常包含多个顶层数据源。\@State和\@Provide装饰的变量
```
ts
```
ts
@
Component
@
Component
struct
LinkLinkChild
{
struct
LinkLinkChild
{
@
Link
@
Watch
(
"
testNumChange
"
)
testNumGrand
:
number
;
@
Link
@
Watch
(
"
testNumChange
"
)
testNumGrand
:
number
=
0
;
testNumChange
(
propName
:
string
):
void
{
testNumChange
(
propName
:
string
):
void
{
console
.
log
(
`LinkLinkChild: testNumGrand value
${
this
.
testNumGrand
}
`
);
console
.
log
(
`LinkLinkChild: testNumGrand value
${
this
.
testNumGrand
}
`
);
...
@@ -139,7 +139,7 @@ ViewModel通常包含多个顶层数据源。\@State和\@Provide装饰的变量
...
@@ -139,7 +139,7 @@ ViewModel通常包含多个顶层数据源。\@State和\@Provide装饰的变量
@
Component
@
Component
struct
PropLinkChild
{
struct
PropLinkChild
{
@
Prop
@
Watch
(
"
testNumChange
"
)
testNumGrand
:
number
;
@
Prop
@
Watch
(
"
testNumChange
"
)
testNumGrand
:
number
=
0
;
testNumChange
(
propName
:
string
):
void
{
testNumChange
(
propName
:
string
):
void
{
console
.
log
(
`PropLinkChild: testNumGrand value
${
this
.
testNumGrand
}
`
);
console
.
log
(
`PropLinkChild: testNumGrand value
${
this
.
testNumGrand
}
`
);
...
@@ -175,7 +175,7 @@ ViewModel通常包含多个顶层数据源。\@State和\@Provide装饰的变量
...
@@ -175,7 +175,7 @@ ViewModel通常包含多个顶层数据源。\@State和\@Provide装饰的变量
```
ts
```
ts
@
Component
@
Component
struct
LinkLinkChild
{
struct
LinkLinkChild
{
@
Link
@
Watch
(
"
testNumChange
"
)
testNumGrand
:
number
;
@
Link
@
Watch
(
"
testNumChange
"
)
testNumGrand
:
number
=
0
;
testNumChange
(
propName
:
string
):
void
{
testNumChange
(
propName
:
string
):
void
{
console
.
log
(
`LinkLinkChild: testNumGrand value
${
this
.
testNumGrand
}
`
);
console
.
log
(
`LinkLinkChild: testNumGrand value
${
this
.
testNumGrand
}
`
);
...
@@ -189,7 +189,7 @@ ViewModel通常包含多个顶层数据源。\@State和\@Provide装饰的变量
...
@@ -189,7 +189,7 @@ ViewModel通常包含多个顶层数据源。\@State和\@Provide装饰的变量
@
Component
@
Component
struct
PropLinkChild
{
struct
PropLinkChild
{
@
Prop
@
Watch
(
"
testNumChange
"
)
testNumGrand
:
number
;
@
Prop
@
Watch
(
"
testNumChange
"
)
testNumGrand
:
number
=
0
;
testNumChange
(
propName
:
string
):
void
{
testNumChange
(
propName
:
string
):
void
{
console
.
log
(
`PropLinkChild: testNumGrand value
${
this
.
testNumGrand
}
`
);
console
.
log
(
`PropLinkChild: testNumGrand value
${
this
.
testNumGrand
}
`
);
...
@@ -277,7 +277,7 @@ ViewModel通常包含多个顶层数据源。\@State和\@Provide装饰的变量
...
@@ -277,7 +277,7 @@ ViewModel通常包含多个顶层数据源。\@State和\@Provide装饰的变量
```
ts
```
ts
@
Component
@
Component
struct
LinkLinkChild
{
struct
LinkLinkChild
{
@
Consume
@
Watch
(
"
testNumChange
"
)
testNum
:
number
;
@
Consume
@
Watch
(
"
testNumChange
"
)
testNum
:
number
=
0
;
testNumChange
(
propName
:
string
):
void
{
testNumChange
(
propName
:
string
):
void
{
console
.
log
(
`LinkLinkChild: testNum value
${
this
.
testNum
}
`
);
console
.
log
(
`LinkLinkChild: testNum value
${
this
.
testNum
}
`
);
...
@@ -290,7 +290,7 @@ struct LinkLinkChild {
...
@@ -290,7 +290,7 @@ struct LinkLinkChild {
@
Component
@
Component
struct
PropLinkChild
{
struct
PropLinkChild
{
@
Prop
@
Watch
(
"
testNumChange
"
)
testNumGrand
:
number
;
@
Prop
@
Watch
(
"
testNumChange
"
)
testNumGrand
:
number
=
0
;
testNumChange
(
propName
:
string
):
void
{
testNumChange
(
propName
:
string
):
void
{
console
.
log
(
`PropLinkChild: testNumGrand value
${
this
.
testNumGrand
}
`
);
console
.
log
(
`PropLinkChild: testNumGrand value
${
this
.
testNumGrand
}
`
);
...
@@ -609,7 +609,7 @@ struct Parent {
...
@@ -609,7 +609,7 @@ struct Parent {
```
ts
```
ts
@
Observed
class
ObservedArray
<
T
>
extends
Array
<
T
>
{
@
Observed
class
ObservedArray
<
T
>
extends
Array
<
T
>
{
constructor
(
args
:
any
[])
{
constructor
(
args
:
T
[])
{
super
(...
args
);
super
(...
args
);
}
}
/* otherwise empty */
/* otherwise empty */
...
@@ -686,10 +686,10 @@ struct ViewB {
...
@@ -686,10 +686,10 @@ struct ViewB {
build
()
{
build
()
{
Column
()
{
Column
()
{
ForEach
(
this
.
arrA
,
ForEach
(
this
.
arrA
,
(
item
)
=>
{
(
item
:
ClassA
)
=>
{
ViewA
({
label
:
`#
${
item
.
id
}
`
,
a
:
item
})
ViewA
({
label
:
`#
${
item
.
id
}
`
,
a
:
item
})
},
},
(
item
)
=>
item
.
id
.
toString
()
(
item
:
ClassA
)
=>
item
.
id
.
toString
()
)
)
Divider
().
height
(
10
)
Divider
().
height
(
10
)
...
@@ -875,9 +875,9 @@ export class Person {
...
@@ -875,9 +875,9 @@ export class Person {
```
ts
```
ts
@
Observed
@
Observed
export
class
ObservedArray
<
T
>
extends
Array
<
T
>
{
export
class
ObservedArray
<
T
>
extends
Array
<
T
>
{
constructor
(
args
?:
any
[])
{
constructor
(
args
:
T
[])
{
console
.
log
(
`ObservedArray:
${
JSON
.
stringify
(
args
)}
`
)
console
.
log
(
`ObservedArray:
${
JSON
.
stringify
(
args
)}
`
)
if
(
Array
.
isArray
(
args
)
)
{
if
(
args
instanceof
Array
)
{
super
(...
args
);
super
(...
args
);
}
else
{
}
else
{
super
(
args
)
super
(
args
)
...
@@ -916,13 +916,12 @@ export class ObservedArray<T> extends Array<T> {
...
@@ -916,13 +916,12 @@ export class ObservedArray<T> extends Array<T> {
Divider
().
height
(
8
)
Divider
().
height
(
8
)
ForEach
(
this
.
contacts
,
ForEach
(
this
.
contacts
,
(
contact
:
Person
)
=>
{
contact
=>
{
PersonView
({
person
:
contact
,
phones
:
contact
.
phones
as
ObservedArray
<
string
>
,
selectedPerson
:
this
.
$selectedPerson
})
PersonView
({
person
:
contact
,
phones
:
contact
.
phones
,
selectedPerson
:
this
.
$selectedPerson
})
},
},
(
contact
:
Person
)
=>
contact
.
id_
contact
=>
contact
.
id_
)
)
Divider
().
height
(
8
)
Divider
().
height
(
8
)
Text
(
"
Edit:
"
)
Text
(
"
Edit:
"
)
...
@@ -971,7 +970,7 @@ export class ObservedArray<T> extends Array<T> {
...
@@ -971,7 +970,7 @@ export class ObservedArray<T> extends Array<T> {
build
()
{
build
()
{
Flex
({
direction
:
FlexDirection
.
Row
,
justifyContent
:
FlexAlign
.
SpaceBetween
})
{
Flex
({
direction
:
FlexDirection
.
Row
,
justifyContent
:
FlexAlign
.
SpaceBetween
})
{
Text
(
this
.
person
.
name
)
Text
(
this
.
person
.
name
)
if
(
this
.
phones
.
length
)
{
if
(
this
.
phones
.
length
>
0
)
{
Text
(
this
.
phones
[
0
])
Text
(
this
.
phones
[
0
])
}
}
}
}
...
@@ -1005,12 +1004,12 @@ export class ObservedArray<T> extends Array<T> {
...
@@ -1005,12 +1004,12 @@ export class ObservedArray<T> extends Array<T> {
@Link selectedPerson: Person;
@Link selectedPerson: Person;
/*在本地副本上编辑,直到点击保存*/
/*在本地副本上编辑,直到点击保存*/
@Prop name: string;
@Prop name: string
= ""
;
@Prop address : Address;
@Prop address : Address
= new Address("", 0, "")
;
@Prop phones : ObservedArray<string>;
@Prop phones : ObservedArray<string>
= []
;
selectedPersonIndex() : number {
selectedPersonIndex() : number {
return this.addrBook.contacts.findIndex((person) => person.id_ == this.selectedPerson.id_);
return this.addrBook.contacts.findIndex((person
: Person
) => person.id_ == this.selectedPerson.id_);
}
}
build() {
build() {
...
@@ -1031,24 +1030,24 @@ export class ObservedArray<T> extends Array<T> {
...
@@ -1031,24 +1030,24 @@ export class ObservedArray<T> extends Array<T> {
TextInput({text: this.address.zip.toString()})
TextInput({text: this.address.zip.toString()})
.onChange((value) => {
.onChange((value) => {
const result = parseInt(value);
const result =
Number.
parseInt(value);
this.address.zip= isNaN(result) ? 0 : result;
this.address.zip=
Number.
isNaN(result) ? 0 : result;
})
})
if
(this.phones.length>
0) {
if
(this.phones.length >
0) {
ForEach(this.phones,
ForEach(this.phones,
(phone, index
) => {
(phone: ResourceStr, index?:number
) => {
TextInput({text: phone
})
TextInput({ text: phone
})
.width(150)
.width(150)
.onChange((value) => {
.onChange((value) => {
console.log(`
${index}. ${value} value has changed
`)
console.log(`
${index}. ${value} value has changed
`)
this.phones[index
] = value;
this.phones[index!
] = value;
})
})
},
},
(phone, index
) => `
${index}-${phone}
`
(phone: ResourceStr, index?:number
) => `
${index}-${phone}
`
)
)
}
}
Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) {
Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) {
Text("Save Changes")
Text("Save Changes")
.onClick(() => {
.onClick(() => {
...
@@ -1103,25 +1102,25 @@ export class ObservedArray<T> extends Array<T> {
...
@@ -1103,25 +1102,25 @@ export class ObservedArray<T> extends Array<T> {
// ViewModel classes
// ViewModel classes
let nextId = 0;
let nextId = 0;
@Observed
@Observed
export class ObservedArray<T> extends Array<T> {
export class ObservedArray<T> extends Array<T> {
constructor(args
?: any
[]) {
constructor(args
: T
[]) {
console.log(`
ObservedArray: ${JSON.stringify(args)}
`)
console.log(`
ObservedArray: ${JSON.stringify(args)}
`)
if (
Array.isArray(args)
) {
if (
args instanceof Array
) {
super(...args);
super(...args);
} else {
} else {
super(args)
super(args)
}
}
}
}
}
}
@Observed
@Observed
export class Address {
export class Address {
street: string;
street: string;
zip: number;
zip: number;
city: string;
city: string;
constructor(street: string,
constructor(street: string,
zip: number,
zip: number,
city: string) {
city: string) {
...
@@ -1130,14 +1129,14 @@ export class ObservedArray<T> extends Array<T> {
...
@@ -1130,14 +1129,14 @@ export class ObservedArray<T> extends Array<T> {
this.city = city;
this.city = city;
}
}
}
}
@Observed
@Observed
export class Person {
export class Person {
id_: string;
id_: string;
name: string;
name: string;
address: Address;
address: Address;
phones: ObservedArray<string>;
phones: ObservedArray<string>;
constructor(name: string,
constructor(name: string,
street: string,
street: string,
zip: number,
zip: number,
...
@@ -1154,13 +1153,13 @@ export class ObservedArray<T> extends Array<T> {
...
@@ -1154,13 +1153,13 @@ export class ObservedArray<T> extends Array<T> {
export class AddressBook {
export class AddressBook {
me: Person;
me: Person;
contacts: ObservedArray<Person>;
contacts: ObservedArray<Person>;
constructor(me: Person, contacts: Person[]) {
constructor(me: Person, contacts: Person[]) {
this.me = me;
this.me = me;
this.contacts = new ObservedArray<Person>(contacts);
this.contacts = new ObservedArray<Person>(contacts);
}
}
}
}
//渲染出Person对象的名称和Observed数组<string>中的第一个号码
//渲染出Person对象的名称和Observed数组<string>中的第一个号码
//为了更新电话号码,这里需要@ObjectLink person和@ObjectLink phones,
//为了更新电话号码,这里需要@ObjectLink person和@ObjectLink phones,
//不能使用this.person.phones,内部数组的更改不会被观察到。
//不能使用this.person.phones,内部数组的更改不会被观察到。
...
@@ -1170,7 +1169,7 @@ export class ObservedArray<T> extends Array<T> {
...
@@ -1170,7 +1169,7 @@ export class ObservedArray<T> extends Array<T> {
@ObjectLink person: Person;
@ObjectLink person: Person;
@ObjectLink phones: ObservedArray<string>;
@ObjectLink phones: ObservedArray<string>;
@Link selectedPerson: Person;
@Link selectedPerson: Person;
build() {
build() {
Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) {
Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) {
Text(this.person.name)
Text(this.person.name)
...
@@ -1185,26 +1184,26 @@ export class ObservedArray<T> extends Array<T> {
...
@@ -1185,26 +1184,26 @@ export class ObservedArray<T> extends Array<T> {
})
})
}
}
}
}
// 渲染Person的详细信息
// 渲染Person的详细信息
// @Prop装饰的变量从父组件AddressBookView深拷贝数据,将变化保留在本地, TextInput的变化只会在本地副本上进行修改。
// @Prop装饰的变量从父组件AddressBookView深拷贝数据,将变化保留在本地, TextInput的变化只会在本地副本上进行修改。
// 点击 "Save Changes" 会将所有数据的复制通过@Prop到@Link, 同步到其他组件
// 点击 "Save Changes" 会将所有数据的复制通过@Prop到@Link, 同步到其他组件
@Component
@Component
struct PersonEditView {
struct PersonEditView {
@Consume addrBook: AddressBook;
@Consume addrBook: AddressBook;
/* 指向父组件selectedPerson的引用 */
/* 指向父组件selectedPerson的引用 */
@Link selectedPerson: Person;
@Link selectedPerson: Person;
/*在本地副本上编辑,直到点击保存*/
/*在本地副本上编辑,直到点击保存*/
@Prop name: string;
@Prop name: string
= ""
;
@Prop address: Address;
@Prop address: Address
= new Address("", 0, "")
;
@Prop phones: ObservedArray<string>;
@Prop phones: ObservedArray<string>
= []
;
selectedPersonIndex(): number {
selectedPersonIndex(): number {
return this.addrBook.contacts.findIndex((person) => person.id_ == this.selectedPerson.id_);
return this.addrBook.contacts.findIndex((person
: Person
) => person.id_ == this.selectedPerson.id_);
}
}
build() {
build() {
Column() {
Column() {
TextInput({ text: this.name })
TextInput({ text: this.name })
...
@@ -1215,32 +1214,32 @@ export class ObservedArray<T> extends Array<T> {
...
@@ -1215,32 +1214,32 @@ export class ObservedArray<T> extends Array<T> {
.onChange((value) => {
.onChange((value) => {
this.address.street = value;
this.address.street = value;
})
})
TextInput({ text: this.address.city })
TextInput({ text: this.address.city })
.onChange((value) => {
.onChange((value) => {
this.address.city = value;
this.address.city = value;
})
})
TextInput({ text: this.address.zip.toString() })
TextInput({ text: this.address.zip.toString() })
.onChange((value) => {
.onChange((value) => {
const result = parseInt(value);
const result =
Number.
parseInt(value);
this.address.zip = isNaN(result) ? 0 : result;
this.address.zip =
Number.
isNaN(result) ? 0 : result;
})
})
if (this.phones.length > 0) {
if (this.phones.length > 0) {
ForEach(this.phones,
ForEach(this.phones,
(phone
, index
) => {
(phone
: ResourceStr, index?:number
) => {
TextInput({ text: phone })
TextInput({ text: phone })
.width(150)
.width(150)
.onChange((value) => {
.onChange((value) => {
console.log(`
${index}. ${value} value has changed
`)
console.log(`
${index}. ${value} value has changed
`)
this.phones[index] = value;
this.phones[index
!
] = value;
})
})
},
},
(phone
, index
) => `
${index}-${phone}
`
(phone
: ResourceStr, index?:number
) => `
${index}-${phone}
`
)
)
}
}
Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) {
Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) {
Text("Save Changes")
Text("Save Changes")
.onClick(() => {
.onClick(() => {
...
@@ -1259,49 +1258,48 @@ export class ObservedArray<T> extends Array<T> {
...
@@ -1259,49 +1258,48 @@ export class ObservedArray<T> extends Array<T> {
.onClick(() => {
.onClick(() => {
let index = this.selectedPersonIndex();
let index = this.selectedPersonIndex();
console.log(`
delete contact at index ${index}
`);
console.log(`
delete contact at index ${index}
`);
// 删除当前联系人
// 删除当前联系人
this.addrBook.contacts.splice(index, 1);
this.addrBook.contacts.splice(index, 1);
// 删除当前selectedPerson,选中态前移一位
// 删除当前selectedPerson,选中态前移一位
index = (index < this.addrBook.contacts.length) ? index : index - 1;
index = (index < this.addrBook.contacts.length) ? index : index - 1;
// 如果contract被删除完,则设置me为选中态
// 如果contract被删除完,则设置me为选中态
this.selectedPerson = (index >= 0) ? this.addrBook.contacts[index] : this.addrBook.me;
this.selectedPerson = (index >= 0) ? this.addrBook.contacts[index] : this.addrBook.me;
})
})
}
}
}
}
}
}
}
}
}
}
@Component
@Component
struct AddressBookView {
struct AddressBookView {
@ObjectLink me: Person;
@ObjectLink me: Person;
@ObjectLink contacts: ObservedArray<Person>;
@ObjectLink contacts: ObservedArray<Person>;
@State selectedPerson: Person =
undefined
;
@State selectedPerson: Person =
new Person("", "", 0, "", [])
;
aboutToAppear() {
aboutToAppear() {
this.selectedPerson = this.me;
this.selectedPerson = this.me;
}
}
build() {
build() {
Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Start }) {
Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Start }) {
Text("Me:")
Text("Me:")
PersonView({ person: this.me, phones: this.me.phones, selectedPerson: this.$selectedPerson })
PersonView({ person: this.me, phones: this.me.phones, selectedPerson: this.$selectedPerson })
Divider().height(8)
Divider().height(8)
ForEach(this.contacts,
ForEach(this.contacts, (contact: Person) => {
contact => {
PersonView({ person: contact, phones: contact.phones as ObservedArray<string>, selectedPerson: this.$selectedPerson })
PersonView({ person: contact, phones: contact.phones, selectedPerson: this.$selectedPerson })
},
},
(contact: Person) => contact.id_
contact => contact.id_
)
)
Divider().height(8)
Divider().height(8)
Text("Edit:")
Text("Edit:")
PersonEditView({
PersonEditView({
selectedPerson: this.$selectedPerson,
selectedPerson: this.$selectedPerson,
...
@@ -1313,7 +1311,7 @@ export class ObservedArray<T> extends Array<T> {
...
@@ -1313,7 +1311,7 @@ export class ObservedArray<T> extends Array<T> {
.borderStyle(BorderStyle.Solid).borderWidth(5).borderColor(0xAFEEEE).borderRadius(5)
.borderStyle(BorderStyle.Solid).borderWidth(5).borderColor(0xAFEEEE).borderRadius(5)
}
}
}
}
@Entry
@Entry
@Component
@Component
struct PageEntry {
struct PageEntry {
...
@@ -1324,7 +1322,7 @@ export class ObservedArray<T> extends Array<T> {
...
@@ -1324,7 +1322,7 @@ export class ObservedArray<T> extends Array<T> {
new Person("Sam", "Itamerenkatu 9", 180, "Helsinki", ["18*********", "18*********"]),
new Person("Sam", "Itamerenkatu 9", 180, "Helsinki", ["18*********", "18*********"]),
new Person("Vivi", "Itamerenkatu 9", 180, "Helsinki", ["18*********", "18*********"]),
new Person("Vivi", "Itamerenkatu 9", 180, "Helsinki", ["18*********", "18*********"]),
]);
]);
build() {
build() {
Column() {
Column() {
AddressBookView({ me: this.addrBook.me, contacts: this.addrBook.contacts, selectedPerson: this.addrBook.me })
AddressBookView({ me: this.addrBook.me, contacts: this.addrBook.contacts, selectedPerson: this.addrBook.me })
...
...
zh-cn/application-dev/quick-start/arkts-state-management-best-practices.md
浏览文件 @
cb277bf6
...
@@ -41,7 +41,7 @@ struct LinkChild {
...
@@ -41,7 +41,7 @@ struct LinkChild {
@
Component
@
Component
struct
PropChild2
{
struct
PropChild2
{
@
Prop
testNum
:
ClassA
;
@
Prop
testNum
:
ClassA
=
new
ClassA
(
0
)
;
build
()
{
build
()
{
Text
(
`PropChild2 testNum
${
this
.
testNum
.
c
}
`
)
Text
(
`PropChild2 testNum
${
this
.
testNum
.
c
}
`
)
...
@@ -53,7 +53,7 @@ struct PropChild2 {
...
@@ -53,7 +53,7 @@ struct PropChild2 {
@
Component
@
Component
struct
PropChild3
{
struct
PropChild3
{
@
Prop
testNum
:
ClassA
;
@
Prop
testNum
:
ClassA
=
new
ClassA
(
0
)
;
build
()
{
build
()
{
Text
(
`PropChild3 testNum
${
this
.
testNum
.
c
}
`
)
Text
(
`PropChild3 testNum
${
this
.
testNum
.
c
}
`
)
...
@@ -460,10 +460,10 @@ struct ParentComp {
...
@@ -460,10 +460,10 @@ struct ParentComp {
CounterComp
({
value
:
this
.
counter
[
2
]
})
CounterComp
({
value
:
this
.
counter
[
2
]
})
Divider
().
height
(
5
)
Divider
().
height
(
5
)
ForEach
(
this
.
counter
,
ForEach
(
this
.
counter
,
item
=>
{
(
item
:
ParentCounter
)
=>
{
CounterComp
({
value
:
item
})
CounterComp
({
value
:
item
})
},
},
item
=>
item
.
id
.
toString
()
(
item
:
ParentCounter
)
=>
item
.
id
.
toString
()
)
)
Divider
().
height
(
5
)
Divider
().
height
(
5
)
// 第一个点击事件
// 第一个点击事件
...
@@ -576,10 +576,10 @@ struct ParentComp {
...
@@ -576,10 +576,10 @@ struct ParentComp {
CounterComp
({
value
:
this
.
counter
[
2
],
subValue
:
this
.
counter
[
2
].
subCounter
})
CounterComp
({
value
:
this
.
counter
[
2
],
subValue
:
this
.
counter
[
2
].
subCounter
})
Divider
().
height
(
5
)
Divider
().
height
(
5
)
ForEach
(
this
.
counter
,
ForEach
(
this
.
counter
,
item
=>
{
(
item
:
ParentCounter
)
=>
{
CounterComp
({
value
:
item
,
subValue
:
item
.
subCounter
})
CounterComp
({
value
:
item
,
subValue
:
item
.
subCounter
})
},
},
item
=>
item
.
id
.
toString
()
(
item
:
ParentCounter
)
=>
item
.
id
.
toString
()
)
)
Divider
().
height
(
5
)
Divider
().
height
(
5
)
Text
(
'
Parent: reset entire counter
'
)
Text
(
'
Parent: reset entire counter
'
)
...
@@ -673,10 +673,10 @@ struct ParentComp {
...
@@ -673,10 +673,10 @@ struct ParentComp {
CounterComp
({
value
:
this
.
counter
[
2
],
subValue
:
this
.
counter
[
2
].
subCounter
})
CounterComp
({
value
:
this
.
counter
[
2
],
subValue
:
this
.
counter
[
2
].
subCounter
})
Divider
().
height
(
5
)
Divider
().
height
(
5
)
ForEach
(
this
.
counter
,
ForEach
(
this
.
counter
,
item
=>
{
(
item
:
ParentCounter
)
=>
{
CounterComp
({
value
:
item
,
subValue
:
item
.
subCounter
})
CounterComp
({
value
:
item
,
subValue
:
item
.
subCounter
})
},
},
item
=>
item
.
id
.
toString
()
(
item
:
ParentCounter
)
=>
item
.
id
.
toString
()
)
)
Divider
().
height
(
5
)
Divider
().
height
(
5
)
Text
(
'
Parent: reset entire counter
'
)
Text
(
'
Parent: reset entire counter
'
)
...
@@ -754,6 +754,37 @@ struct CounterComp {
...
@@ -754,6 +754,37 @@ struct CounterComp {
```
ts
```
ts
let
nextId
=
1
;
@
Observed
class
SubCounter
{
counter
:
number
;
constructor
(
c
:
number
)
{
this
.
counter
=
c
;
}
}
@
Observed
class
ParentCounter
{
id
:
number
;
counter
:
number
;
subCounter
:
SubCounter
;
incrCounter
()
{
this
.
counter
++
;
}
incrSubCounter
(
c
:
number
)
{
this
.
subCounter
.
counter
+=
c
;
}
setSubCounter
(
c
:
number
):
void
{
this
.
subCounter
.
counter
=
c
;
}
constructor
(
c
:
number
)
{
this
.
id
=
nextId
++
;
this
.
counter
=
c
;
this
.
subCounter
=
new
SubCounter
(
c
);
}
}
@
Component
@
Component
struct
SubCounterComp
{
struct
SubCounterComp
{
@
ObjectLink
subValue
:
SubCounter
;
@
ObjectLink
subValue
:
SubCounter
;
...
@@ -767,7 +798,7 @@ struct SubCounterComp {
...
@@ -767,7 +798,7 @@ struct SubCounterComp {
}
}
@
Component
@
Component
struct
CounterComp
{
struct
CounterComp
{
@
Prop
value
:
ParentCounter
;
@
ObjectLink
value
:
ParentCounter
;
build
()
{
build
()
{
Column
({
space
:
10
})
{
Column
({
space
:
10
})
{
Text
(
`this.value.incrCounter(): this.value.counter:
${
this
.
value
.
counter
}
`
)
Text
(
`this.value.incrCounter(): this.value.counter:
${
this
.
value
.
counter
}
`
)
...
@@ -798,10 +829,10 @@ struct ParentComp {
...
@@ -798,10 +829,10 @@ struct ParentComp {
CounterComp
({
value
:
this
.
counter
[
2
]
})
CounterComp
({
value
:
this
.
counter
[
2
]
})
Divider
().
height
(
5
)
Divider
().
height
(
5
)
ForEach
(
this
.
counter
,
ForEach
(
this
.
counter
,
item
=>
{
(
item
:
ParentCounter
)
=>
{
CounterComp
({
value
:
item
})
CounterComp
({
value
:
item
})
},
},
item
=>
item
.
id
.
toString
()
(
item
:
ParentCounter
)
=>
item
.
id
.
toString
()
)
)
Divider
().
height
(
5
)
Divider
().
height
(
5
)
Text
(
'
Parent: reset entire counter
'
)
Text
(
'
Parent: reset entire counter
'
)
...
@@ -949,15 +980,18 @@ struct CompA {
...
@@ -949,15 +980,18 @@ struct CompA {
realState1
:
Array
<
number
>
=
[
4
,
1
,
3
,
2
];
// 未使用状态变量装饰器
realState1
:
Array
<
number
>
=
[
4
,
1
,
3
,
2
];
// 未使用状态变量装饰器
realState2
:
Color
=
Color
.
Yellow
;
realState2
:
Color
=
Color
.
Yellow
;
updateUI
(
param
:
any
):
any
{
updateUI1
(
param
:
Array
<
number
>
):
Array
<
number
>
{
const
triggerAGet
=
this
.
needsUpdate
;
return
param
;
}
updateUI2
(
param
:
Color
):
Color
{
const
triggerAGet
=
this
.
needsUpdate
;
const
triggerAGet
=
this
.
needsUpdate
;
return
param
;
return
param
;
}
}
build
()
{
build
()
{
Column
({
space
:
20
})
{
Column
({
space
:
20
})
{
ForEach
(
this
.
updateUI
(
this
.
realState1
),
ForEach
(
this
.
updateUI
1
(
this
.
realState1
),
item
=>
{
(
item
:
Array
<
number
>
)
=>
{
Text
(
`
${
item
}
`
)
Text
(
`
${
item
}
`
)
})
})
Text
(
"
add item
"
)
Text
(
"
add item
"
)
...
@@ -976,7 +1010,7 @@ struct CompA {
...
@@ -976,7 +1010,7 @@ struct CompA {
// 触发UI视图更新
// 触发UI视图更新
this
.
needsUpdate
=
!
this
.
needsUpdate
;
this
.
needsUpdate
=
!
this
.
needsUpdate
;
})
})
}.
backgroundColor
(
this
.
updateUI
(
this
.
realState2
))
}.
backgroundColor
(
this
.
updateUI
2
(
this
.
realState2
))
.
width
(
200
).
height
(
500
)
.
width
(
200
).
height
(
500
)
}
}
}
}
...
@@ -1005,7 +1039,7 @@ struct CompA {
...
@@ -1005,7 +1039,7 @@ struct CompA {
build
()
{
build
()
{
Column
({
space
:
20
})
{
Column
({
space
:
20
})
{
ForEach
(
this
.
realState1
,
ForEach
(
this
.
realState1
,
item
=>
{
(
item
:
Array
<
number
>
)
=>
{
Text
(
`
${
item
}
`
)
Text
(
`
${
item
}
`
)
})
})
Text
(
"
add item
"
)
Text
(
"
add item
"
)
...
@@ -1108,7 +1142,7 @@ struct Parent {
...
@@ -1108,7 +1142,7 @@ struct Parent {
@
Component
@
Component
struct
Child
{
struct
Child
{
@
Prop
voteOne
:
ClassE
@
ObjectLink
voteOne
:
ClassE
build
()
{
build
()
{
Column
()
{
Column
()
{
Text
(
this
.
voteOne
.
name
).
fontSize
(
24
).
fontColor
(
Color
.
Red
).
margin
(
50
)
Text
(
this
.
voteOne
.
name
).
fontSize
(
24
).
fontColor
(
Color
.
Red
).
margin
(
50
)
...
@@ -1123,7 +1157,7 @@ struct Child {
...
@@ -1123,7 +1157,7 @@ struct Child {
@
Component
@
Component
struct
ChildOne
{
struct
ChildOne
{
@
Prop
voteTwo
:
ClassD
@
ObjectLink
voteTwo
:
ClassD
build
()
{
build
()
{
Column
()
{
Column
()
{
Text
(
this
.
voteTwo
.
name
).
fontSize
(
24
).
fontColor
(
Color
.
Red
).
margin
(
50
)
Text
(
this
.
voteTwo
.
name
).
fontSize
(
24
).
fontColor
(
Color
.
Red
).
margin
(
50
)
...
@@ -1138,7 +1172,7 @@ struct ChildOne {
...
@@ -1138,7 +1172,7 @@ struct ChildOne {
@
Component
@
Component
struct
ChildTwo
{
struct
ChildTwo
{
@
Prop
voteThree
:
ClassC
@
ObjectLink
voteThree
:
ClassC
build
()
{
build
()
{
Column
()
{
Column
()
{
Text
(
this
.
voteThree
.
name
).
fontSize
(
24
).
fontColor
(
Color
.
Red
).
margin
(
50
)
Text
(
this
.
voteThree
.
name
).
fontSize
(
24
).
fontColor
(
Color
.
Red
).
margin
(
50
)
...
@@ -1153,7 +1187,7 @@ struct ChildTwo {
...
@@ -1153,7 +1187,7 @@ struct ChildTwo {
@
Component
@
Component
struct
ChildThree
{
struct
ChildThree
{
@
Prop
voteFour
:
ClassB
@
ObjectLink
voteFour
:
ClassB
build
()
{
build
()
{
Column
()
{
Column
()
{
Text
(
this
.
voteFour
.
name
).
fontSize
(
24
).
fontColor
(
Color
.
Red
).
margin
(
50
)
Text
(
this
.
voteFour
.
name
).
fontSize
(
24
).
fontColor
(
Color
.
Red
).
margin
(
50
)
...
@@ -1168,7 +1202,7 @@ struct ChildThree {
...
@@ -1168,7 +1202,7 @@ struct ChildThree {
@
Component
@
Component
struct
ChildFour
{
struct
ChildFour
{
@
Prop
voteFive
:
ClassA
@
ObjectLink
voteFive
:
ClassA
build
()
{
build
()
{
Column
()
{
Column
()
{
Text
(
this
.
voteFive
.
title
).
fontSize
(
24
).
fontColor
(
Color
.
Red
).
margin
(
50
)
Text
(
this
.
voteFive
.
title
).
fontSize
(
24
).
fontColor
(
Color
.
Red
).
margin
(
50
)
...
@@ -1245,6 +1279,59 @@ class ClassE {
...
@@ -1245,6 +1279,59 @@ class ClassE {
以下组件层次结构呈现的是@Reusable组件复用场景的数据结构。
以下组件层次结构呈现的是@Reusable组件复用场景的数据结构。
```
ts
```
ts
// 以下是嵌套类对象的数据结构。
@
Observed
class
ClassA
{
public
title
:
string
;
constructor
(
title
:
string
)
{
this
.
title
=
title
;
}
}
@
Observed
class
ClassB
{
public
name
:
string
;
public
a
:
ClassA
;
constructor
(
name
:
string
,
a
:
ClassA
)
{
this
.
name
=
name
;
this
.
a
=
a
;
}
}
@
Observed
class
ClassC
{
public
name
:
string
;
public
b
:
ClassB
;
constructor
(
name
:
string
,
b
:
ClassB
)
{
this
.
name
=
name
;
this
.
b
=
b
;
}
}
@
Observed
class
ClassD
{
public
name
:
string
;
public
c
:
ClassC
;
constructor
(
name
:
string
,
c
:
ClassC
)
{
this
.
name
=
name
;
this
.
c
=
c
;
}
}
@
Observed
class
ClassE
{
public
name
:
string
;
public
d
:
ClassD
;
constructor
(
name
:
string
,
d
:
ClassD
)
{
this
.
name
=
name
;
this
.
d
=
d
;
}
}
@
Entry
@
Entry
@
Component
@
Component
struct
Parent
{
struct
Parent
{
...
@@ -1266,9 +1353,9 @@ struct Parent {
...
@@ -1266,9 +1353,9 @@ struct Parent {
@
Component
@
Component
struct
Child
{
struct
Child
{
@
State
voteOne
:
ClassE
=
new
ClassE
(
'
voteOne
'
,
new
ClassD
(
'
OpenHarmony
'
,
new
ClassC
(
'
Hello
'
,
new
ClassB
(
'
World
'
,
new
ClassA
(
'
Peace
'
)))))
@
State
voteOne
:
ClassE
=
new
ClassE
(
'
voteOne
'
,
new
ClassD
(
'
OpenHarmony
'
,
new
ClassC
(
'
Hello
'
,
new
ClassB
(
'
World
'
,
new
ClassA
(
'
Peace
'
)))))
aboutToReuse
(
params
){
this
.
voteOne
=
params
aboutToReuse
(
params
:
ClassE
)
{
this
.
voteOne
=
params
}
}
build
()
{
build
()
{
Column
()
{
Column
()
{
...
@@ -1287,7 +1374,7 @@ struct Child {
...
@@ -1287,7 +1374,7 @@ struct Child {
@
Component
@
Component
struct
ChildOne
{
struct
ChildOne
{
@
State
voteTwo
:
ClassD
=
new
ClassD
(
'
voteTwo
'
,
new
ClassC
(
'
Hello
'
,
new
ClassB
(
'
World
'
,
new
ClassA
(
'
Peace
'
))))
@
State
voteTwo
:
ClassD
=
new
ClassD
(
'
voteTwo
'
,
new
ClassC
(
'
Hello
'
,
new
ClassB
(
'
World
'
,
new
ClassA
(
'
Peace
'
))))
aboutToReuse
(
params
){
aboutToReuse
(
params
:
ClassD
){
this
.
voteTwo
=
params
this
.
voteTwo
=
params
}
}
build
()
{
build
()
{
...
@@ -1307,7 +1394,7 @@ struct ChildOne {
...
@@ -1307,7 +1394,7 @@ struct ChildOne {
@
Component
@
Component
struct
ChildTwo
{
struct
ChildTwo
{
@
State
voteThree
:
ClassC
=
new
ClassC
(
'
voteThree
'
,
new
ClassB
(
'
World
'
,
new
ClassA
(
'
Peace
'
)))
@
State
voteThree
:
ClassC
=
new
ClassC
(
'
voteThree
'
,
new
ClassB
(
'
World
'
,
new
ClassA
(
'
Peace
'
)))
aboutToReuse
(
params
){
aboutToReuse
(
params
:
ClassC
){
this
.
voteThree
=
params
this
.
voteThree
=
params
}
}
...
@@ -1328,7 +1415,7 @@ struct ChildTwo {
...
@@ -1328,7 +1415,7 @@ struct ChildTwo {
@
Component
@
Component
struct
ChildThree
{
struct
ChildThree
{
@
State
voteFour
:
ClassB
=
new
ClassB
(
'
voteFour
'
,
new
ClassA
(
'
Peace
'
))
@
State
voteFour
:
ClassB
=
new
ClassB
(
'
voteFour
'
,
new
ClassA
(
'
Peace
'
))
aboutToReuse
(
params
){
aboutToReuse
(
params
:
ClassB
){
this
.
voteFour
=
params
this
.
voteFour
=
params
}
}
...
@@ -1349,7 +1436,7 @@ struct ChildThree {
...
@@ -1349,7 +1436,7 @@ struct ChildThree {
@
Component
@
Component
struct
ChildFour
{
struct
ChildFour
{
@
State
voteFive
:
ClassA
=
new
ClassA
(
'
voteFive
'
)
@
State
voteFive
:
ClassA
=
new
ClassA
(
'
voteFive
'
)
aboutToReuse
(
params
){
aboutToReuse
(
params
:
ClassA
){
this
.
voteFive
=
params
this
.
voteFive
=
params
}
}
...
...
zh-cn/application-dev/quick-start/har-package.md
浏览文件 @
cb277bf6
...
@@ -75,7 +75,7 @@ index.ets文件是HAR导出声明文件的入口,HAR需要导出的接口,
...
@@ -75,7 +75,7 @@ index.ets文件是HAR导出声明文件的入口,HAR需要导出的接口,
```
```
### 导出ArkUI组件
### 导出ArkUI组件
ArkUI组件的导出方式与ts的导出方式一致,通过
`export`
导出ArkUI组件,示例如下:
ArkUI组件的导出方式与ts的导出方式一致,通过
`export`
导出ArkUI组件,示例如下:
```
j
s
```
t
s
// library/src/main/ets/components/MainPage/MainPage.ets
// library/src/main/ets/components/MainPage/MainPage.ets
@
Component
@
Component
export
struct
MainPage
{
export
struct
MainPage
{
...
@@ -94,13 +94,13 @@ export struct MainPage {
...
@@ -94,13 +94,13 @@ export struct MainPage {
}
}
```
```
HAR对外暴露的接口,在index.ets导出文件中声明如下所示:
HAR对外暴露的接口,在index.ets导出文件中声明如下所示:
```
j
s
```
t
s
// library/index.ets
// library/index.ets
export
{
MainPage
}
from
'
./src/main/ets/components/MainPage/MainPage
'
export
{
MainPage
}
from
'
./src/main/ets/components/MainPage/MainPage
'
```
```
### 导出ts类和方法
### 导出ts类和方法
通过
`export`
导出ts类和方法,支持导出多个ts类和方法,示例如下所示:
通过
`export`
导出ts类和方法,支持导出多个ts类和方法,示例如下所示:
```
j
s
```
t
s
// library/src/main/ts/test.ets
// library/src/main/ts/test.ets
export
class
Log
{
export
class
Log
{
static
info
(
msg
:
string
)
{
static
info
(
msg
:
string
)
{
...
@@ -117,7 +117,7 @@ export function func2() {
...
@@ -117,7 +117,7 @@ export function func2() {
}
}
```
```
HAR对外暴露的接口,在index.ets导出文件中声明如下所示:
HAR对外暴露的接口,在index.ets导出文件中声明如下所示:
```
j
s
```
t
s
// library/index.ets
// library/index.ets
export
{
Log
}
from
'
./src/main/ts/test
'
export
{
Log
}
from
'
./src/main/ts/test
'
export
{
func
}
from
'
./src/main/ts/test
'
export
{
func
}
from
'
./src/main/ts/test
'
...
@@ -135,7 +135,7 @@ HAR模块编译打包时会把资源打包到HAR中。在编译构建HAP时,De
...
@@ -135,7 +135,7 @@ HAR模块编译打包时会把资源打包到HAR中。在编译构建HAP时,De
### 引用HAR的ArkUI组件
### 引用HAR的ArkUI组件
HAR的依赖配置成功后,可以引用HAR的ArkUI组件。ArkUI组件的导入方式与ts的导入方式一致,通过
`import`
引入HAR导出的ArkUI组件,示例如下所示:
HAR的依赖配置成功后,可以引用HAR的ArkUI组件。ArkUI组件的导入方式与ts的导入方式一致,通过
`import`
引入HAR导出的ArkUI组件,示例如下所示:
```
j
s
```
t
s
// entry/src/main/ets/pages/index.ets
// entry/src/main/ets/pages/index.ets
import
{
MainPage
}
from
"
library
"
import
{
MainPage
}
from
"
library
"
...
@@ -160,7 +160,7 @@ struct Index {
...
@@ -160,7 +160,7 @@ struct Index {
```
```
### 引用HAR的类和方法
### 引用HAR的类和方法
通过
`import`
引用HAR导出的ts类和方法,示例如下所示:
通过
`import`
引用HAR导出的ts类和方法,示例如下所示:
```
j
s
```
t
s
// entry/src/main/ets/pages/index.ets
// entry/src/main/ets/pages/index.ets
import
{
Log
}
from
"
library
"
import
{
Log
}
from
"
library
"
import
{
func
}
from
"
library
"
import
{
func
}
from
"
library
"
...
@@ -186,7 +186,7 @@ struct Index {
...
@@ -186,7 +186,7 @@ struct Index {
```
```
### 引用HAR的资源
### 引用HAR的资源
通过
`$r`
引用HAR中的资源,例如在HAR模块的
`src/main/resources`
里添加字符串资源(在string.json中定义,name:hello_har)和图片资源(icon_har.png),然后在Entry模块中引用该字符串和图片资源的示例如下所示:
通过
`$r`
引用HAR中的资源,例如在HAR模块的
`src/main/resources`
里添加字符串资源(在string.json中定义,name:hello_har)和图片资源(icon_har.png),然后在Entry模块中引用该字符串和图片资源的示例如下所示:
```
j
s
```
t
s
// entry/src/main/ets/pages/index.ets
// entry/src/main/ets/pages/index.ets
@
Entry
@
Entry
@
Component
@
Component
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录