鸿蒙学习实战之路-HarmonyOS 资源分类与访问指南

最近好多鸿蒙新手问我："西兰花，鸿蒙里的资源文件怎么管理啊？图片、字符串、颜色这些东西都放哪儿？怎么访问？感觉比前端的资源管理复杂多了！"o(╯□╰)o

别急别急，今天这篇就带你们搞定 HarmonyOS 的资源管理——就像咱们整理厨房调料一样，鸿蒙也有它的"收纳逻辑"，学会了你会发现其实超简单！

---

🥦 一、鸿蒙资源的"收纳盒"分类

鸿蒙的资源文件就像咱们厨房里的调料，得分类放好才好找。它把资源分成了这几大类：

1. 元素资源（Element）

主要存放应用的配置信息和静态数据：

• 字符串（string）：界面上的文字，多语言支持全靠它
• 颜色（color）：主题色、文字色这些
• 尺寸（float）：字体大小、间距这些数值
• 布尔值（boolean）：开关状态
• 数组（array）：一组相关数据

2. 媒体资源（Media）

存放界面上用到的各种媒体文件：

• 图片（png/jpg/svg 等）：界面上的图标、背景图
• 音频（mp3 等）：提示音、背景音乐
• 视频（mp4 等）：宣传视频啥的

3. 布局资源（Layout）

使用 XML 格式描述界面结构的布局文件：

4. 动画资源（Animation）

定义动画效果的 JSON 配置文件：

5. 原始文件（RawFile）

这个厉害了！鸿蒙会原封不动地打包这些文件，支持任何格式：

• 配置文件（json/xml）
• 字体文件（ttf/otf）
• 文档（pdf 等）

🥦 二、资源文件的"摆放位置"

鸿蒙项目的资源都住在entry/src/main/resources目录下，咱们来看看具体怎么放：

resources/
├── base/              # 基础资源目录
│   ├── element/       # 元素资源
│   ├── media/         # 媒体资源
│   ├── layout/        # 布局资源
│   ├── animation/     # 动画资源
│   └── rawfile/       # 原始文件
├── en_US/             # 英文资源（多语言）
├── zh_CN/             # 中文资源（多语言）
└── values-sw600dp/    # 大屏设备资源（适配不同尺寸）

是不是超灵活？可以根据设备类型、分辨率、语言等多种维度来组织资源！

🥦 三、怎么访问这些资源？

放好了资源，咱们得知道怎么在代码里用啊！鸿蒙提供了两种主要的访问方式：

1. 资源引用（$r）

这是最常用的方式，通过资源 ID 统一访问各种资源。

代码示例：

// 访问字符串资源
Text($r('app.string.hello_world'))
  .fontSize($r('app.float.title_size'))  // 访问尺寸资源
  .fontColor($r('app.color.primary_color'))  // 访问颜色资源

// 访问图片资源
Image($r('app.media.logo'))
  .width(100)
  .height(100)

这里的app是资源的命名空间，string/media是资源类型，hello_world/logo是资源名。是不是超直观？

2. 原始文件访问（ResourceManager）

对于 rawfile 目录下的文件，咱们得用 ResourceManager 来访问。

代码示例：

// 获取ResourceManager实例
let resourceManager = getContext(this).resourceManager;

// 读取文本文件
resourceManager.getRawFileContent('config.json').then((content) => {
  let config = JSON.parse(String.fromCharCode.apply(null, new Uint8Array(content)));
  console.log('配置文件内容：' + JSON.stringify(config));
});

// 读取图片文件
resourceManager.getRawFileContent('custom_image.png').then((content) => {
  let imageSource = image.createImageSource();
  imageSource.createPixelMap(content).then((pixelMap) => {
    // 使用pixelMap创建图片
  });
});

鸿蒙的 API 是 Promise 风格的，用起来超现代！

🥦 四、多语言与适配，就这么简单！

鸿蒙的资源适配能力超级强，超直观：

1. 多语言支持

在resources目录下创建对应语言的文件夹（如en_US、zh_CN），然后在每个文件夹里放对应的element/string.json，系统会自动根据设备语言选择资源。

示例：

• resources/zh_CN/element/string.json：中文字符串
• resources/en_US/element/string.json：英文字符串

2. 设备适配

通过"限定词目录"来适配不同设备，比如：

• values-sw600dp：屏幕宽度大于 600dp 的设备
• values-land：横屏模式
• media-xxhdpi：高分辨率屏幕的图片

系统会根据当前设备状态自动匹配最合适的资源，是不是超灵活？

🥦 五、实战：做个带多语言的登录界面

光说不练假把式，咱们来整个实战 Demo——带多语言支持的登录界面：

1. 准备资源文件

字符串资源（中文）：resources/zh_CN/element/string.json

{
  "string": [
    {
      "name": "app_name",
      "value": "我的鸿蒙应用"
    },
    {
      "name": "login_title",
      "value": "用户登录"
    },
    {
      "name": "username_hint",
      "value": "请输入用户名"
    },
    {
      "name": "password_hint",
      "value": "请输入密码"
    },
    {
      "name": "login_button",
      "value": "登录"
    }
  ]
}

字符串资源（英文）：resources/en_US/element/string.json

