Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
提交 a53e9e10 编写于 作者: H HelloCrease
浏览文件
操作

update docs 

Signed-off-by: NHelloCrease <lian15@huawei.com>
上级 74181f17
隐藏空白更改
内联 并排
Showing with 108 addition and 118 deletion
zh-cn/application-dev/reference/arkui-js/Readme-CN.md
浏览文件 @ a53e9e10
# 基于JS扩展的类Web开发范式
- 通用
- 组件通用信息
- [通用属性](js-components-common-attributes.md)
- [通用样式](js-components-common-styles.md)
- [通用事件](js-components-common-events.md)
......
zh-cn/application-dev/ui/Readme-CN.md
浏览文件 @ a53e9e10
......@@ -81,9 +81,8 @@
- [应用代码文件访问规则](ts-framework-file-access-rules.md)
- [js标签配置](ts-framework-js-tag.md)
- 资源访问
- [访问应用资源](ts-application-resource-access.md)
- [访问系统资源](ts-system-resource-access.md)
- [媒体资源类型说明](ts-media-resource-type.md)
- [资源文件的分类](ui-ts-basic-resource-file-categories.md)
- [资源访问](ts-resource-access.md)
- [像素单位](ts-pixel-units.md)
- [类型定义](ts-types.md)
- 声明式语法
......
zh-cn/application-dev/ui/ts-media-resource-type.md 已删除 100644 → 0
浏览文件 @ 74181f17
# 媒体资源类型说明
- 图片资源类型说明
| 格式 | 文件后缀名 |
| -------- | -------- |
| JPEG | .jpg |
| PNG | .png |
| GIF | .gif |
| SVG | .svg |
| WEBP | .webp |
| BMP | .bmp |
- 音视频资源类型说明
| 格式 | 支持的文件类型 |
| -------- | -------- |
| H.263 | .3gp <br>.mp4 |
| H.264 AVC <br> Baseline Profile (BP) | .3gp <br>.mp4 |
| MPEG-4 SP | .3gp |
| VP8 | .webm <br> .mkv |
zh-cn/application-dev/ui/ts-application-resource-access.md → zh-cn/application-dev/ui/ts-resource-access.md
浏览文件 @ a53e9e10
# 访问应用资源
# 资源访问
## 资源定义
## 访问应用资源
应用资源由开发者在工程的resources目录中定义，resources目录按照两级目录的形式来组织：
在工程中，通过```"$r('app.type.name')"```的形式引用应用资源。app代表是应用内resources目录中定义的资源；type代表资源类型（或资源的存放位置），可以取“color”、“float”、“string”、“plural”、“media”，name代表资源命名，由开发者定义资源时确定。
- 一级目录为base目录、限定词目录以及rawfile目录
- base目录是默认存在的目录。当应用的resources资源目录中没有与设备状态匹配的限定词目录时，会自动引用该目录中的资源文件。
- 限定词目录需要开发者自行创建，其可以由一个或多个表征应用场景或设备特征的限定词组合而成，包括移动国家码和移动网络码、语言、文字、国家或地区、横竖屏、设备类型、颜色模式和屏幕密度等维度，限定词之间通过下划线（_）或者中划线（-）连接。
- 在引用rawfile中的资源时，不会根据系统的状态去匹配，rawfile目录中可以直接存放资源文件。
引用rawfile下资源时使用```"$rawfile('filename')"```的形式，当前$rawfile仅支持Image控件引用图片资源，filename需要表示为rawfile目录下的文件相对路径，文件名需要包含后缀，路径开头不可以以"/"开头。
- 二级目录为资源目录
- 用于存放字符串、颜色、浮点数等基础元素，以及媒体等资源文件。
- 当前支持的文件和资源类型如下：
| 文件名 | 资源类型 |
| -------- | -------- |
| color.json | 颜色资源。 |
| float.json | 间距、圆角、字体等资源。 |
| string.json | 字符串资源。 |
| plural.json | 字符串资源。 |
| media目录 | 图片资源。 |
> **说明：**
> 资源描述符不能拼接使用，仅支持普通字符串如`'app.type.name'`。
在xxx.ets文件中，可以使用在resources目录中定义的资源。
## 资源引用
```ts
Text($r('app.string.string_hello'))
.fontColor($r('app.color.color_hello'))
.fontSize($r('app.float.font_hello'))
}
在工程中，通过```"$r('app.type.name')"```的形式引用应用资源。app代表是应用内resources目录中定义的资源；type代表资源类型（或资源的存放位置），可以取“color”、“float”、“string”、“plural”、“media”，name代表资源命名，由开发者定义资源时确定。
Text($r('app.string.string_world'))
.fontColor($r('app.color.color_world'))
.fontSize($r('app.float.font_world'))
}
引用rawfile下资源时使用```"$rawfile('filename')"```的形式，当前$rawfile仅支持Image控件引用图片资源，filename需要表示为rawfile目录下的文件相对路径，文件名需要包含后缀，路径开头不可以以"/"开头。
Text($r('app.string.message_arrive', "five of the clock")) // 引用string资源，$r的第二个参数用于替换%s
.fontColor($r('app.color.color_hello'))
.fontSize($r('app.float.font_hello'))
}
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 资源描述符不能拼接使用，仅支持普通字符串如`'app.type.name'`。
Text($r('app.plural.eat_apple', 5, 5)) // plural$r引用，第一个指定plural资源，第二个参数指定单复数的数量，此处第三个数字为对%d的替换
.fontColor($r('app.color.color_world'))
.fontSize($r('app.float.font_world'))
}
Image($r('app.media.my_background_image')) // media资源的$r引用
## 示例
Image($rawfile('test.png')) // rawfile$r引用rawfile目录下图片
base目录中部分自定义资源如下所示：
Image($rawfile('newDir/newTest.png')) // rawfile$r引用rawfile目录下图片
```
## 访问系统资源
系统资源包含色彩、圆角、字体、间距、字符串及图片等。通过使用系统资源，不同的开发者可以开发出具有相同视觉风格的应用。
开发者可以通过```“$r('sys.type.resource_id')”```的形式引用系统资源。sys代表是系统资源；type代表资源类型，可以取“color”、“float”、“string”、“media”；resource_id代表资源id。
```ts
Text('Hello')
.fontColor($r('sys.color.ohos_id_color_emphasize'))
.fontSize($r('sys.float.ohos_id_text_size_headline1'))
.fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
.backgroundColor($r('sys.color.ohos_id_color_palette_aux1'))
Image($r('sys.media.ohos_app_icon'))
.border({color: $r('sys.color.ohos_id_color_palette_aux1'), radius: $r('sys.float.ohos_id_corner_radius_button'), width: 2})
.margin({top: $r('sys.float.ohos_id_elements_margin_horizontal_m'), bottom: $r('sys.float.ohos_id_elements_margin_horizontal_l')})
.height(200)
.width(300)
```
resources
├─ base
│ ├─ element
│ │ ├─ color.json
│ │ ├─ string.json
│ │ └─ float.json
│ └─ media
│ └─ my_background_image.png
└─ rawfile
├─ test.png
└─ newDir
└─ newTest.png
```
## 资源文件示例
color.json文件的内容如下：
......@@ -133,35 +141,7 @@ plural.json文件的内容如下：
}
```
在ets文件中，可以使用在resources目录中定义的资源。
```
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")) // 引用string资源，$r的第二个参数用于替换%s
.fontColor($r('app.color.color_hello'))
.fontSize($r('app.float.font_hello'))
}
Text($r('app.plural.eat_apple', 5, 5)) // plural$r引用，第一个指定plural资源，第二个参数指定单复数的数量，此处第三个数字为对%d的替换
.fontColor($r('app.color.color_world'))
.fontSize($r('app.float.font_world'))
}
Image($r('app.media.my_background_image')) // media资源的$r引用
Image($rawfile('test.png')) // rawfile$r引用rawfile目录下图片
Image($rawfile('newDir/newTest.png')) // rawfile$r引用rawfile目录下图片
```
## 相关实例
......
zh-cn/application-dev/ui/ts-system-resource-access.md 已删除 100644 → 0
浏览文件 @ 74181f17
# 访问系统资源
系统资源包含色彩、圆角、字体、间距、字符串及图片等。通过使用系统资源，不同的开发者可以开发出具有相同视觉风格的应用。
开发者可以通过```“$r('sys.type.resource_id')”```的形式引用系统资源。sys代表是系统资源；type代表资源类型，可以取“color”、“float”、“string”、“media”；resource_id代表资源id。
```
Text('Hello')
.fontColor($r('sys.color.ohos_id_color_emphasize'))
.fontSize($r('sys.float.ohos_id_text_size_headline1'))
.fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
.backgroundColor($r('sys.color.ohos_id_color_palette_aux1'))
Image($r('sys.media.ohos_app_icon'))
.border({color: $r('sys.color.ohos_id_color_palette_aux1'), radius: $r('sys.float.ohos_id_corner_radius_button'), width: 2})
.margin({top: $r('sys.float.ohos_id_elements_margin_horizontal_m'), bottom: $r('sys.float.ohos_id_elements_margin_horizontal_l')})
.height(200)
.width(300)
```
zh-cn/application-dev/quick-start/basic-resource-file-categories.md → zh-cn/application-dev/ui/ui-ts-basic-resource-file-categories.md
浏览文件 @ a53e9e10
......@@ -71,8 +71,62 @@ base目录与限定词目录下面可以创建资源组目录（包括element、
**表3** 资源组目录说明
| 资源组目录 | 目录说明 | 资源文件 |
| --------- | ---------------------------------------- | ---------------------------------------- |
| element | 表示元素资源，以下每一类数据都采用相应的JSON文件来表征。<br/>-&nbsp;boolean，布尔型<br/>-&nbsp;color，颜色<br/>-&nbsp;float，浮点型<br/>-&nbsp;intarray，整型数组<br/>-&nbsp;integer，整型<br/>-&nbsp;pattern，样式<br/>-&nbsp;plural，复数形式<br/>-&nbsp;strarray，字符串数组<br/>-&nbsp;string，字符串 | element目录中的文件名称建议与下面的文件名保持一致。每个文件中只能包含同一类型的数据。<br/>-&nbsp;boolean.json<br/>-&nbsp;color.json<br/>-&nbsp;float.json<br/>-&nbsp;intarray.json<br/>-&nbsp;integer.json<br/>-&nbsp;pattern.json<br/>-&nbsp;plural.json<br/>-&nbsp;strarray.json<br/>-&nbsp;string.json |
| media | 表示媒体资源，包括图片、音频、视频等非文本格式的文件。 | 文件名可自定义，例如：icon.png。 |
| profile | 表示其他类型文件，以原始文件形式保存。 | 文件名可自定义。 |
| 资源组目录 | 目录说明 | 资源文件 |
| ------- | ---------------------------------------- | ---------------------------------------- |
| element | 表示元素资源，以下每一类数据都采用相应的JSON文件来表征。<br/>-&nbsp;boolean，布尔型<br/>-&nbsp;color，颜色<br/>-&nbsp;float，浮点型<br/>-&nbsp;intarray，整型数组<br/>-&nbsp;integer，整型<br/>-&nbsp;pattern，样式<br/>-&nbsp;plural，复数形式<br/>-&nbsp;strarray，字符串数组<br/>-&nbsp;string，字符串 | element目录中的文件名称建议与下面的文件名保持一致。每个文件中只能包含同一类型的数据。<br/>-&nbsp;boolean.json<br/>-&nbsp;color.json<br/>-&nbsp;float.json<br/>-&nbsp;intarray.json<br/>-&nbsp;integer.json<br/>-&nbsp;pattern.json<br/>-&nbsp;plural.json<br/>-&nbsp;strarray.json<br/>-&nbsp;string.json |
| media | 表示媒体资源，包括图片、音频、视频等非文本格式的文件。 | 文件名可自定义，例如：icon.png。 |
| profile | 表示其他类型文件，以原始文件形式保存。 | 文件名可自定义。 |
### 媒体资源类型说明
表1 图片资源类型说明
| 格式 | 文件后缀名 |
| ---- | ----- |
| JPEG | .jpg |
| PNG | .png |
| GIF | .gif |
| SVG | .svg |
| WEBP | .webp |
| BMP | .bmp |
表2 音视频资源类型说明
| 格式 | 支持的文件类型 |
| ------------------------------------ | --------------- |
| H.263 | .3gp <br>.mp4 |
| H.264 AVC <br> Baseline Profile (BP) | .3gp <br>.mp4 |
| MPEG-4 SP | .3gp |
| VP8 | .webm <br> .mkv |
## 创建资源文件
在resources目录下，可按照限定词目录和资源组目录的说明创建子目录和目录内的文件。
同时，DevEco Studio也提供了创建资源目录和资源文件的界面。
- 创建资源目录及资源文件
在resources目录右键菜单选择“New > Resource File”，此时可同时创建目录和文件。
文件默认创建在base目录的对应资源组下。如果选择了限定词，则会按照命名规范自动生成限定词+资源组目录，并将文件创建在目录中。
目录名自动生成，格式固定为“限定词.资源组”，例如创建一个限定词为横竖屏类别下的竖屏，资源组为绘制资源的目录，自动生成的目录名称为“vertical.graphic”。
![create-resource-file-1](figures/create-resource-file-1.png)
- 创建资源目录
在resources目录右键菜单选择“New > Resource Directory”，此时可创建资源目录。
选择资源组类型，设置限定词，创建后自动生成目录名称。目录名称格式固定为“限定词.资源组”，例如创建一个限定词为横竖屏类别下的竖屏，资源组为绘制资源的目录，自动生成的目录名称为“vertical.graphic”。
![create-resource-file-2](figures/create-resource-file-2.png)
- 创建资源文件
在资源目录的右键菜单选择“New > XXX Resource File”，即可创建对应资源组目录的资源文件。
例如，在element目录下可新建Element Resource File。
![create-resource-file-3](figures/create-resource-file-3.png)
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或