Skip to content

D
Docs

OpenHarmony / Docs
1 年多 前同步成功

通知 159
Star 292
Fork 28
D
Docs
未验证 提交 cb277bf6 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!23771 arkts 告警清理 

Merge pull request !23771 from 耿文广/master
上级 5be5552b 72323198
显示空白变更内容
内联 并排
Showing with 305 addition and 220 deletion
zh-cn/application-dev/quick-start/arkts-builderparam.md
浏览文件 @ cb277bf6
......@@ -34,8 +34,8 @@
- 用父组件自定义构建函数初始化子组件\@BuildParam装饰的方法。
```ts
@Component
struct Child {
@Component
struct Child {
@Builder componentBuilder() {
Text(`Parent builder `)
}
......@@ -47,11 +47,11 @@ struct Child {
this.aBuilder0()
}
}
}
}
@Entry
@Component
struct Parent {
@Entry
@Component
struct Parent {
@Builder componentBuilder() {
Text(`Parent builder `)
}
......@@ -61,7 +61,7 @@ struct Parent {
Child({ aBuilder0: this.componentBuilder })
}
}
}
}
```
......@@ -74,8 +74,8 @@ struct Parent {
> 开发者谨慎使用bind改变函数调用的上下文，可能会使this指向混乱。
```ts
@Component
struct Child {
@Component
struct Child {
@Builder componentBuilder() {
Text(`Child builder `)
}
......@@ -90,11 +90,11 @@ struct Child {
this.aBuilder1()
}
}
}
}
@Entry
@Component
struct Parent {
@Entry
@Component
struct Parent {
label: string = `Parent`
@Builder componentBuilder() {
......@@ -107,7 +107,7 @@ struct Parent {
Child({ aBuilder0: this.componentBuilder, aBuilder1: this.componentBuilder })
}
}
}
}
```
......
zh-cn/application-dev/quick-start/arkts-localstorage.md
浏览文件 @ cb277bf6
......@@ -191,12 +191,12 @@ link1.set(49); // two-way sync: link1.get() == link2.get() == prop.get() == 49
- \@LocalStorageLink绑定LocalStorage对给定的属性，建立双向数据同步。
```ts
// 创建新实例并使用给定对象初始化
let storage = new LocalStorage();
storage['PropA'] = 47;
// 创建新实例并使用给定对象初始化
let storage = new LocalStorage();
storage['PropA'] = 47;
@Component
struct Child {
@Component
struct Child {
// @LocalStorageLink变量装饰器与LocalStorage中的'PropA'属性建立双向绑定
@LocalStorageLink('PropA') storLink2: number = 1;
......@@ -205,11 +205,11 @@ struct Child {
// 更改将同步至LocalStorage中的'PropA'以及Parent.storLink1
.onClick(() => this.storLink2 += 1)
}
}
// 使LocalStorage可从@Component组件访问
@Entry(storage)
@Component
struct CompA {
}
// 使LocalStorage可从@Component组件访问
@Entry(storage)
@Component
struct CompA {
// @LocalStorageLink变量装饰器与LocalStorage中的'PropA'属性建立双向绑定
@LocalStorageLink('PropA') storLink1: number = 1;
......@@ -221,7 +221,7 @@ struct CompA {
Child()
}
}
}
}
```
......@@ -234,14 +234,14 @@ struct CompA {
- Child组件中，Text绑定的storProp2 依旧显示47。
```ts
// 创建新实例并使用给定对象初始化
let storage = new LocalStorage();
storage['PropA'] = 47;
// 创建新实例并使用给定对象初始化
let storage = new LocalStorage();
storage['PropA'] = 47;
// 使LocalStorage可从@Component组件访问
@Entry(storage)
@Component
struct CompA {
// 使LocalStorage可从@Component组件访问
@Entry(storage)
@Component
struct CompA {
// @LocalStorageProp变量装饰器与LocalStorage中的'PropA'属性建立单向绑定
@LocalStorageProp('PropA') storProp1: number = 1;
......@@ -253,10 +253,10 @@ struct CompA {
Child()
}
}
}
}
@Component
struct Child {
@Component
struct Child {
// @LocalStorageProp变量装饰器与LocalStorage中的'PropA'属性建立单向绑定
@LocalStorageProp('PropA') storProp2: number = 2;
......@@ -266,7 +266,7 @@ struct Child {
Text(`Parent from LocalStorage ${this.storProp2}`)
}
}
}
}
```
......
zh-cn/application-dev/quick-start/arkts-mvvm.md
浏览文件 @ cb277bf6
......@@ -125,7 +125,7 @@ ViewModel通常包含多个顶层数据源。\@State和\@Provide装饰的变量
```ts
@Component
struct LinkLinkChild {
@Link @Watch("testNumChange") testNumGrand: number;
@Link @Watch("testNumChange") testNumGrand: number = 0;
testNumChange(propName: string): void {
console.log(`LinkLinkChild: testNumGrand value ${this.testNumGrand}`);
......@@ -139,7 +139,7 @@ ViewModel通常包含多个顶层数据源。\@State和\@Provide装饰的变量
@Component
struct PropLinkChild {
@Prop @Watch("testNumChange") testNumGrand: number;
@Prop @Watch("testNumChange") testNumGrand: number = 0;
testNumChange(propName: string): void {
console.log(`PropLinkChild: testNumGrand value ${this.testNumGrand}`);
......@@ -175,7 +175,7 @@ ViewModel通常包含多个顶层数据源。\@State和\@Provide装饰的变量
```ts
@Component
struct LinkLinkChild {
@Link @Watch("testNumChange") testNumGrand: number;
@Link @Watch("testNumChange") testNumGrand: number = 0;
testNumChange(propName: string): void {
console.log(`LinkLinkChild: testNumGrand value ${this.testNumGrand}`);
......@@ -189,7 +189,7 @@ ViewModel通常包含多个顶层数据源。\@State和\@Provide装饰的变量
@Component
struct PropLinkChild {
@Prop @Watch("testNumChange") testNumGrand: number;
@Prop @Watch("testNumChange") testNumGrand: number = 0;
testNumChange(propName: string): void {
console.log(`PropLinkChild: testNumGrand value ${this.testNumGrand}`);
......@@ -277,7 +277,7 @@ ViewModel通常包含多个顶层数据源。\@State和\@Provide装饰的变量
```ts
@Component
struct LinkLinkChild {
@Consume @Watch("testNumChange") testNum: number;
@Consume @Watch("testNumChange") testNum: number = 0;
testNumChange(propName: string): void {
console.log(`LinkLinkChild: testNum value ${this.testNum}`);
......@@ -290,7 +290,7 @@ struct LinkLinkChild {
@Component
struct PropLinkChild {
@Prop @Watch("testNumChange") testNumGrand: number;
@Prop @Watch("testNumChange") testNumGrand: number = 0;
testNumChange(propName: string): void {
console.log(`PropLinkChild: testNumGrand value ${this.testNumGrand}`);
......@@ -609,7 +609,7 @@ struct Parent {
```ts
@Observed class ObservedArray<T> extends Array<T> {
constructor(args: any[]) {
constructor(args: T[]) {
super(...args);
}
/* otherwise empty */
......@@ -686,10 +686,10 @@ struct ViewB {
build() {
Column() {
ForEach(this.arrA,
(item) => {
(item: ClassA) => {
ViewA({ label: `#${item.id}`, a: item })
},
(item) => item.id.toString()
(item: ClassA) => item.id.toString()
)
Divider().height(10)
......@@ -875,9 +875,9 @@ export class Person {
```ts
@Observed
export class ObservedArray<T> extends Array<T> {
constructor(args?: any[]) {
constructor(args: T[]) {
console.log(`ObservedArray: ${JSON.stringify(args)} `)
if (Array.isArray(args)) {
if (args instanceof Array) {
super(...args);
} else {
super(args)
......@@ -916,11 +916,10 @@ export class ObservedArray<T> extends Array<T> {
Divider().height(8)
ForEach(this.contacts,
contact => {
PersonView({person: contact, phones: contact.phones, selectedPerson: this.$selectedPerson})
ForEach(this.contacts, (contact: Person) => {
PersonView({ person: contact, phones: contact.phones as ObservedArray<string>, selectedPerson: this.$selectedPerson })
},
contact => contact.id_
(contact: Person) => contact.id_
)
Divider().height(8)
......@@ -971,7 +970,7 @@ export class ObservedArray<T> extends Array<T> {
build() {
Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) {
Text(this.person.name)
if (this.phones.length) {
if (this.phones.length > 0) {
Text(this.phones[0])
}
}
......@@ -1005,12 +1004,12 @@ export class ObservedArray<T> extends Array<T> {
@Link selectedPerson: Person;
/*在本地副本上编辑，直到点击保存*/
@Prop name: string;
@Prop address : Address;
@Prop phones : ObservedArray<string>;
@Prop name: string = "";
@Prop address : Address = new Address("", 0, "");
@Prop phones : ObservedArray<string> = [];
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() {
......@@ -1031,21 +1030,21 @@ export class ObservedArray<T> extends Array<T> {
TextInput({text: this.address.zip.toString()})
.onChange((value) => {
const result = parseInt(value);
this.address.zip= isNaN(result) ? 0 : result;
const result = Number.parseInt(value);
this.address.zip= Number.isNaN(result) ? 0 : result;
})
if(this.phones.length>0) {
if (this.phones.length > 0) {
ForEach(this.phones,
(phone, index) => {
TextInput({text: phone})
(phone: ResourceStr, index?:number) => {
TextInput({ text: phone })
.width(150)
.onChange((value) => {
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}`
)
}
......@@ -1106,9 +1105,9 @@ export class ObservedArray<T> extends Array<T> {
@Observed
export class ObservedArray<T> extends Array<T> {
constructor(args?: any[]) {
constructor(args: T[]) {
console.log(`ObservedArray: ${JSON.stringify(args)} `)
if (Array.isArray(args)) {
if (args instanceof Array) {
super(...args);
} else {
super(args)
......@@ -1197,12 +1196,12 @@ export class ObservedArray<T> extends Array<T> {
@Link selectedPerson: Person;
/*在本地副本上编辑，直到点击保存*/
@Prop name: string;
@Prop address: Address;
@Prop phones: ObservedArray<string>;
@Prop name: string = "";
@Prop address: Address = new Address("", 0, "");
@Prop phones: ObservedArray<string> = [];
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() {
......@@ -1223,21 +1222,21 @@ export class ObservedArray<T> extends Array<T> {
TextInput({ text: this.address.zip.toString() })
.onChange((value) => {
const result = parseInt(value);
this.address.zip = isNaN(result) ? 0 : result;
const result = Number.parseInt(value);
this.address.zip = Number.isNaN(result) ? 0 : result;
})
if (this.phones.length > 0) {
ForEach(this.phones,
(phone, index) => {
(phone: ResourceStr, index?:number) => {
TextInput({ text: phone })
.width(150)
.onChange((value) => {
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}`
)
}
......@@ -1280,7 +1279,7 @@ export class ObservedArray<T> extends Array<T> {
struct AddressBookView {
@ObjectLink me: Person;
@ObjectLink contacts: ObservedArray<Person>;
@State selectedPerson: Person = undefined;
@State selectedPerson: Person = new Person("", "", 0, "", []);
aboutToAppear() {
this.selectedPerson = this.me;
......@@ -1293,11 +1292,10 @@ export class ObservedArray<T> extends Array<T> {
Divider().height(8)
ForEach(this.contacts,
contact => {
PersonView({ person: contact, phones: contact.phones, selectedPerson: this.$selectedPerson })
ForEach(this.contacts, (contact: Person) => {
PersonView({ person: contact, phones: contact.phones as ObservedArray<string>, selectedPerson: this.$selectedPerson })
},
contact => contact.id_
(contact: Person) => contact.id_
)
Divider().height(8)
......
zh-cn/application-dev/quick-start/arkts-state-management-best-practices.md
浏览文件 @ cb277bf6
......@@ -41,7 +41,7 @@ struct LinkChild {
@Component
struct PropChild2 {
@Prop testNum: ClassA;
@Prop testNum: ClassA = new ClassA(0);
build() {
Text(`PropChild2 testNum ${this.testNum.c}`)
......@@ -53,7 +53,7 @@ struct PropChild2 {
@Component
struct PropChild3 {
@Prop testNum: ClassA;
@Prop testNum: ClassA = new ClassA(0);
build() {
Text(`PropChild3 testNum ${this.testNum.c}`)
......@@ -460,10 +460,10 @@ struct ParentComp {
CounterComp({ value: this.counter[2] })
Divider().height(5)
ForEach(this.counter,
item => {
(item: ParentCounter) => {
CounterComp({ value: item })
},
item => item.id.toString()
(item: ParentCounter) => item.id.toString()
)
Divider().height(5)
// 第一个点击事件
......@@ -576,10 +576,10 @@ struct ParentComp {
CounterComp({ value: this.counter[2], subValue: this.counter[2].subCounter })
Divider().height(5)
ForEach(this.counter,
item => {
(item: ParentCounter) => {
CounterComp({ value: item, subValue: item.subCounter })
},
item => item.id.toString()
(item: ParentCounter) => item.id.toString()
)
Divider().height(5)
Text('Parent: reset entire counter')
......@@ -673,10 +673,10 @@ struct ParentComp {
CounterComp({ value: this.counter[2], subValue: this.counter[2].subCounter })
Divider().height(5)
ForEach(this.counter,
item => {
(item: ParentCounter) => {
CounterComp({ value: item, subValue: item.subCounter })
},
item => item.id.toString()
(item: ParentCounter) => item.id.toString()
)
Divider().height(5)
Text('Parent: reset entire counter')
......@@ -754,6 +754,37 @@ struct CounterComp {
```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
struct SubCounterComp {
@ObjectLink subValue: SubCounter;
......@@ -767,7 +798,7 @@ struct SubCounterComp {
}
@Component
struct CounterComp {
@Prop value: ParentCounter;
@ObjectLink value: ParentCounter;
build() {
Column({ space: 10 }) {
Text(`this.value.incrCounter(): this.value.counter: ${this.value.counter}`)
......@@ -798,10 +829,10 @@ struct ParentComp {
CounterComp({ value: this.counter[2] })
Divider().height(5)
ForEach(this.counter,
item => {
(item: ParentCounter) => {
CounterComp({ value: item })
},
item => item.id.toString()
(item: ParentCounter) => item.id.toString()
)
Divider().height(5)
Text('Parent: reset entire counter')
......@@ -949,15 +980,18 @@ struct CompA {
realState1: Array<number> = [4, 1, 3, 2]; // 未使用状态变量装饰器
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;
return param;
}
build() {
Column({ space: 20 }) {
ForEach(this.updateUI(this.realState1),
item => {
ForEach(this.updateUI1(this.realState1),
(item: Array<number>) => {
Text(`${item}`)
})
Text("add item")
......@@ -976,7 +1010,7 @@ struct CompA {
// 触发UI视图更新
this.needsUpdate = !this.needsUpdate;
})
}.backgroundColor(this.updateUI(this.realState2))
}.backgroundColor(this.updateUI2(this.realState2))
.width(200).height(500)
}
}
......@@ -1005,7 +1039,7 @@ struct CompA {
build() {
Column({ space: 20 }) {
ForEach(this.realState1,
item => {
(item: Array<number>) => {
Text(`${item}`)
})
Text("add item")
......@@ -1108,7 +1142,7 @@ struct Parent {
@Component
struct Child {
@Prop voteOne: ClassE
@ObjectLink voteOne: ClassE
build() {
Column() {
Text(this.voteOne.name).fontSize(24).fontColor(Color.Red).margin(50)
......@@ -1123,7 +1157,7 @@ struct Child {
@Component
struct ChildOne {
@Prop voteTwo: ClassD
@ObjectLink voteTwo: ClassD
build() {
Column() {
Text(this.voteTwo.name).fontSize(24).fontColor(Color.Red).margin(50)
......@@ -1138,7 +1172,7 @@ struct ChildOne {
@Component
struct ChildTwo {
@Prop voteThree: ClassC
@ObjectLink voteThree: ClassC
build() {
Column() {
Text(this.voteThree.name).fontSize(24).fontColor(Color.Red).margin(50)
......@@ -1153,7 +1187,7 @@ struct ChildTwo {
@Component
struct ChildThree {
@Prop voteFour: ClassB
@ObjectLink voteFour: ClassB
build() {
Column() {
Text(this.voteFour.name).fontSize(24).fontColor(Color.Red).margin(50)
......@@ -1168,7 +1202,7 @@ struct ChildThree {
@Component
struct ChildFour {
@Prop voteFive: ClassA
@ObjectLink voteFive: ClassA
build() {
Column() {
Text(this.voteFive.title).fontSize(24).fontColor(Color.Red).margin(50)
......@@ -1245,6 +1279,59 @@ class ClassE {
以下组件层次结构呈现的是@Reusable组件复用场景的数据结构。
```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
@Component
struct Parent {
......@@ -1266,9 +1353,9 @@ struct Parent {
@Component
struct Child {
@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() {
Column() {
......@@ -1287,7 +1374,7 @@ struct Child {
@Component
struct ChildOne {
@State voteTwo: ClassD = new ClassD('voteTwo', new ClassC('Hello', new ClassB('World', new ClassA('Peace'))))
aboutToReuse(params){
aboutToReuse(params: ClassD){
this.voteTwo = params
}
build() {
......@@ -1307,7 +1394,7 @@ struct ChildOne {
@Component
struct ChildTwo {
@State voteThree: ClassC = new ClassC('voteThree', new ClassB('World', new ClassA('Peace')))
aboutToReuse(params){
aboutToReuse(params: ClassC){
this.voteThree = params
}
......@@ -1328,7 +1415,7 @@ struct ChildTwo {
@Component
struct ChildThree {
@State voteFour: ClassB = new ClassB('voteFour', new ClassA('Peace'))
aboutToReuse(params){
aboutToReuse(params: ClassB){
this.voteFour = params
}
......@@ -1349,7 +1436,7 @@ struct ChildThree {
@Component
struct ChildFour {
@State voteFive: ClassA = new ClassA('voteFive')
aboutToReuse(params){
aboutToReuse(params: ClassA){
this.voteFive = params
}
......
zh-cn/application-dev/quick-start/har-package.md
浏览文件 @ cb277bf6
......@@ -75,7 +75,7 @@ index.ets文件是HAR导出声明文件的入口，HAR需要导出的接口，
```
### 导出ArkUI组件
ArkUI组件的导出方式与ts的导出方式一致，通过`export`导出ArkUI组件，示例如下：
```js
```ts
// library/src/main/ets/components/MainPage/MainPage.ets
@Component
export struct MainPage {
......@@ -94,13 +94,13 @@ export struct MainPage {
}
```
HAR对外暴露的接口，在index.ets导出文件中声明如下所示：
```js
```ts
// library/index.ets
export { MainPage } from './src/main/ets/components/MainPage/MainPage'
```
### 导出ts类和方法
通过`export`导出ts类和方法，支持导出多个ts类和方法，示例如下所示：
```js
```ts
// library/src/main/ts/test.ets
export class Log {
static info(msg: string) {
......@@ -117,7 +117,7 @@ export function func2() {
}
```
HAR对外暴露的接口，在index.ets导出文件中声明如下所示：
```js
```ts
// library/index.ets
export { Log } from './src/main/ts/test'
export { func } from './src/main/ts/test'
......@@ -135,7 +135,7 @@ HAR模块编译打包时会把资源打包到HAR中。在编译构建HAP时，De
### 引用HAR的ArkUI组件
HAR的依赖配置成功后，可以引用HAR的ArkUI组件。ArkUI组件的导入方式与ts的导入方式一致，通过`import`引入HAR导出的ArkUI组件，示例如下所示：
```js
```ts
// entry/src/main/ets/pages/index.ets
import { MainPage } from "library"
......@@ -160,7 +160,7 @@ struct Index {
```
### 引用HAR的类和方法
通过`import`引用HAR导出的ts类和方法，示例如下所示：
```js
```ts
// entry/src/main/ets/pages/index.ets
import { Log } from "library"
import { func } from "library"
......@@ -186,7 +186,7 @@ struct Index {
```
### 引用HAR的资源
通过`$r`引用HAR中的资源，例如在HAR模块的`src/main/resources`里添加字符串资源（在string.json中定义，name：hello_har）和图片资源（icon_har.png），然后在Entry模块中引用该字符串和图片资源的示例如下所示：
```js
```ts
// entry/src/main/ets/pages/index.ets
@Entry
@Component
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或