1# 资源使用 2 3 4在页面开发过程中，经常需要用到颜色、字体、间距、图片等资源，在不同的设备或配置中，这些资源的值可能不同。有两种方式处理： 5 6 7- [应用资源](#应用资源)：借助资源文件能力，开发者在应用中自定义资源，自行管理这些资源在不同的设备或配置中的表现。 8 9- [系统资源](#系统资源)：开发者直接使用系统预置的资源定义（即分层参数）。 10 11 12## 应用资源 13 14 15### 资源文件介绍 16 17应用开发中使用的各类自定义资源文件，需要统一存放于应用的resources目录下，便于使用和维护。resources目录包括两大类目录，一类为base目录与限定词目录，另一类为rawfile目录，其基础目录结构如下所示。 18 19 20``` 21resources 22|---base // 默认存在的目录 23| |---element 24| | |---string.json 25| |---media 26| | |---icon.png 27|---en_GB-vertical-car-mdpi // 限定词目录示例，需要开发者自行创建 28| |---element 29| | |---string.json 30| |---media 31| | |---icon.png 32|---rawfile // rawfile目录 33``` 34 35base目录默认存在，而限定词目录需要开发者自行创建，其名称可以由一个或多个表征应用场景或设备特征的限定词组合而成。应用使用某资源时，系统会根据当前设备状态优先从相匹配的限定词目录中寻找该资源。只有当resources目录中没有与设备状态匹配的限定词目录，或者在限定词目录中找不到该资源时，才会去base目录中查找。rawfile是原始文件目录，它不会根据设备状态去匹配不同的资源，故不在本文的讨论范文内。 36 37>  **说明：** 38> - 请访问[声明式开发范式资源文件分类](../../quick-start/resource-categories-and-access.md#资源分类)，了解限定词目录的命名规则、创建流程、匹配规则等，本文不展开介绍。 39> 40> - 没有设备状态匹配的限定词目录，或者在限定词目录中找不到目标资源时，会继续在base目录中查找。**强烈建议对于所有应用自定义资源都在base目录中定义默认值**，防止出现找不到资源值的异常场景。 41> 42> - 类Web开发范式的资源文件路径及资源限定词的使用与声明式范式不同，详情请参考[类Web开发范式资源限定与访问](../../ui/js-framework-resource-restriction.md)及[类Web开发范式文件组织](../../ui/js-framework-file.md)。 43 44base目录与限定词目录下面可以创建资源组目录（包括element、media等），用于存放特定类型的资源文件。 45 46 | 资源组目录 | 目录说明 | 资源文件 | 47| -------- | -------- | -------- | 48| element | 表示元素资源，以下每一类数据都采用相应的JSON文件来表征。<br/>- boolean，布尔型<br/>- color，颜色<br/>- float，浮点型<br/>- intarray，整型数组<br/>- integer，整型<br/>- pattern，样式<br/>- plural，复数形式<br/>- strarray，字符串数组<br/>- string，字符串 | element目录中的文件名称建议与下面的文件名保持一致。每个文件中只能包含同一类型的数据。<br/>- boolean.json<br/>- color.json<br/>- float.json<br/>- intarray.json<br/>- integer.json<br/>- pattern.json<br/>- plural.json<br/>- strarray.json<br/>- string.json | 49| media | 表示媒体资源，包括图片、音频、视频等非文本格式的文件。 | 文件名可自定义，例如：icon.png。 | 50 51在element目录的各个资源文件中，以“name-value”的形式定义资源，如下所示。而在media目录中，直接以文件名作为name，故开发者将文件放入media目录即可，无需再额外定义name。 52 53 54``` 55// color.json 56{ 57 "color": [ 58 { 59 "name": "color_red", 60 "value": "#ffff0000" 61 }, 62 { 63 "name": "color_blue", 64 "value": "#ff0000ff" 65 } 66 ] 67} 68``` 69 70 71### 访问应用资源 72 73在工程中，通过 "$r('app.type.name')" 的形式引用应用资源。app代表是应用内resources目录中定义的资源；type 代表资源类型（或资源的存放位置），可以取 color、float、string、plural和media，name代表资源命名，由开发者添加资源时确定。 74 75>  **说明：** 76> 可以查看[声明式范式访问应用资源](../../quick-start/resource-categories-and-access.md#应用资源)，了解资源访问的更多细节。 77 78 79### 示例 80 81在应用的resources目录下，创建名为tablet的限定词子目录，并按照下表所示，在base目录和tablet限定词目录中添加相应的资源。 82 83 | 资源名称 | 资源类型 | base目录中资源值 | 限定词目录（tablet）中资源值 | 84| -------- | -------- | -------- | -------- | 85| my_string | string | default | tablet | 86| my_color | color | \#ff0000 | \#0000ff | 87| my_float | float | 60vp | 80vp | 88| my_image | media | my_image.png（太阳图标） | my_image.png（月亮图标） | 89 90在代码中通过 "$r('app.type.name')" 的形式使用应用资源，并分别在默认设备和平板上查看代码的运行效果，可以发现同一资源在不同设备上的取值不同。 91 92 93 94 95``` 96@Entry 97@Component 98struct Index { 99 build() { 100 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 101 Text($r("app.string.my_string")) 102 .fontSize($r("app.float.my_float")) 103 .fontColor($r("app.color.my_color")) 104 Image($r("app.media.my_image")) 105 .width(100) 106 .height(100) 107 } 108 .width('100%') 109 .height('100%') 110 } 111} 112``` 113 114 115## 系统资源 116 117除了自定义资源，开发者也可以使用系统中预定义的资源（即[分层参数](visual-basics.md)，同一资源ID在设备类型、深浅色等不同配置下有不同的取值）。 118 119在开发过程中，分层参数的用法与资源限定词基本一致。开发者可以通过"$r('sys.type.resource_id')"的形式引用系统资源。sys代表是系统资源；type代表资源类型，值可以取color、float、string和media；resource_id代表资源id。 120 121可以查看本文[应用UX设计中关于资源的介绍](design-resources.md)，获取OpenHarmony支持的系统资源ID及其在不同配置下的取值。 122 123>  **说明：** 124> - 仅声明式开发范式支持使用分层参数，类Web开发范式不支持。 125> 126> - 系统资源可以保证不同团队开发出的应用有较为一致的视觉风格。对于系统预置应用，强烈建议使用系统资源；对于三方应用，可以根据需要选择使用系统资源或自定义应用资源。 127> 128> - 可以查看[OpenHarmony/resources代码仓](https://gitee.com/openharmony/resources/tree/master/systemres/main/resources)了解系统预置资源的实现，这里的目录结构与工程中的resources目录类似，也是通过资源限定词匹配不同的设备或设备状态。 129