{
  "string": [
    {
      "name": "app_name",
      "value": "My Harmony App"
    },
    {
      "name": "login_title",
      "value": "User Login"
    },
    {
      "name": "username_hint",
      "value": "Enter username"
    },
    {
      "name": "password_hint",
      "value": "Enter password"
    },
    {
      "name": "login_button",
      "value": "Login"
    }
  ]
}

颜色资源：resources/base/element/color.json

{
  "color": [
    {
      "name": "primary_color",
      "value": "#007AFF"
    },
    {
      "name": "text_color",
      "value": "#333333"
    },
    {
      "name": "hint_color",
      "value": "#999999"
    }
  ]
}

尺寸资源：resources/base/element/float.json

{
  "float": [
    {
      "name": "title_size",
      "value": "24fp"
    },
    {
      "name": "input_size",
      "value": "16fp"
    },
    {
      "name": "spacing",
      "value": "20fp"
    }
  ]
}

2. 编写登录界面代码

import promptAction from '@ohos.promptAction';

@Entry
@Component
struct LoginPage {
  @State username: string = '';
  @State password: string = '';

  build() {
    Column({
      space: $r('app.float.spacing')
    }) {
      // 应用图标
      Image($r('app.media.app_icon'))
        .width(100)
        .height(100)
        .margin({ top: 60 })

      // 标题
      Text($r('app.string.login_title'))
        .fontSize($r('app.float.title_size'))
        .fontColor($r('app.color.text_color'))
        .fontWeight(FontWeight.Bold)
        .margin({ top: 40 })

      // 用户名输入框
      TextInput({
        placeholder: $r('app.string.username_hint'),
        text: this.username
      })
        .width('80%')
        .height(50)
        .fontSize($r('app.float.input_size'))
        .fontColor($r('app.color.text_color'))
        .placeholderColor($r('app.color.hint_color'))
        .backgroundColor('#F5F5F5')
        .borderRadius(8)
        .padding({ left: 15 })
        .onChange((value: string) => {
          this.username = value;
        })

      // 密码输入框
      TextInput({
        placeholder: $r('app.string.password_hint'),
        text: this.password,
        type: InputType.Password
      })
        .width('80%')
        .height(50)
        .fontSize($r('app.float.input_size'))
        .fontColor($r('app.color.text_color'))
        .placeholderColor($r('app.color.hint_color'))
        .backgroundColor('#F5F5F5')
        .borderRadius(8)
        .padding({ left: 15 })
        .onChange((value: string) => {
          this.password = value;
        })

      // 登录按钮
      Button($r('app.string.login_button'))
        .width('80%')
        .height(50)
        .fontSize($r('app.float.input_size'))
        .fontColor(Color.White)
        .backgroundColor($r('app.color.primary_color'))
        .borderRadius(8)
        .margin({ top: 20 })
        .onClick(() => {
          if (this.username && this.password) {
            promptAction.showToast({
              message: '登录成功！',
              duration: 2000
            });
          } else {
            promptAction.showToast({
              message: '请输入用户名和密码',
              duration: 2000
            });
          }
        })
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.White)
    .alignItems(HorizontalAlign.Center)
  }
}

3. 代码解析

• 咱们用$r()引用了各种资源，统一管理超方便
• 多语言支持是自动的，切换设备语言就能看到效果
• 颜色和尺寸都用了资源文件，以后改主题色只需要改color.json就行，不用改代码！

🥦 西兰花警告

• 资源命名不能有大写字母：鸿蒙的资源名必须是小写字母加下划线，否则编译报错（别问我怎么知道的^_）
• rawfile 目录下的文件不会被压缩：图片这类资源最好放 media 目录，系统会自动优化
• 多语言资源要保持 key 一致：不同语言的 string.json 里的 name 字段必须完全一样，否则会找不到资源

🥦 西兰花小贴士

• 用ohpm install @ohos/resourcemanager可以获取更强大的资源管理能力
• 资源文件可以用 DevEco Studio 的可视化编辑器编辑，比手动写 JSON 方便多了
• 复杂的布局可以用 XML 写在 layout 目录，然后在 ArkTS 里引用

---

🥦 总结一下

HarmonyOS 的资源管理核心思路就是"分类存放+统一访问"：

• 分类存放：把不同类型的资源（文字、颜色、图片等）放在不同的目录下，就像整理厨房调料一样
• 统一访问：通过$r()或ResourceManager访问资源，不管资源具体放在哪里
• 智能适配：系统自动根据设备状态匹配最合适的资源，多语言、多设备适配超简单

现在你们应该能轻松搞定鸿蒙的资源文件了吧？学会这套"收纳逻辑"，咱们也能把鸿蒙的资源管理得井井有条！

👉 下一步行动

1. 打开 DevEco Studio，创建一个测试项目，试试今天学的资源管理
2. 把你的项目资源按照鸿蒙的分类方式整理一下
3. 尝试做一个多语言切换的小功能，巩固今天的知识

📚 推荐资料

• 官方资源管理文档：华为开发者文档-资源分类与访问
• 多语言开发指南：华为开发者文档-应用

我是盐焗西兰花，
不教理论，只给你能跑的代码和避坑指南。
下期见！🥦