1# ArkTS Syntax Usage 2 3## How do I dynamically create components using code in ArkUI? 4 5Applicable to: OpenHarmony 3.2 Beta 5 (API version 9) 6 7**Solution** 8 9ArkUI uses the ArkTS declarative development paradigm. Developers cannot hold component instances. During declaration, you can control component creation by rendering control syntax and dynamically building UI elements. 10 11**Example** 12 13``` 14// Create a component using the if statement. 15if(this.isTrue) { 16 Text ("Create Text Component").fontSize (30) 17} 18// Create a component using the ForEach statement. 19ForEach(this.nums,(item) => { 20 Text(item + '').fontSize(30) 21},item => JSON.stringify(item)) 22``` 23 24**Reference** 25 26[Overview of Rendering Control](../quick-start/arkts-rendering-control-overview.md) 27 28## What is the difference between an @Builder decorated method and a regular method? 29 30Applicable to: OpenHarmony 3.2 Beta 5 (API version 9) 31 32**Solution** 33 34The @Builder decorated method allows for use of a custom component, while regular methods do not. If a custom component is used in an @Builder decorated method, it is re-created each time the method is called. 35 36**Reference** 37 38[@BuilderParam](../quick-start/arkts-builderparam.md) 39 40## How do I define @BuilderParam decorated attributes? 41 42Applicable to: OpenHarmony 3.2 Beta 5 (API version 9) 43 44**Solution** 45 46- Without parameters 47 48 If no parameter is passed when assigning a value to the **@BuilderParam** decorated attribute (for example, **content: this.specificParam**), define the type of the attribute as a function without a return value (for example, **@BuilderParam content: \(\) =\> void**). 49 50- With parameters 51 52 If any parameter is passed when assigning a value to the **@BuilderParam** decorated attribute (for example, **callContent: this.specificParam1\("111"\)**), define the type of the attribute as **any** (for example, **@BuilderParam callContent: any**). 53 54 55**Reference** 56 57[@BuilderParam](../quick-start/arkts-builderparam.md) 58 59## How do I listen for object changes in an array? 60 61Applicable to: OpenHarmony 3.2 Beta5 (API version 9) 62 63**Solution** 64 65To listen for object changes in an array, use the @Observed and @ObjectLink decorators. **@Observed** applies to classes, and **@ObjectLink** applies to variables. 66 67**Example** 68 691. Use @Observed on a class. 70 71 ``` 72 @Observed 73 class ClassA { 74 public name: string 75 public c: number 76 public id: number 77 78 constructor(c: number, name: string = 'OK') { 79 this.name = name 80 this.c = c 81 } 82 } 83 ``` 84 852. Use @ObjectLink on a component variable. 86 87 ``` 88 @Component 89 struct ViewA { 90 label: string = 'ViewA1' 91 @ObjectLink a: ClassA 92 93 build() { 94 Row() { 95 Button(`ViewA [${this.label}] this.a.c= ${this.a.c} +1`) 96 .onClick(() => { 97 this.a.c += 1 98 }) 99 }.margin({ top: 10 }) 100 } 101 } 102 ``` 103 104 105**Reference** 106 107[\@Observed and \@ObjectLink: Observing Attribute Changes in Nested Class Objects](../quick-start/arkts-observed-and-objectlink.md) 108 109## How do I transfer values through the parent component to @Link decorated varaibles in a child component? 110 111Applicable to: OpenHarmony 3.2 Beta 5 (API version 9) 112 113**Solution** 114 115To enable a child component to receive the value from the parent component through @Link, '**\$**' must be used to first establish a reference relationship between variables in the child and parent components. 116 117**Example** 118 119The **@Link** semantics are derived from the '**$**' operator. In other words, **\$isPlaying** is the two-way binding of the internal state **this.isPlaying**. When the button in the **PlayButton** child component is touched, the value of the @Link decorated variable is changed, and **PlayButton** together with the **\<Image>** and **\<Text>** components of the parent component is refreshed. Similarly, when the button in the parent component is touched, the value of **this.isPlaying** is changed, and **PlayButton** together with the **\<Text>** and **\<Button>** components of the parent component is refreshed. 120 1211. Use the @State decorator in the parent component and use the '**\$**' operator to create a reference for transferring data. 122 123 ``` 124 @Entry 125 @Component 126 struct Player { 127 @State isPlaying: boolean = false 128 build() { 129 Column() { 130 PlayButton({ buttonPlaying: $isPlaying }) 131 Text(`Player is ${this.isPlaying ? '' : 'not'} playing`).fontSize(18) 132 Button('Parent:' + this.isPlaying) 133 .margin(15) 134 .onClick(() => { 135 this.isPlaying = !this.isPlaying 136 }) 137 } 138 } 139 } 140 141 142 ``` 143 1442. Use @Link in the child component to receive data. 145 146 ``` 147 @Component 148 struct PlayButton { 149 @Link buttonPlaying: boolean 150 151 build() { 152 Column() { 153 Button(this.buttonPlaying ? 'pause' : 'play') 154 .margin(20) 155 .onClick(() => { 156 this.buttonPlaying = !this.buttonPlaying 157 }) 158 } 159 } 160 } 161 ``` 162 163 164**Reference** 165 166[@Link](../quick-start/arkts-link.md) 167 168## How does a component synchronize state with its grandchild components? 169 170Applicable to: OpenHarmony 3.2 Beta 5 (API version 9) 171 172**Solution** 173 174- Method 1 (recommended): Use the @Provide and @Consume decorators. Specifically, use @Provide in the component and @Consume in the grandchild component to implement two-way data binding between the components. 175 176- Method 2: Use the @State and @Link decorators. Specifically, use @State in the parent component and @Link in each layer of child components (child and grandchild components). 177 178**Example 1** 179 1801. Include a child component in the component. Employ @Provide in the component to provide the **reviewVote** parameter to its grandchild component. 181 182 ``` 183 @Entry 184 @Component 185 struct Father{ 186 @Provide("reviewVote") reviewVotes: number = 0; 187 188 build() { 189 Column() { 190 Son() 191 Button(`Father: ${this.reviewVotes}`) 192 ... 193 } 194 } 195 } 196 ``` 197 1982. Include the grandchild component in the child component. 199 200 ``` 201 @Component 202 struct Son{ 203 build() { 204 Column() { 205 GrandSon() 206 } 207 } 208 } 209 ``` 210 2113. Employ @Consume in the grandchild component to receive the **reviewVote** parameter. 212 213 ``` 214 @Component 215 struct GrandSon{ 216 @Consume("reviewVote") reviewVotes: number 217 218 build() { 219 Column() { 220 Button(`GrandSon: ${this.reviewVotes}`) 221 ... 222 }.width('100%') 223 } 224 } 225 ``` 226 227 228**Example 2** 229 2301. Employ @State in the component **Father** to decorate **reviewVote**. 231 232 ``` 233 @Entry 234 @Component 235 struct Father { 236 @State reviewVotes: number = 0; 237 238 build() { 239 Column() { 240 Son({reviewVotes:$reviewVotes}) 241 Button(`Father: ${this.reviewVotes}`) 242 ... 243 } 244 } 245 } 246 ``` 247 2482. Employ @Link in the child component **Son** to receive the **reviewVote** parameter passed from **Father**. 249 250 ``` 251 @Component 252 struct Son{ 253 @Link reviewVotes: number; 254 build() { 255 Column() { 256 Grandson({reviewVotes:$reviewVotes}) 257 } 258 } 259 } 260 261 262 ``` 263 2643. Employ @Link in the grandchild component **GrandSon** to receive the **reviewVote** parameter passed from **Son**. 265 266 ``` 267 @Component 268 struct Grandson{ 269 @Link reviewVotes: number; 270 271 build() { 272 Column() { 273 Button(`Grandson: ${this.reviewVotes}`) 274 ... 275 }.width('100%') 276 } 277 } 278 ``` 279 280 281## How is a callback function defined in JS? 282 283Applicable to: OpenHarmony 3.2 Beta 5 (API version 9) 284 285**Solution** 286 287The following is an example to illustrate how to define a callback function: 288 2891. Define the callback function. 290 291 ``` 292 // Define a callback function that contains two parameters and returns void. 293 myCallback: (a:number,b:string) => void 294 ``` 295 2962. Initialize the callback function by assigning values. 297 298 ``` 299 aboutToAppear() { 300 // Initialize the callback function. 301 this.myCallback= (a,b)=>{ 302 console.info(`handle myCallback a=${a},b=${b}`) 303 }} 304 ``` 305 306 307## How do I maximize performance in cases when a component needs to be updated for multiple times? 308 309Applicable to: OpenHarmony 3.2 Beta 5 (API version 9) 310 311**Solution** 312 313Use the state management module for the purpose. Currently, the minimum update is supported. When the data dependency changes, instead of updating the entire custom component, only the view content that depends on the data is updated. 314 315## How does this of a function in an object point to the outer layer? 316 317Applicable to: OpenHarmony 3.2 Beta 5 (API version 9) 318 319**Solution** 320 321You can use the arrow function for this purpose. 322 323**Example** 324 325``` 326const obj = { 327 start:() => { 328 return this.num 329 } 330} 331``` 332 333## How do I obtain data through an API before page loading? 334 335Applicable to: OpenHarmony 3.2 Beta 5 (API version 9) 336 337**Symptom** 338 339Data needs to be obtained before page rendering so as to be rendered when needed. 340 341**Solution** 342 343In the **aboutToAppear** function, use an asynchronous API to obtain page data and @State to decorate related variables. After the data is obtained, the page is automatically refreshed based on the variables. 344 345**Example** 346 347``` 348@Entry 349@Component 350struct Test6Page { 351 // After the data is obtained, the page is automatically refreshed. 352 @State message: string = 'loading.....' 353 aboutToAppear(){ 354 // Simulate an asynchronous API to obtain data. 355 setTimeout(()=>{ 356 this.message = 'new msg' 357 },3000) 358 } 359 build() { 360 Row() { 361 Column() { 362 Text(this.message) 363 .fontSize(50) 364 .fontWeight(FontWeight.Bold) 365 } 366 .width('100%') 367 } 368 .height('100%') 369 } 370} 371``` 372 373## How do I display sensor data in the \<Text> component on the UI in real time? 374 375Applicable to: OpenHarmony 3.2 Beta5 (API version 9) 376 377**Solution** 378 379The type of data returned by the sensor is double. To display it in the \<Text> component, first convert the data from double to string. 380 381## How do I listen for screen rotation events? 382 383Applicable to: OpenHarmony 3.2 Beta 5 (API version 9) 384 385**Solution** 386 387To listen for screen rotation events, use the **mediaquery** API. 388 389``` 390import mediaquery from '@ohos.mediaquery' 391let listener = mediaquery.matchMediaSync('(orientation: landscape)'); // Listen for landscape events. 392function onPortrait(mediaQueryResult) { 393 if (mediaQueryResult.matches) { 394 // do something here 395 } else { 396 // do something here 397 } 398} 399listener.on('change', onPortrait) // Register a callback. 400listener.off('change', onPortrait) // Deregister a callback. 401``` 402 403**Reference** 404 405[@ohos.mediaquery (Media Query)](../reference/apis/js-apis-mediaquery.md) 406 407## What should I do if a singleton does not take effect after the page is changed? 408 409Applicable to: OpenHarmony 3.2 Beta 5 (API version 9) 410 411**Symptom** 412 413A singleton works only in the same page. It becomes **undefined** when the page changes. 414 415**Solution** 416 417A JS file is generated for each page, and a defined singleton is generated in each JS file. Therefore, the singleton in applicable only to the owning page. 418 419To share an instance across pages, it must be created at the UIAbility or application level. 420 421## How do I convert a string in time format to a date object? 422 423Applicable to: OpenHarmony 3.2 Beta 5 (API version 9) 424 425**Solution** 426 427If the string is in the yyyy-MM-dd format, you can convert it to a date object by calling **new Date\("yyyy-MM-dd"\)**. 428 429``` 430new Date("2021-05-23"); 431new Date("2020/2/29"); 432new Date("2020-14-03"); 433new Date("14-02-2021"); 434``` 435 436If the string is in other formats, you can convert it to a date object by calling **new Date\(year:number,month:number,day?:number,hour?:number,minute?:number,second?:number,ms?:number\)**. 437 438``` 439// Syntax for creating a date based on parameters: 440new Date(yearValue, IndexOfMonth, dayValue, hours, minutes, seconds) 441``` 442 443Pass the date parameters as arguments. 444 445- **yearValue**: the year in the ISO 8061 YYYY format, for example, **2021**. If we specify a value in YY format, it will be incorrectly accepted. For example, the value **21** would be considered the year 1921 rather than 2021. 446- **IndexOfMonth**: index of the month, which starts from 0. It is obtained by subtracting 1 from the month value. For example, for March, the month value is 3, but the value of **IndexOfMonth** will be 2 (that is, 3 – 1 = 2). The value should typically be within the 0–11 range. 447- **dayValue**: day of the month. It should range from 1 to 31 depending on the number of days in the month. For example, for 21-05-2021, the day value is **21**. 448- **hours**: hour of the day. For example, **10** for 10 o'clock. 449- **minutes**: number of minutes that have elapsed in the hour. 450- **seconds**: number of seconds past a minute. 451 452## How do I convert a string to a byte array in ArkTS? 453 454Applicable to: OpenHarmony 3.2 Beta 5 (API version 9) 455 456**Solution** 457 458Refer to the following code: 459 460``` 461stringToArray(str:string) { 462 var arr = []; 463 for(var i = 0,j = str.length;i<j;++i) { 464 arr.push(str.charCodeAt(i)) 465 } 466 return arr; 467} 468``` 469 470## How do I implement string encoding and decoding in ArkTS? 471 472Applicable to: OpenHarmony 3.2 Beta 5 (API version 9) 473 474**Solution** 475 476You can use **TextEncoder** and **TextDecoder** provided by the **util** module. 477 478**Reference** 479 480[TextEncoder](../reference/apis/js-apis-util.md#textencoder), [TextDecoder](../reference/apis/js-apis-util.md#textdecoder) 481 482## How do I import and export namespaces? 483 484Applicable to: OpenHarmony 3.2 Beta 5 (API version 9) 485 486**Solution** 487 488Use **import** and **export** statements. 489 490- Exporting namespaces from the database: 491 492 ``` 493 namespace Util{ 494 export function getTime(){ 495 return Date.now() 496 } 497 } 498 export default Util 499 ``` 500 501- Importing namespaces 502 503 ``` 504 import Util from './util' 505 Util.getTime() 506 ``` 507 508## Can relational database operations be performed in the Worker thread? 509 510Applicable to: OpenHarmony 3.2 Beta 5 (API version 9) 511 512Currently, the relational database (RDB) object in the UI main thread cannot be sent to the Worker thread for operations. To use the RDB in the Worker thread, you must obtain a new RDB object. 513 514## How do I obtain files in the resource directory of an application? 515 516Applicable to: OpenHarmony 3.2 Beta 5 (API version 9) 517 518**Solution** 519 520- Method 1: Use **\$r** or **\$rawfile**. This method applies to static access, during which the **resource** directory remains unchanged when the application is running. 521- Method 2: Use **ResourceManager**. This method applies to dynamic access, during which the **resource** directory dynamically changes when the application is running. 522 523**Reference** 524 525[Resource Categories and Access](../quick-start/resource-categories-and-access.md) and [@ohos.resourceManager (Resource Manager)](../reference/apis/js-apis-resource-manager.md) 526 527## How do I convert the XML format to the JSON format? 528 529Applicable to: OpenHarmony 3.2 Beta 5 (API version 9) 530 531**Symptom** 532 533The data returned by the server is encoded using Base64 in XML format and needs to be converted to the JSON format for subsequent processing. 534 535**Solution** 536 537Use the Base64-related APIs in the **util** module to decode data, and then use the **convertxml** module to parse data in XML format. 538 539**Example** 540 541``` 542import convertxml from '@ohos.convertxml'; 543import util from '@ohos.util'; 544 545@Entry 546@Component 547struct Faq_4_31 { 548 @State message: string = 'base64 to JSON' 549 550 build() { 551 Row() { 552 Column() { 553 Text(this.message) 554 .fontSize(50) 555 .fontWeight(FontWeight.Bold) 556 .onClick(() => { 557 / *Original data in GBK encoding 558 <?xml version="1.0" encoding="GBK"?> 559 <data> 560 <asset_no>xxxxx</asset_no> 561 <machine_sn>xxxx</machine_sn> 562 <bios_id>xxxx</bios_id> 563 <responsible_emp_name><![CDATA[xxxx]]></responsible_emp_name> 564 <responsible_account><![CDATA[xxxx xxxx]]></responsible_account> 565 <responsible_emp_no>xxxx</responsible_emp_no> 566 <responsible_dept><![CDATA[xxxx]]></responsible_dept> 567 <user_dept><![CDATA[xxxx]]></user_dept> 568 <user_name><![CDATA[xxx]]></user_name> 569 <cur_domain_account>xxxx</cur_domain_account> 570 <asset_loc><![CDATA[--]]></asset_loc> 571 <asset_loc_cur><![CDATA[]]></asset_loc_cur> 572 <asset_type>1</asset_type> 573 <asset_use>For Outsourcing Staff/xxxx</asset_use> 574 <overdue_date></overdue_date> 575 <asset_status>xxxx</asset_status> 576 <asset_period>xxxx</asset_period> 577 <license></license> 578 </data> 579 */ 580 let src = 'PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iR0JLIj8+CjxkYXRhPgo8YXNzZXRfbm8+eHh4eHg8L2Fzc2V0X25vPgo8bWFjaGluZV9zbj54eHh4PC9tYWNoaW5lX3NuPgo8Ymlvc19pZD54eHh4PC9iaW9zX2lkPgo8cmVzcG9uc2libGVfZW1wX25hbWU+PCFbQ0RBVEFbeHh4eF1dPjwvcmVzcG9uc2libGVfZW1wX25hbWU+CjxyZXNwb25zaWJsZV9hY2NvdW50PjwhW0NEQVRBW3h4eHggeHh4eF1dPjwvcmVzcG9uc2libGVfYWNjb3VudD4KPHJlc3BvbnNpYmxlX2VtcF9ubz54eHh4PC9yZXNwb25zaWJsZV9lbXBfbm8+CjxyZXNwb25zaWJsZV9kZXB0PjwhW0NEQVRBW3h4eHhdXT48L3Jlc3BvbnNpYmxlX2RlcHQ+Cjx1c2VyX2RlcHQ+PCFbQ0RBVEFbeHh4eF1dPjwvdXNlcl9kZXB0Pgo8dXNlcl9uYW1lPjwhW0NEQVRBW3h4eF1dPjwvdXNlcl9uYW1lPgo8Y3VyX2RvbWFpbl9hY2NvdW50Pnh4eHg8L2N1cl9kb21haW5fYWNjb3VudD4KPGFzc2V0X2xvYz48IVtDREFUQVstLV1dPjwvYXNzZXRfbG9jPgo8YXNzZXRfbG9jX2N1cj48IVtDREFUQVtdXT48L2Fzc2V0X2xvY19jdXI+Cjxhc3NldF90eXBlPjE8L2Fzc2V0X3R5cGU+Cjxhc3NldF91c2U+Rm9yIE91dHNvdXJjaW5nIFN0YWZmL3h4eHg8L2Fzc2V0X3VzZT4KPG92ZXJkdWVfZGF0ZT48L292ZXJkdWVfZGF0ZT4KPGFzc2V0X3N0YXR1cz54eHh4PC9hc3NldF9zdGF0dXM+Cjxhc3NldF9wZXJpb2Q+eHh4eDwvYXNzZXRfcGVyaW9kPgo8bGljZW5zZT48L2xpY2Vuc2U+CjwvZGF0YT4=' 581 let base64 = new util.Base64Helper(); 582 // base64 decoding 583 let src_uint8Array = base64.decodeSync(src); 584 // Decode the string into a UTF-8 string. 585 let textDecoder = util.TextDecoder.create("utf-8",{ignoreBOM: true}) 586 let src_str = textDecoder.decodeWithStream(src_uint8Array) 587 // Replace the encoding field. 588 src_str = src_str.replace("GBK","utf-8") 589 console.log('Test src_str: ' + JSON.stringify(src_str)); 590 //Convert XML format to JSON format. 591 let conv = new convertxml.ConvertXML(); 592 let options = {trim : false, declarationKey:"_declaration", 593 instructionKey : "_instruction", attributesKey : "_attributes", 594 textKey : "_text", cdataKey:"_cdata", doctypeKey : "_doctype", 595 commentKey : "_comment", parentKey : "_parent", typeKey : "_type", 596 nameKey : "_name", elementsKey : "_elements"} 597 let src_json = JSON.stringify(conv.convertToJSObject(src_str, options)); 598 console.log('Test json: ' + JSON.stringify(src_json)); 599 }) 600 } 601 .width('100%') 602 } 603 .height('100%') 604 } 605} 606``` 607 608## What are the restrictions on using generator functions in TypeScript? 609 610Applicable to: OpenHarmony 3.2 Beta 5 (API version 9) 611 612**Solution** 613 614Below are the restrictions on using generator functions in TypeScript: 615 616- Expressions can be used only in character strings (in the \(\$\{expression\}\) format), **if** conditions, **ForEach** parameters, and component parameters. 617- No expressions should cause any application state variables (**@State**, **@Link**, and **@Prop**) to change. Otherwise, undefined and potentially unstable framework behavior may occur. 618- The generator function cannot contain local variables. 619 620None of the above restrictions apply to anonymous function implementations of event handlers (such as **onClick**). 621 622## How do I set a badge for each of the four corners of an image? 623 624Applicable to: OpenHarmony 3.2 Beta5 625 626**Solution** 627 628You can use absolute positioning to set the offset of the element anchor relative to the top start point of the parent container. In the layout container, setting this attribute does not affect the layout of the parent container. 629 630**Example** 631 632``` 633@Entry 634@Component 635struct PositionExample2 { 636 build() { 637 Column({ space: 20 }) { 638 Stack({ alignContent: Alignment.TopStart }) { 639 Row() 640 .size({ width: '100', height: '100' }) 641 .backgroundColor(0xdeb887) 642 Image($r('app.media.app_icon')) 643 .size({ width: 25, height: 25 }) 644 .markAnchor({ x: 0, y: 0 }) 645 Image($r('app.media.app_icon')) 646 .size({ width: 25, height: 25 }) 647 .markAnchor({ x: 25, y: 25 }) 648 .position({ x: '100%', y: '100%' }) 649 }.margin({ top: 25 }).width('100').height('100') 650 } 651 .width('100%').margin({ top: 25 }) 652 } 653} 654``` 655 656## How do I use the util.generateRandomUUID parameter? 657 658Applicable to: OpenHarmony 3.2 Beta5 659 660**Solution** 661 662The bottom layer of **generateRandomUUID** uses the **Node.js crypto.randomUUID\(\)** API. If the parameter passed in is **false**, a new UUID is generated and cached in the system. If the parameter passed in is **true**, the existing cached UUID is used. 663 664**Reference** 665 666[util.generateRandomUUID](../reference/apis/js-apis-util.md#utilgeneraterandomuuid9) 667 668## Do the Worker thread and the main thread run in the same global context? 669 670Applicable to: OpenHarmony 3.2 Beta5 671 672**Solution** 673 674No. The Worker thread and the main thread are not in the same context. They interact with each other in data communication mode. 675 676**Reference** 677 678[@ohos.worker (Worker Startup)](../reference/apis/js-apis-worker.md) 679 680## How do I set one application icon for different device types? 681 682Applicable to: OpenHarmony 3.2 Beta 5 (API version 9) 683 684**Solution** 685 686To configure your application icon to show on different device types, use resource qualifiers. 687 688**Example** 689 6901. Create a resource directory and add resource files to the directory. In this example, a **tablet** resource directory is created in **src/main/resources** and a **media** resource folder in the **tablet** directory. 691 692``` 693├─base 694│ ├─element 695│ ├─media 696│ └─profile 697├─rawfile 698├─tablet 699│ ├─element 700│ └─media 701``` 702 7032. Add the icon file to be displayed when the device type is tablet to the **media** folder. Reference the icon file on the UI. 704 705``` 706@Entry @Component struct Index { build() { 707 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 708 Text($r("app.string.my_string")) 709 .fontSize($r("app.float.my_float")) 710 .fontColor($r("app.color.my_color")) 711 Image($r("app.media.my_image")) 712 .width(100) 713 .height(100) 714 } 715 .width('100%') 716 .height('100%') } } 717``` 718 719## How do I prevent "this" in a method from changing to "undefined" when the method is called? 720 721Applicable to: OpenHarmony 3.2 (API version 9) 722 723**Solution** 724 725Method 1: Add **.bind\(this\)** when calling the method. 726 727Method 2: Use the arrow function. 728 729## Is there any difference between the systemTime.getCurrentTime\(\) API of OpenHarmony and the new Date\(\).getTime\(\) API of JS? 730 731Applicable to: OpenHarmony 3.2 (API version 9) 732 733**Solution** 734 735**systemTime.getCurrentTime\(false\)** is equivalent to **new Date\(\).getTime\(\)**, returning the number of milliseconds since January 1, 1970. **systemTime.getCurrentTime\(true\)** returns the number of nanoseconds since January 1, 1970. The system time is used in both APIs. 736 737## How do I implement the ArkTS counterpart of the JS slot feature? 738 739Applicable to: OpenHarmony 3.2 (API version 9) 740 741**Solution** 742 743Applicable to: OpenHarmony SDK 3.2.5.5, stage model of API version 9 744 745Use @Build and @BuilderParam in ArkTS. 746 747**Reference** 748 749[\@BuilderParam: @Builder Function Reference](../quick-start/arkts-builderparam.md). 750 751## Why is the text not centered vertically when lineHeight is set? 752 753Applicable to: OpenHarmony 3.2 Beta 5 (API version 9) 754 755**Cause** 756 757Text in the **\<Text>** component is centered by default. You do not need to set the **lineHeight** attribute. As the text is drawn from the bottom, an appropriate line height can have the text centered. However, if the line height is too large, the text appears aligned toward the bottom. In general cases, use the **lineHeight** attribute together with the **padding** attribute to adjust the line spacing. 758 759**Reference** 760 761[Text](../reference/arkui-ts/ts-basic-components-text.md#example-1) 762 763 764## Which API is used for URL encoding? 765 766Applicable to: OpenHarmony 3.2 Beta5 (API version 9) 767 768**Solution** 769 770Use the global function **encodeURI** for encoding and **decodeURI** for decoding. For example, the space character ""is encoded as %20. 771 772``` 773let a = encodeURI(" ") 774console.log(a) // %20 775``` 776 777## How do I parse XML files? 778 779Applicable to: OpenHarmony 3.2 Beta5 (API version 9) 780 781**Solution** 782 783You can use the **convert** API of the **ConvertXML** module to parse XML text into JS objects. 784 785**Reference** 786 787[@ohos.convertxml (XML-to-JavaScript Conversion)](../reference/apis/js-apis-convertxml.md) 788 789## What should I do if the .stateStyles doesn't conform standard error is reported with the use of the @Styles decorator? 790 791Applicable to: OpenHarmony 3.2 Beta5 (API version 9) 792 793**Cause** 794 795The @Styles decorator is used for non-universal attributes. 796 797**Solution** 798 799Use the @Styles decorator only for non-universal attributes. Alternatively, use Builder to extract common components. 800 801## How do I use \$\$ for the \<Radio> component? 802 803Applicable to: OpenHarmony 3.2 Beta5 (API version 9) 804 805**Solution** 806 807When the **\<Radio>** component uses a variable bound to **\$\$**, changes to the variable trigger re-render of only the owning component, improving the rendering speed. 808 809When the state of the **\<Radio>** component changes, the bound variable is not automatically updated. 810 811**Reference** 812 813[$ Syntax: Two-Way Synchronization of Built-in Components](../quick-start/arkts-two-way-sync.md) 814 815## What should I do if ForEach does not work on a real device? 816 817Applicable to: OpenHarmony 3.2 Beta5 (API version 9) 818 819**Symptom** 820 821**ForEach** works in the previewer, but not on a real device. 822 823**Cause** 824 825If the system version on the real device is 3.2 beta5 or later, the minimum update policy is enabled by default. 826 827However, minimum update is not enabled in DevEco Studio of an earlier version. As a result, components run abnormally. 828 829**Solution** 830 831Add the **metadata** configuration item to the **module.json5** file. 832 833``` 834{ 835 "module": { 836 "metadata": [ 837 { 838 "name": "ArkTSPartialUpdate", 839 "value": "true" 840 } 841 } 842} 843``` 844