MiniX自绘渲染跨平台框架
  • 框架说明
  • 声明式开发范式
  • 内置Api
指南
接口
  • Minix CLI
示例
  • 类Web框架

    • 框架说明
    • 类Web开发范式
    • 内置Api
  • 指南
  • 组件
  • 接口
  • 示例
  • 规范
  • DophinHybrid

    • 快速上手 (opens new window)
    • UI 组件库 (opens new window)
    • jsBridge 接口 (opens new window)
  • DolphinWeex

    • 快速上手 (opens new window)
    • UI 组件库 (opens new window)
    • jsBridge 接口 (opens new window)
  • 发布消息
  • 常见问题
  • 更新日志
  • 框架说明
  • 声明式开发范式
  • 内置Api
指南
接口
  • Minix CLI
示例
  • 类Web框架

    • 框架说明
    • 类Web开发范式
    • 内置Api
  • 指南
  • 组件
  • 接口
  • 示例
  • 规范
  • DophinHybrid

    • 快速上手 (opens new window)
    • UI 组件库 (opens new window)
    • jsBridge 接口 (opens new window)
  • DolphinWeex

    • 快速上手 (opens new window)
    • UI 组件库 (opens new window)
    • jsBridge 接口 (opens new window)
  • 发布消息
  • 常见问题
  • 更新日志
  • 框架说明

    • 概述
    • 声明式 UI 语法

    • 深入理解组件化

    • 应用生命周期
    • 资源管理

      • 资源文件的分类
      • 资源访问
        • 访问应用资源
        • 访问系统资源
        • 资源文件示例
    • 像素单位
    • 应用包结构配置文件的说明
  • 常见布局开发指导

  • 性能提升的推荐方法

# 资源访问

# 访问应用资源

在工程中,通过"$r('app.type.name')"的形式引用应用资源。app 代表是应用内 resources 目录中定义的资源;type 代表资源类型(或资源的存放位置),可以取“color”、“float”、“string”、“plural”、“media”,name 代表资源命名,由开发者定义资源时确定。

引用 rawfile 下资源时使用"$rawfile('filename')"的形式,当前$rawfile 仅支持 Image 控件引用图片资源,filename 需要表示为 rawfile 目录下的文件相对路径,文件名需要包含后缀,路径开头不可以以"/"开头。

说明:

资源描述符不能拼接使用,仅支持普通字符串如'app.type.name'。

$r返回值为 Resource 对象,可通过getString 方法获取对应的字符串。

在 xxx.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目录下图片
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# 访问系统资源

系统资源包含色彩、圆角、字体、间距、字符串及图片等。通过使用系统资源,不同的开发者可以开发出具有相同视觉风格的应用。

开发者可以通过“$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);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 资源文件示例

color.json 文件的内容如下:

{
    "color": [
        {
            "name": "color_hello",
            "value": "#ffff0000"
        },
        {
            "name": "color_world",
            "value": "#ff0000ff"
        }
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12

float.json 文件的内容如下:

{
    "float":[
        {
            "name":"font_hello",
            "value":"28.0fp"
        },
	{
            "name":"font_world",
            "value":"20.0fp"
        }
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12

string.json 文件的内容如下:

{
    "string":[
        {
            "name":"string_hello",
            "value":"Hello"
        },
	{
            "name":"string_world",
            "value":"World"
        },
	{
            "name":"message_arrive",
            "value":"We will arrive at %s."
        }
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

plural.json 文件的内容如下:

{
    "plural":[
        {
            "name":"eat_apple",
            "value":[
                {
                    "quantity":"one",
                    "value":"%d apple"
                },
                {
                    "quantity":"other",
                    "value":"%d apples"
                }
            ]
        }
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17