提交 985bc3c1 编写于 作者: W wusongqing

updated docs

Signed-off-by: Nwusongqing <wusongqing@huawei.com>
上级 8d5fb164
......@@ -5,6 +5,7 @@
- [ParticleAbility Module](js-apis-particleAbility.md)
- [DataAbilityHelper Module](js-apis-dataAbilityHelper.md)
- [DataUriUtils Module](js-apis-DataUriUtils.md)
- [Bundle Module](js-apis-Bundle.md)
- [Context Module](js-apis-Context.md)
- Event Notification
- [CommonEvent Module](js-apis-commonEvent.md)
......@@ -21,12 +22,12 @@
- [User Authentication](js-apis-useriam-userauth.md)
- [Access Control](js-apis-abilityAccessCtrl.md)
- Data Management
- [File Management](js-apis-fileio.md)
- [Lightweight Storage](js-apis-data-storage.md)
- [Lightweight Storage (deprecated since 8)](js-apis-data-storage.md)
- [Distributed Data Management](js-apis-distributed-data.md)
- [Relational Database](js-apis-data-rdb.md)
- [Result Set](js-apis-data-resultset.md)
- [DataAbilityPredicates](js-apis-data-ability.md)
- [Settings](js-apis-settings.md)
- File Management
- [File Management](js-apis-fileio.md)
- [Statfs](js-apis-statfs.md)
......@@ -44,8 +45,9 @@
- [Radio](js-apis-radio.md)
- Network and Connectivity
- [WLAN](js-apis-wifi.md)
- [Bluetooth](js-apis-bluetooth.md)
- Device Management
- [Sensors](js-apis-sensor.md)
- [Sensor](js-apis-sensor.md)
- [Vibrator](js-apis-vibrator.md)
- [Brightness](js-apis-brightness.md)
- [Battery Info](js-apis-battery-info.md)
......@@ -67,11 +69,16 @@
- [Timer](js-apis-basic-features-timer.md)
- [Setting the System Time](js-apis-system-time.md)
- [Animation](js-apis-basic-features-animator.md)
- [WebGL](js-apis-webgl.md)
- [WebGL2](js-apis-webgl2.md)
- DFX
- [HiAppEvent](js-apis-hiappevent.md)
- [Performance Tracing](js-apis-hitracemeter.md)
- [Fault Logger](js-apis-faultLogger.md)
- [Distributed Call Chain Tracing](js-apis-hitracechain.md)
- [HiLog](js-apis-hilog.md)
- [HiChecker](js-apis-hichecker.md)
- [HiDebug](js-apis-hidebug.md)
- Language Base Class Library
- [Obtaining Process Information](js-apis-process.md)
- [URL String Parsing](js-apis-url.md)
......
......@@ -64,7 +64,7 @@
- [Media Components](js-components-media.md)
- [video](js-components-media-video.md)
- [Canvas Components ](js-components-canvas.md)
- [Canvas Components](js-components-canvas.md)
- [canvas](js-components-canvas-canvas.md)
- [CanvasRenderingContext2D](js-components-canvas-canvasrenderingcontext2d.md)
- [Image](js-components-canvas-image.md)
......
......@@ -126,7 +126,7 @@
- [Custom Dialog box](ts-methods-custom-dialog-box.md)
- [Image Cache](ts-methods-image-cache.md)
- [Media Query](ts-methods-media-query.md)
- [List Selection Dialog Box](ts-methods-custom-actionsheet.md)
- [List Selection Dialog Box](ts-methods-action-sheet.md)
- [Appendix](ts-appendix.md)
- [Built-in Enums](ts-appendix-enums.md)
......
# Accessing Application Resources<a name="EN-US_TOPIC_0000001181883223"></a>
## Resource Definition<a name="section141821629195413"></a>
Application resources are defined by in the project's **resources** directory, which is organized as follows:
- Level-1: **base** sub-directory, qualifiers sub-directories, and **rawfile** sub-directory
- The **base** sub-directory is a default directory. If no qualifiers sub-directories in the **resources** directory of the application match the device status, the resource file in the **base** sub-directory will be automatically referenced.
- You need to create qualifiers sub-directories on your own. The name of a qualifiers sub-directory consists of one or more qualifiers that represent the application scenarios or device characteristics, covering the mobile country code \(MCC\), mobile network code \(MNC\), language, script, country or region, screen orientation, device type, color mode, and screen density. The qualifiers are separated using underscores \(\_\) or hyphens \(-\).
- When the resources in the **rawfile** sub-directory are referenced, resource files will not be matched based on the device status. You can directly store resource files in the **rawfile** sub-directory.
- Level-2: resource sub-directories
- Resource sub-directories store basic elements such as character strings, colors, and floating point numbers, and resource files such as media files.
- Supported files and resource types are listed in the table below:
<a name="table53961740178"></a>
<table><thead align="left"><tr id="row739634012720"><th class="cellrowborder" valign="top" width="50%" id="mcps1.1.3.1.1"><p id="p143974401277"><a name="p143974401277"></a><a name="p143974401277"></a>File Name</p>
</th>
<th class="cellrowborder" valign="top" width="50%" id="mcps1.1.3.1.2"><p id="p103976401277"><a name="p103976401277"></a><a name="p103976401277"></a>Resource Type</p>
</th>
</tr>
</thead>
<tbody><tr id="row1739794010715"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p33978409717"><a name="p33978409717"></a><a name="p33978409717"></a>color.json</p>
</td>
<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p153975401772"><a name="p153975401772"></a><a name="p153975401772"></a>Color resource.</p>
</td>
</tr>
<tr id="row173971140175"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p839719401717"><a name="p839719401717"></a><a name="p839719401717"></a>float.json</p>
</td>
<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p339713405710"><a name="p339713405710"></a><a name="p339713405710"></a>Resources such as spacing, rounded corners, and fonts.</p>
</td>
</tr>
<tr id="row19397194011717"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p6397124013714"><a name="p6397124013714"></a><a name="p6397124013714"></a>string.json</p>
</td>
<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p339819401577"><a name="p339819401577"></a><a name="p339819401577"></a>String resource.</p>
</td>
</tr>
<tr id="row5990342889"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p899219427811"><a name="p899219427811"></a><a name="p899219427811"></a>plural.json</p>
</td>
<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p799214425811"><a name="p799214425811"></a><a name="p799214425811"></a>String resource.</p>
</td>
</tr>
<tr id="row59657261599"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.1 "><p id="p896710269917"><a name="p896710269917"></a><a name="p896710269917"></a>media directory</p>
</td>
<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.3.1.2 "><p id="p1396772617914"><a name="p1396772617914"></a><a name="p1396772617914"></a>Image resource.</p>
</td>
</tr>
</tbody>
</table>
## Referencing Resources<a name="section1077218431548"></a>
To reference an application resource in a project, use the **"$r\('app.type.name'\)"** format. **app** indicates the resource defined in the **resources** directory of the application. **type** indicates the resource type \(or the location where the resource is stored\). The value can be **color**, **float**, **string**, **plural**, or **media**. **name** indicates the resource name, which you set when defining the resource.
When referencing resources in the **rawfile** sub-directory, use the **"$rawfile\('filename'\)"** format. Currently, **$rawfile** allows only the **<Image\>** component to reference image resources. In the format, **filename** indicates the relative path of a file in the **rawfile** directory, and the file name must contain the file name extension. Note that the relative path cannot start with a slash \(/\).
## Example<a name="section1997322145516"></a>
Some custom resources in the **base** sub-directory are as follows:
```
resources
├─ base
│ ├─ element
│ │ ├─ color.json
│ │ ├─ string.json
│ │ └─ float.json
│ └─ media
│ └─ my_background_image.png
└─ rawfile
├─ test.png
└─ newDir
└─ newTest.png
```
The content of the **color.json** file is as follows:
```
{
"color": [
{
"name": "color_hello",
"value": "#ffff0000"
},
{
"name": "color_world",
"value": "#ff0000ff"
}
]
}
```
The content of the **float.json** file is as follows:
```
{
"float":[
{
"name":"font_hello",
"value":"28.0fp"
},
{
"name":"font_world",
"value":"20.0fp"
}
]
}
```
The content of the **string.json** file is as follows:
```
{
"string":[
{
"name":"string_hello",
"value":"Hello"
},
{
"name":"string_world",
"value":"World"
},
{
"name":"message_arrive",
"value":"We will arrive at %s."
}
]
}
```
The content of the **plural.json** file is as follows:
```
{
"plural":[
{
"name":"eat_apple",
"value":[
{
"quantity":"one",
"value":"%d apple"
},
{
"quantity":"other",
"value":"%d apples"
}
]
}
]
}
```
In the **ets** file, you can use the resources defined in the **resources** directory.
```
Text($r('app.string.string_hello'))
.fontColor($r('app.color.color_hello'))
.fontSize($r('app.float.font_hello'))
}
Text($r('app.string.string_world'))
.fontColor($r('app.color.color_world'))
.fontSize($r('app.float.font_world'))
}
Text($r('app.string.message_arrive', "five of the clock")) // Reference string resources. The second parameter of $r is used to replace %s.
.fontColor($r('app.color.color_hello'))
.fontSize($r('app.float.font_hello'))
}
Text($r('app.plural.eat_apple', 5, 5)) // Reference plural resources. The first parameter specifies the plural resource, and the second parameter specifies the number of plural resources. The third number indicates the substitute of %d.
.fontColor($r('app.color.color_world'))
.fontSize($r('app.float.font_world'))
}
Image($r(?app.media.my_background_image creation)) // Reference media resources.
Image($rawfile( Femaletest.png loaded)) // Reference an image in the rawfile directory.
Image($rawfile(newDir/newTest.png loaded)) // Reference an image in the rawfile directory.
```
# Synchronization Between AppStorage and Components<a name="EN-US_TOPIC_0000001166649261"></a>
In [Managing Component States](ts-component-states-state.md), we have defined how to synchronize the state variables of the child components with the **@State** decorated variables in the parent component or ancestor component, including **@Prop**, **@Link**, and **@Consume**.
In this section, we'll describe how to synchronize component variables with the **AppStorage** through the **@StorageLink** and **@StorageProp** decorators.
## @StorageLink Decorator<a name="en-us_topic_0000001149818715_section4857142710453"></a>
Two-way data binding can be established between components and the **AppStorage** through state variables decorated by **@StorageLink\(_key_\)**. Wherein, **key** is the attribute key value in the **AppStorage**. When a component containing the **@StorageLink** decorated variable is created, the variable is initialized using the value in the **AppStorage**. Changes made to this variable in the component will be first synchronized to the **AppStorage**, and then to other bound instances, such as **PersistentStorage** or other bound UI components.
## @StorageProp Decorator<a name="en-us_topic_0000001149818715_section7874173385112"></a>
One-way data binding can be established between components and the **AppStorage** through state variables decorated by **@StorageProp\(_key_\)**. Wherein, **key** is the attribute key value in the **AppStorage**. When a component containing the **StorageProp** decorated variable is created, the variable is initialized using the value in the **AppStorage**. The change to the attribute value in the **AppStorage** will cause the bound UI component to update the state.
## Example<a name="en-us_topic_0000001149818715_section7991192013546"></a>
```
let varA = AppStorage.Link('varA')
let envLang = AppStorage.Prop('languageCode')
@Entry
@Component
struct ComponentA {
@StorageLink('varA') varA: number = 2
@StorageProp('languageCode') lang: string = 'en'
private label: string = 'count'
private aboutToAppear() {
this.label = (this.lang === 'en') ? 'Number' : 'Count'
}
build() {
Row({ space: 20 }) {
Button(`${this.label}: ${this.varA}`)
.onClick(() => {
AppStorage.Set<number>('varA', AppStorage.Get<number>('varA') + 1)
})
Button(`lang: ${this.lang}`)
.onClick(() => {
if (this.lang === 'zh') {
AppStorage.Set<string>('languageCode', 'en')
} else {
AppStorage.Set<string>('languageCode', 'en')
}
this.label = (this.lang === 'en') ? 'Number' : 'Count'
})
}
}
}
```
Each time the user clicks the **Count** button, the value of **this.varA** will increase by 1. This variable is synchronized with **varA** in the **AppStorage**. Each time the user clicks the language icon, the value of **languageCode** in the **AppStorage** will be changed, and the change will be synchronized to the **this.lang** variable.
......@@ -10,4 +10,7 @@
- **[Audio](driver-peripherals-audio-des.md)**
- **[USB](driver-peripherals-usb-des.md)**
- **[Camera](driver-peripherals-camera-des.md)**
......@@ -6,6 +6,6 @@
- [Burning](faqs-burning.md)
- [Kernel](faqs-kernel.md)
- [Porting](faqs-porting.md)
- [Startup and Recovery](faqs-startup-and-recovery.md)
- [Startup](faqs-startup.md)
- [System Applications](faqs-system-applications.md)
# Startup and Recovery<a name="EN-US_TOPIC_0000001215449321"></a>
# Startup<a name="EN-US_TOPIC_0000001215449321"></a>
## System startup interrupted due to "parse failed!" error<a name="section835662214302"></a>
......
......@@ -8,10 +8,4 @@
- **[Typical Memory Problems](kernel-small-debug-user-faqs.md)**
- **[Linux Kernel Overview](kernel-standard-overview.md)**
- **[Guidelines for Using Patches on OpenHarmony Development Boards](kernel-standard-patch.md)**
- **[Guidelines for Compiling and Building the Linux Kernel](kernel-standard-build.md)**
......@@ -4,4 +4,6 @@
- **[Building Guidelines for Standard Systems](subsys-build-standard-large.md)**
- **[Build System Coding Specifications and Best Practices](subsys-build-gn-coding-style-and-best-practice)**
......@@ -3,7 +3,10 @@
- [DFX Overview](subsys-dfx-overview.md)
- [HiLog Development](subsys-dfx-hilog-rich.md)
- [HiLog_Lite Development](subsys-dfx-hilog-lite.md)
- [HiTrace Development](subsys-dfx-hitrace.md)
- [HiCollie Development](subsys-dfx-hicollie.md)
- [HiSysEvent Development](subsys-dfx-hisysevent.md)
- [HiSysEvent Logging Configuration](subsys-dfx-hisysevent-logging-config.md)
- [HiSysEvent Logging](subsys-dfx-hisysevent-logging.md)
- [HiSysEvent Listening](subsys-dfx-hisysevent-listening.md)
- [HiSysEvent Query](subsys-dfx-hisysevent-query.md)
......
此差异已折叠。
此差异已折叠。
......@@ -5,7 +5,7 @@
- [分布式数据服务开发指导](database-mdds-guidelines.md)
- 关系型数据库
- [关系型数据库概述](database-relational-overview.md)
- [分布式数据服务开发指导](database-relational-guidelines.md)
- [关系型数据库开发指导](database-relational-guidelines.md)
- 轻量级数据存储
- [轻量级数据存储概述](database-preference-overview.md)
- [轻量级数据存储开发指导](database-preference-guidelines.md)
......
# 贡献指南<a name="ZH-CN_TOPIC_0000001053389134"></a>
- **[参与贡献](参与贡献.md)**
- **[行为准则](行为准则.md)**
- **[贡献代码](贡献代码.md)**
- **[贡献流程](贡献流程.md)**
- **[FAQ](FAQ.md)**
- **[贡献文档](贡献文档.md)**
- **[写作规范](写作规范.md)**
- **[社区沟通与交流](社区沟通与交流.md)**
......@@ -6,6 +6,6 @@
- [烧录常见问题](faqs-burning.md)
- [内核常见问题](faqs-kernel.md)
- [移植常见问题](faqs-porting.md)
- [启动恢复常见问题](faqs-startup-and-recovery.md)
- [启动恢复常见问题](faqs-startup.md)
- [系统应用常见问题](faqs-system-applications.md)
......@@ -6,6 +6,10 @@
- **[HiLog\_Lite开发指导](subsys-dfx-hilog-lite.md)**
- **[HiTrace开发指导](subsys-dfx-hitrace.md)**
- **[HiCollie开发指导](subsys-dfx-hicollie.md)**
- **[HiSysEvent开发指导](subsys-dfx-hisysevent.md)**
-[HiSysEvent打点配置指导](subsys-dfx-hisysevent-logging-config.md)
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册